一、表单
1.1 垂直表单
- 将form标签的role属性值设置成form。
- form内部的每一对标签(label)和控件(input、textarea、select)都需要放在一个继承了form-group这个类的class里面以获取最佳间距。
- 所有的input、textarea、select都需继承form-control这个类以获得更加美化的控件。
- 其他可以继承的类:help-block、checkbox、btn-default
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
效果如下:
1.2 内联表单
其他步骤同上,但是form标签需要继承form-inline这个类,效果如下:
label标签继承.sr-only类可以隐藏标签名。
1.3 水平表单
- ** form标签继承form-horizontal类。**
- form内部的每一对标签和空间需要放到一个继承了from-group的div中。
- 所有的input、textarea、select都需继承form-control这个类以获得更加美化的控件。
- ** 除此之外,label标签还需要继承control-label这个类。**
1.4 支持的表单控件
- 输入框(input)
- 输入框的type有很多种:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color
- 都需要继承form-control这个类。
- 文本框(Textarea)
- 常用于多行输入
- 可以通过改变row属性来设置高度,例如
<textarea class="form-control" rows=3></textarea>
。
- 单选框(Checkbox)和复选框(Radio)
- 他们本质上都是input标签,只不过是将type属性分别改成了checkbox和radio
- 通常作为单选框或者复选框的input标签是放在label标签内,例如:
<div class="checkbox">
<label>
<input type="checkbox" value="">选项一</input>
</label>
<label>
<input type="checkbox" value="">选项二</input>
</label>
</div>
若需要获得内联复选框或者单选框
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" value="">选项一</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">选项二</input>
</label>
</div>
- 选择框
- 通过
select
标签实现,而每一个选择的标签是option
。 - 同时,选择框作为空间之一,select标签也需要继承
form-control
这个类。 - 若允许用户选择多个选项,则可以为select标签设置
multiple="multiple"
。
-
静态控件
静态控件是用于作为某一个label的示例的,需要继承form-control-static
这个类而不是from-control
。 -
表单控件的状态
- 焦点状态,当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。
- 禁用的输入框:通过在input上架disabled属性实现,例如
<input class="form-control disabled>"
。 - 禁用的字段集:通过对field添加disabled属性禁用fieldset内的所有控件。
- 通过每一对标签和空间的父div继承
has-warning
、has-error
或has-success
来实现,例如:
<form role="role">
<div class="form-group has-error">
<label class="control-label">有错误</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<form>
- 表单控件的尺寸
- 高度:各种控件都可以通过继承
input-lg
、input-sm
来控制。 - 宽度:各种控件都可以通过继承
col-lg-*
类似的类来控制。
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
- 表单组的尺寸
- 包含一对标签和空间的div称为表单组。
- form标签继承了
form-horizontal
之后表单组内的元素是水平呈现。 - 为表单组的div继承
form-group-lg
或form-group-sm
来调整表单组的尺寸。
- 列的宽度
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
- 表单帮助文档
通过继承了help-block类的span来实现
二、按钮
2.1 基本样式
任何继承了btn类的a、button或者input标签都会继承圆角灰色按钮的默认外观。
还有大量的可继承的其他样式
类 | 描述 |
---|---|
btn | 添加基本样式 |
btn-default | 默认按钮 |
btn-primary | 原始按钮样式 |
btn-success | 成功操作的样式 |
btn-info | 点击按钮后会弹出提示信息 |
btn-waring | 需要谨慎操作的按钮 |
btn-danger | 是一个危险动作的按钮 |
btn-link | 按钮看起来是一个连接,但是仍有按钮的特性 |
btn-lg | 大按钮 |
btn-sm | 小按钮 |
btn-xs | 超小按钮 |
btn-block | 块级按钮(拉伸至父元素100%的宽度) |
active | 按钮被点击 |
disabled | 禁用按钮 |
例如:
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
2.2 按钮大小
任何继承了btn类的a、button或者input标签都会继承圆角灰色按钮的默认外观。还可以通过如下的类来控制按钮的大小。
类 | 描述 |
---|---|
btn-lg | 大按钮 |
btn-sm | 小按钮 |
btn-xs | 超小按钮 |
btn-block | 块级按钮(拉伸至父元素100%的宽度) |
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">默认大小的原始按钮</button>
<button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
2.3 按钮状态
可以通过继承active
来设置当前按钮的状态是激活状态(按压状态);可以通过input的disabled属性和a标签继承disabled类来设置当前按钮是禁用状态。
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
2.4 多样化的按钮标签
可以将a、button、input都设置为按钮,只需要让标签继承btn
和其他样式类
2.5 按钮组
通过一个继承了btn-group的div将多个继承了btn类的button包在一起,按钮会更加紧凑。Alt text
外层div还可以继承btn-group-lg|sm|xs
来控制按钮组的大小。
若需要垂直的按钮组,只需让最外层的div继承btn-group-vertical
即可。
若需要按钮组适应任何分辨率的屏幕,最外层div只需要再额外继承btn-group-justified
即可。若div内部的不是a标签按钮而是button标签按钮,每一个button标签需要被一个继承了btn-group
的div包起来。
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
若需要有下拉菜单的按钮组,则button需要继承dropdown-toggle
类,并设置data-toggle为dropdown。后面加上继承了dropdown-menu的ul标签和它包住的li标签即可。
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
三、图片
可以用来继承的类:
img-rounded
:圆角图片,实际上应用了border-radius:6px。
img-circle
:圆形图片,实际上应用了border-radius:50%。
img-thumbnail
:相框图片,实际上应用了padding
和灰色边框。img-responsive
:响应式图片,不论如何变化屏幕分辨率,图片都能很好扩展到父元素。实际上是应用了max-width:100%
和height:auto
。
四、其他的辅助类