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>