一.栅格系统
栅格系统:栅格系统通过一系列包含内容的行和列来创建页面布局。
---------------移动端设备 优先
----行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
使用行来创建列的水平组。或者.contaniner-fluid(占据整个窗口,宽度为100%)中
内容应该放置在列内,且唯有列可以是行的直接子元素。
----.container----响应式布局容器
----.container-fluid----流式布局容器
----流式布局和响应式布局不允许嵌套使用
----可重新设置或者增加改变布局容器的样式
预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows行 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
----列数总和:12;----表示跨越的范围
--占据的份数,即row中的column列占据的份数----样式可允许嵌套--即8份中可分为其他份数
--col-xs-12 col-sm-4-------最小为一列,一个占据12份,最大为三列,一个占据的为4份,总共12份
设备的范围
----(.col-xs-):超小设备手机 <768px
(.col-sm-):小型设备平板电脑 >=768px
(.col-md-):中型设备台式电脑 >=992px
(.col-lg-):大型设备台式电脑 >=1200px
----(.col-xs-):超小设备手机 <768px
(.col-sm-):小型设备平板电脑 >=768px
(.col-md-):中型设备台式电脑 >=992px
(.col-lg-):大型设备台式电脑 >=1200px
----container中设置了paddng-left;padding-right:15px;
----row填充了父元素的15px左右的内边距,margin-left;magrin-right
二.媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。
--设置在不同的布局中的容器的样式
----简写:@media (min-width: 768px) { .container { width: 750px; } }
----@media screen and (min-width: 768px) { .container { width: 750px; } }
-----当屏幕宽度大于最小宽度768px时,执行.container { width: 750px; }
----@media screen and (max-width: 992px) { .container { width: 970px; } }
-----当屏幕宽度小于最大宽度992px时,执行.container { width: 970px; }
----@media screen and (max-width: 1200px) { .container { width: 1170px; } }
----@media screen and (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
}
----@media screen and(max-width:768px) and (min-width:992px){
.box{
height:50px;
}
-----当大于768px,小于992px时,使.box的高度为50px
}
----当使用min-width时,顺序并不能颠倒
----大于
----3200px----700px-----100px------顺序递减
三.bootstrap中的其他操作
列偏移:col-md-offset-,,,,可以将列向右侧偏移
----可在不同的设备中,进行相关的偏移
列排序:push--向后推,运动 pull--向前拉,运动,,,,,
----col-lg-push-9 cole-lg-pull-3---并不影响其他列的位置,但移动的部分会把其他的列的内容覆盖掉!!!!!!
----col-lg-9 col-lg-push-3 ------大型设备中列向后运动三份,其他的列的位置不变,但移动的部分会被其他的列覆盖掉!!!!!
bootstrap中的响应式工具:
----显示和隐藏
----visible:可见的
----3.2.0版本之前的用法:visible-lg------超大型屏幕显示
----3.2.0版本之后的版本:visible-lg-block:inline inline-block----超大型屏幕显示
----hidden
----在3.2.0版本之后的,建议使用hidden
----hidden-md 中屏幕隐藏,其他的显示
----hidden-lg 大屏幕隐藏,其他的显示
----hidden-sm: 小屏幕隐藏,其他屏幕显示