bootstrap的栅格系统 bootstrap的栅格系统

一.栅格系统栅格系统：栅格系统通过一系列包含内容的行和列来创建页面布局。
---------------移动端设备优先

----行必须放置在 .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份

【bootstrap的栅格系统】设备的范围
----(.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; } ----@mediascreen and(max-width: 992px) { .container { width: 970px; } } -----当屏幕宽度小于最大宽度992px时，执行.container { width: 970px; } ----@mediascreen and(max-width: 1200px) { .container { width: 1170px; } } ----@mediascreen 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-9cole-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: 小屏幕隐藏，其他屏幕显示