Bootstrap栅格系统&媒体查询
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%; }
...
...
...
}