Bootstrap——全局CSS样式

1、.container

为页面内容和栅格系统包裹.container容器，响应式，大屏固定宽度且居中，小屏百分百自适应。

2、.row . col--

Bootstrap中定义了一套响应式的网格系统，将一个容器划分成12列，然后通过col-*-*的类名控制每一列的占比（每列宽度通过百分比实现）。

每一个列默认有一个15px的左右外边距，row类的一个作用是通过左右-15px屏蔽掉这个边距。

col-xs-[列数] 、col-sm-[列数] 、col-md-[列数]、 col-lg-[列数]分别指在超小屏幕（<768px）、小屏幕（≥768px）、中等屏幕（≥992px）、大屏幕（≥1200px）占几份。

可以给一个div添加多个col-*-*，使不同屏幕下占不同份数。不写col-xs-12时虽然默认占12列，但是没有padding等样式。

<div class="container">
    <div class="row">
        <div class="col-md-2 text-center"></div>
        <div class="col-md-5"></div>
        <div class="col-md-2"></div>
        <div class="col-md-3"></div>
    </div>
</div>

text-center的作用是让内部内容居中显示。

3、.btn

为<a>、<button>或<input>元素添加按钮类即可使用Bootstrap提供的样式，有预定义样式和不同尺寸的按钮。

http://blog.koalite.com/bbg/可以输入颜色得到自定义的按钮，也可以直接复制源码（如下）修改。

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

4、.hidden-、.visible--*

hidden-*：在某种屏幕尺寸下隐藏；

visible-*-*：在某种屏幕尺寸下显示，第二个*代表display为block、inline或inline-block。

<div class="topbar hidden-xs hidden-sm"></div>
<div class="topbar visible-md-block visible-lg-block"></div>