Bootstrap全局CSS样式

布局容器

Bootstrap需要为页面内容和栅格系统包裹容器。提供了两种容器类：.container和.container-fluid,两者不能嵌套使用。
.container 类用于固定宽度并支持响应式布局的容器,宽度为不同屏幕尺寸下的固定值。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
区别：例如当屏幕尺寸大于1170px时，.container 下宽度保持为1170，.container-fluid 占据100%宽度。

栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

-	超小屏幕（<768px）	小屏幕（>768px）	中等屏幕（>992px）	大屏幕（>1200px）
.container最大宽度	自动	750px	970px	1170p
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg

自适应设置

为了在不同屏幕尺寸下显示不同的效果，可以为相同的内容添加不同类。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

上面的代码在超小屏幕下第一个div占第一行12列，第二个div占第二行6列；在小屏幕上第一个div占第一行6列；在中等屏幕下，第一个div占第一行8列，第二个div占第一行4列.

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
.col-md-前缀类只有在屏幕大于992px的时候有效，同理其他前缀类

嵌套列

外层div里添加.row元素即可嵌套列。父元素再被分割成12列。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
.col-md-push-*：原位置往后推；
.col-md-pull-*：原位置忘前拉；

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> //往后推3格
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> //往前拉9格
</div>

排版

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含<small>标签或赋予 .small 类的元素，可以用来标记副标题。
.lead: 让段落突出显示。
<mark>: 高亮文本。
<del>: 删除线。
<u>:下划线。

对齐

<p class="text-left">Left aligned text.</p>//左对齐
<p class="text-center">Center aligned text.</p>//居中
<p class="text-right">Right aligned text.</p>//右对齐
<p class="text-justify">Justified text.</p>//两端对齐
<p class="text-nowrap">No wrap text.</p>//不换行

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> //首字母大写

缩略语

鼠标悬停在缩略语上时显示完整内容，完整内容定义在title属性上。

<abbr title="attribute">attr</abbr>

引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p>标签。
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

有序列表与无序列表使用与HTML5相同。
内联列表.list-line：通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
定义列表：

<dl>
  <dt>...</dt> //短语，粗体
  <dd>...</dd>  //短语的描述
</dl>

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行

代码

<code>标签包裹内联样式的代码片段;
<kbd> 标签标记用户通过键盘输入的内容;
<pre>包裹多行代码，还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条;
<var> 标签标记变量;
<samp>标签来标记程序输出的内容.

表格

结构：

<table class="table">
    <caption>...</caption>
        <thead>
            <tr>
                <th>...</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
</table>

<table>
.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
.table-bordered 类为表格和其中的每个单元格增加边框。
.table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<tbody>
.table-striped 类可以给 <tbody>之内的每一行增加斑马条纹样式。(条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。)
<tr> and <td> <th>

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色(浅灰)
.success	标识成功或积极的动作（绿色）
.info	标识普通的提示信息或动作(蓝色)
.warning	标识警告或需要用户注意(黄色)
.danger	标识危险或潜在的带来负面影响的动作(红色)

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

表单

.form-control: 使添加该类的<input>>、<textarea> 和 <select> 元素宽度属性为 width: 100%,设置圆角，内补等一系列属性，使其更美观。
.form-group:包裹label标签和相应的控件。
.form-inline: 运用在form标签上，表单内联，只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
.form-horizontal:运用在form标签上,将 label 标签和控件组水平并排布局

多选和单选框

多选框（checkbox）:

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

单选框（radio）: name值必须设成相同

div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

.checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

下拉列表

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

静态控件

为 <p> 元素添加 .form-control-static 类。

<div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>

检验状态

利用颜色变化

添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素来表示表单控件的检验状态。

添加额外的图标

设置相应的 .has-feedback 类并添加正确的图标。反馈图标（feedback icon）只能使用在文本输入框<input class="form-control">元素上.

<div class="form-group has-success has-feedback">
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

输入框的前置或后置组件

利用输入框的前置和后置组件，可以添加用户输入中的公共部分。利用.input-group-addon.

<div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control">
</div>

控件尺寸

.input-lg 类似的类可以为控件设置高度，通过.col-lg-* 类似的类可以为控件设置宽度

按钮

为 <a>、<button>或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

.btn-primary:首选项
.btn-success:成功
.btn-info:一般信息
.btn-warning:警告
.btn-danger:危险
.btn-link:链接
尺寸：
.btn-lg、.btn-sm、btn-xs等