Bootstrap03之表单,按钮,图片,辅助类,响应式工具
表单
class=”form-control”:可以给<input>、<textarea>、<select>元素设置宽度为100%
示例代码:
<form action="" method="">
<label>用户名:</label>
<input type="text" class="form-control" />
</form>
之前我们写在文本框前面写用户名 一直都是直接写字,在实际开发中一般用文本标签包起来例如 <label> <span> 标签
我们可以看到效果文本框的宽度占满了整行,下拉框的宽度也占满了整行
class=”form-group”:可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰
示例代码:
<form action="" method="">
<div class="form-group">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" class="form-control" />
</div>
<div class="form-group">
<label>密码:</label>
<input type="text" class="form-control" />
</div>
</form>
这个页面效果可能不是很明显
内联表单:class=”form-inline”
什么是内联表单呢,就是让我们的所有表单元素都在一行
<form action="" method="">
<label>用户名:</label>
<input type="text" class="form-control" />
<select class="form-control">
<option value ="">北京</option>
</select>
</form>
刷新页面,我们可以看到效果,每一个元素都自动换行,总共占了四行。用内联表单我们再来看看
<form class="form-inline" action="" method="">
<label>用户名:</label>
<input type="text" />
<select >
<option value ="">北京</option>
</select>
</form>
现在都显示在一行
按钮:可用作按钮使用的标签和元素
可以用作按钮使用的标签元素有很多,a标签、button标签本身就是按钮,input标签的button,submit这些都可以用class=”btn”来添加按钮样式
<a class="btn btn-warning">超链接按钮</a><br>
<button class="btn btn-success" type="button">button标签按钮</button><br>
<input class="btn btn-info" type="button" value="input标签的button按钮"/><br>
<input class="btn btn-danger" type="submit" value="input标签的submit按钮"/>
预定义样式
<button class="btn btn-default">button标签按钮</button>
<button class="btn btn-primary">button标签按钮</button>
<button class="btn btn-success">button标签按钮</button>
<button class="btn btn-info">button标签按钮</button>
<button class="btn btn-warning">button标签按钮</button>
<button class="btn btn-danger">button标签按钮</button>
<button class="btn btn-link">button标签按钮</button>
前面六种基本就是给按钮设置不同的背景色,第七种是把按钮的样式修改为超链接
图片:图片形状、响应式图片
图片形状有三种:
圆角矩形:<img class=”img-rounded”>
<img src="img/a.jpg" class="img-rounded" >
圆形/椭圆:<img class=”img-circle”>这个比较牛逼,会根据图片来决定是宽椭圆还是高椭圆。
<img src="img/a.jpg" class="img-circle" >
缩略图:<img class=”img-thumbnail”>
<img src="img/a.jpg" class="img-thumbnail" >
可是现在还有点瑕疵,我们缩小网页的时候图片好像不会跟着自动缩小,会被只显示一部分。这个时候就需要设置一下 让图片根据网页缩小而自动缩小。我们叫做响应式图片
很简单:img-responsive
<img src="img/a.jpg" class="img-rounded img-responsive" >
<img src="img/a.jpg" class="img-circle img-responsive" >
<img src="img/a.jpg" class="img-thumbnail img-responsive" >
现在就舒服了。看看效果
辅助
情境文本颜色(文字颜色)
这个主要设置文字颜色,有六种颜色,分别:
<p class="text-muted">男儿事长征</p>
<p class="text-primary">少小幽燕客</p>
<p class="text-success">赌胜马蹄下</p>
<p class="text-info">由来轻七尺</p>
<p class="text-warning">杀人莫敢前</p>
<p class="text-danger">须如猬毛磔</p>
情境背景色(背景颜色)
背景颜色注意有五种
<p class="bg-info">黄云陇底白云飞</p>
<p class="bg-danger">未得报恩不得归</p>
<p class="bg-primary">辽东小妇年十五</p>
<p class="bg-warning">惯弹琵琶解歌舞</p>
<p class="bg-success">今为羌笛出塞声</p>
关闭按钮class=”close”
<span class="close">×</span>
×表示X
三角符号class=”caret”
<span class="caret"></span>
响应式工具
当我们需要随着页面大小变化 想要隐藏一些元素的时候可以用响应式工具来实现
可见:class=”visible-xs-*” *指的是block或者inline
<button class="btn-danger visible-sm">手机用户,点击有惊喜</button>
visible-sm:表示只有在页面变小才会显示这个按钮
<p class="bg-danger visible-lg-block">点击有惊喜</p>
block:表示显示整行背景
<p class="bg-danger visible-lg-inline">点击有惊喜</p>
inline:表示只在文本宽度显示背景色
隐藏:class=”hidden-xs”
<button class="btn-danger hidden-lg">手机用户,点击有惊喜</button>
hidden-lg:表示在大屏幕就隐藏
Bootstrap03之表单,按钮,图片,辅助类,响应式工具相关推荐
- 全局CSS之表单按钮图片辅助类响应式工具)
前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单 class="form-control" ...
- Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)
表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
- Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)
表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
- Bootstrap-CSS-按钮-图片-辅助类-响应式
按钮 可作为按钮使用的标签或元素 为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样 ...
- Bootstrap全局css样式_图片,响应式工具
响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
- Bootstrap之表格,按钮,表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式 本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
- 【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片
四.表单和图片 学习内容: .form-control 表单群组 内联表单 表单合组 水平排列 复选框和单选框 下拉列表 校验状态 添加额外图标 控制大小 图片 .form-control .form ...
- Bootstrap ——排版、表格、表单、图片、button 学习博客(二)
Bootstrap中的排版 1. 排版 标题部分 文本部分 对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
- 数据库备份还原 quartz定时任务调度 自定义表单 java图片爬虫
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
最新文章
- 全球最大医疗器械公司在中国寻找移动医疗新机会
- VC内存泄露检查工具:VisualLeakDetector
- MSSQL中实现多表更新
- 【最新消息】阿里宣布无限期延迟复工,字节跳动、腾讯......等企业也再次延迟!...
- ENVI入门系列教程---一、数据预处理---5. 图像自动配准
- mount 远程挂载Nfs
- zoj 3284 Matrix Processing(二维树状数组)
- 从0到1:打造移动端H5性能测试平台
- MATLAB 2015B中文安装激活破解方法图文教程
- 单片机程序加解密方法和注意事项
- Linux-常用工具
- 1000并发的系统服务器配置,1000并发服务器配置
- Web前端——JavaScript 的基础总结
- 联盟链中的Hyperledger Fabric、FISCO BCOS和CITA
- 数据结构与算法笔记:图搜索之DFS详解
- android获取imei兼容_Android如何获取双卡手机IMEI的方法示例
- C++ 有关string类的基本语法以及一个简单算法 理论加案例的形式
- 我们不想清楚Web2.0的得失成败,我们就无法成功开启Web3.0
- Ubuntu Linux环境搭建|系统篇
- android安卓手机怎么修改自己的ip地址
热门文章
- Babylon.js 利用pbr材质(金属材料)
- Spring:更简单的存储与读取Bean对象
- VTK系列70_VTK对MHD格式文件单张切片的鼠标滑动提取显示
- python图片转手绘_在Mac上用python运行图片转手绘图的代码报错,请各位大佬帮忙。...
- 风铃驾到站长是否要转换战场
- 通过vnc 用电脑 控制 手机
- 秋招Android面试总结:美团、携程、百度、腾讯、长银58
- python 计算曲线面积_利用Python中的numpy包实现PR曲线和ROC曲线的计算!
- uni-app:刷新当前页面
- 用Kotlin撸一个图片压缩插件-插件基础篇(二)