<div class="table-responsive"> <table class="table"> ... </table> </div>
----------------------------表单-------------------------
表单内的input、textarea、select使用类.form-control将拥有默认的控件风格(width:100%),常规做法是将控件和对应的它之前的label包括在类别为.form-group的div中(将有比较好的布局)
给form附加.form-inline类,将使表单内的控件横向排列(表现为inline-block,内容左对齐,可能需要手动指定宽度,尽管label不显示,但不应当将其省略)
给form附加.form-horizontal类,将使表单水平排列(label和控件在同一个行,.form-group的行为被改变,不需要额外的.row类,但需要联合使用预定义的删格类来实现布局,控件对应的label用.control-label实现更好的外观)
输入框常常添加placeholder属性,所有HTML5输入控件都被支持
textarea往往添加rows属性
checkbox和radio的项应当包裹在label中,checkbox和radio中禁用的项,可以附加disabled属性,同时,附加.disabled类可以使鼠标悬停时呈现禁用状态的图标
给checkbox和radio的label附加.checkbox-inline和.radio-inline类,可以横排选项
给select添加multiple属性,可以同时显示多个选项
如果要用静态文本作为控件,则使用p元素,并附加.form-control-static类
输入框的焦点状态,通过设置对应输入框的CSS属性实现:移除outline(设为0),并赋予box-shadow属性
禁用输入框给input添加disabled属性,而禁用fieldset包裹的所有控件,就给它添加disabled属性(有一定兼容性问题)
只读输入框可以添加readonly属性,其样式也是禁用的
表单控件呈现不同的校验状态,就是给div.form-group附加.has-success、.has-warning、.has-error等类(同时附加.has-feedback类,将显示额外的图标)
通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度
水平排列的表单组的尺寸,通过给div.form-group附加.form-group-lg、.form-group-sm等类来快速设置其内的label和控件
用栅格系统中的列(div.col-xs-3等)包裹输入框或其任何父元素,都可很容易的为其设置宽度
表单控件的辅助文本用span.help-block (例如给出错误提示用)
--------------------------------------按钮-----------------------------------------
基本用法,给button元素附加默认的btn类,然后根据需要呈现的情景,附加btn-default、btn-primary、btn-success等类
按钮的尺寸,可以附加.btn-lg、.btn-sm、.btn-xs类来控制
给按钮附加.btn-block类,可以将其拉伸到父元素的100%宽度,并且表现为块元素
button元素表示的按钮的激活状态,是伪类:active实现的(不需要额外添加),a元素表示的按钮的激活状态,通过附加.active类实现,但如果需要达到外观一致,也可以给button元素的按钮添加.active类







