input[type=“submit”]

    input[type=“button”]

    input[type=“reset”]

    <button>

Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

   .table：基础表格

   .table-striped：斑马线表格

   .table-bordered：带边框的表格

   .table-hover：鼠标悬停高亮的表格

   .table-condensed：紧凑型表格

   .table-responsive：响应式表格

在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

硬编码"&lt;"代替小于号(<) ，"&gt;"代替大于号(>)

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

.list-inline可用于制作top导航栏

<ul class="list-inline">

    <li>Home</li>

    <li>Article</li>

</ul>

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

label 标签的for属性和 radio标签的id一致，选中文字的同时也是单选按钮

徽章图标实现功能

<div class="form-group has-error has-feedback">

    <label class="control-label" for="inputError1">错误状态</label>

    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  

  </div>

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 jquery版本得是1.9以上的才能与bootstrap配合使用

数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding) <div class="container"> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>

表单图标验证效果

很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  ......
</div>
<div class="form-group has-error has-feedback">
  ......
</div>
</form>

当fieldset的标签碰上legend标签的注意事项，是选项框变灰，但是没被禁用
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    …
</fieldset>
</form>

把整个区域都禁掉使用<fieldset disabled></fieldset>