学习Bootstrap（2）—— 表单、按钮、图片等

5.Bootstrap 表单

垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。

创建基本表单的步骤：
（1）向父 <form> 元素添加 role="form"。
（2）把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
（3）向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100%宽度。在使用内联表单时，需要在表单控件上设置一个宽度。
使用 class .sr-only，可以隐藏内联表单的标签。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。

创建水平布局的表单的步骤：
（1）向父 <form> 元素添加 class .form-horizontal。
（2）把标签和控件放在一个带有 class .form-group 的

中。
（3）向标签添加 class .control-label。

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

（1）输入框(input)

（2）文本框（Textarea）
可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）

 <textarea class="form-control" rows="3"></textarea>

（3）复选框（Checkbox）和单选框（Radio）
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

（4）选择框（Select）
使用 multiple="multiple" 允许用户选择多个选项。

（5）静态控件
在一个水平表单内的表单标签后放置纯文本时，可在 <p> 上使用 class .form-control-static。

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

6.Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。
以下样式可用于<a>, <button>, 或 <input> 元素上：

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

按钮颜色

按钮大小

按钮状态

激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
按钮元素：添加 .active class 来显示它是激活的。
锚元素：添加 .active class 到 <a> 按钮来显示它是激活的。

禁用状态
禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
按钮元素：添加 disabled 属性 到 <button> 按钮。
锚元素：添加 disabled class 到 <a> 按钮。

按钮标签

可以在 <a>、<button> 或 <input> 元素上使用按钮 class。
建议在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

按钮组

在 div 中直接使用 .btn-group 可以创建按钮组。
使用 .btn-group-lg|sm|xs 来控制按钮组的大小。
要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置。

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

例子：使用 a 标签：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

如果是 <button> 元素, 要在外层使用 .btn-group 类来包裹:

<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>

内嵌下拉菜单的按钮组

data-toggle="dropdown"是Bootstrap的自定义属性，实现下拉菜单的功能。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

7.Bootstrap图片

Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：缩略图功能，添加一些内边距（padding）和一个灰色的边框。

.img-responsive：图片响应式 (将很好地扩展到父元素)。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上。

8.Bootstrap辅助类

背景

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：

.bg-primary
.bg-success	
.bg-info	
.bg-warning	
.bg-danger	

其他类

类	描述
.pull-left	元素浮动到左边
.pull-right	元素浮动到右边
.center-block	设置元素为 display:block 并居中显示
.clearfix	清除浮动
.show	强制元素显示
.hidden	强制元素隐藏
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮
.caret	显示下拉式功能

（1）关闭按钮

<p>关闭图标实例
  <button type="button" class="close" aria-hidden="true">
    &times;
  </button>
</p>

aria-hidden="true" 主要是帮助残障人士（如失明）使用识读设备（自动读取内容并自动播放出来），播放到带此属性的内容时会自动跳过，以免残障人士混淆！

（2）插入符

<p>插入符实例
  <span class="caret"></span>
</p>

（3）快速浮动
可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。
如需对齐导航栏中的组件，请使用 .navbar-left 或 .navbar-right 代替。

（4）内容居中
使用 class center-block 来居中元素。

（5）清除浮动
清除元素的浮动，请使用 .clearfix class。

点击此处，查看例子

（6）显示和隐藏内容
可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。

（7）屏幕阅读器
可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。

9.Bootstrap 响应式实用工具

（1）.visible-xs|sm|md|lg-*可见
（2）.hidden-xs|sm|md|lg-*隐藏

（3）.visible-*-* 的类针对每种屏幕大小都有了三种变体：

.visible-*-block	对应CSS的  display: block;
.visible-*-inline 	对应CSS的  	display: inline;
.visible-*-inline-block	 	对应CSS的  display: inline-block;

（4）打印类，visible对打印机可见对流浪器隐藏，相反hidden对打印机隐藏对浏览器可见。

.visible-print-block
.visible-print-inline
.visible-print-inline-block	
.hidden-print