bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.
栅格系统
媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。
断点 768px 992px 1200px container:两边padding：15px row：两边负margin 15px col列：两边padding：15px
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}.container-fluid { //将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row:before,
.row:after{display: table;content: " ";} //清除浮动 包住里面的 col@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
...
...
...
}