表单

通过 HTML 的form标签和扩展的类可创建出不同样式的表单。

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）

内联表单

水平表单

【水平排列的表单】

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。

就是说，为form添加.form-horizontal类后，它之下的.form-group会被看做“row”，.form-group中的label和div可以按栅格来划分。

单独的form标签会被自动赋予一些全局的样式。所有在设置了.form-control类里的​​<input>​​​、​​<textarea>​​​和​​<select>​​元素都被默认设置宽度为100%，将label元素和input、textarea、select这些元素一起包裹在.form-group中可以获得最好的排列。


按钮

下面讲bootstrap中可作为按钮使用的标签或元素。为 ​​<a>​​​、​​<button>​​​ 或 ​​<input>​​ 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。


<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="submit" value="Submit">

为元素添加btn类和btn-default类可完成按钮的样式。btn是按钮通用样式，btn-default是它的增强样式。

针对组件的注意事项

虽然按钮类可以应用到 ​​<a>​​​ 和 ​​<button>​​​ 元素上，但是，导航和导航条组件只支持 ​​<button>​​ 元素。

如果 ​​<a>​​​ 元素被作为按钮使用 ​​--​​ 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性

强烈建议尽可能使用 ​​<button>​​ 元素来获得在各个浏览器上获得相同的显示效果

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<button type="button" class="btn btn-default">（默认样式）Default</button>

按钮的尺寸

当你需要让按钮具有不同尺寸的时候，同样是使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放


​​<img src="img/boy.jpg" class="img-responsive" alt="图片未能显示">​​

不加img-responsive的图片，如果这个图比浏览器要大，那它会出现滚动条，加了img-responsive，图片的宽度会等于浏览器的宽度。

图片形状

通过为 ​​<img>​​ 元素添加以下相应的类，可以让图片呈现不同的形状。


<img src="..." alt="..." class="img-rounded">  //圆角
<img src="..." alt="..." class="img-thumbnail">  //双线

字体图标

所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

不要和其他组件混合使用（应该创建一个嵌套的 ​​<span>​​​ 标签，并将图标类应用到这个 ​​<span>​​标签上）

只对内容为空的元素起作用（图标类只能应用在不包含任何文本内容或子元素的元素上）

实例：图标字体

<button type="button" class="btn btn-default">
`<span class="glyphicon glyphicon-align-left"></span>
</button>

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

标签页实例

注意 .nav-tabs 类依赖 .nav 基类

举例：

<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

进度条

举例：

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 <span class="sr-only">60% Complete</span>
</div>
</div>