Bootstrap网格系统
Bootstrap网格系统：
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
Bootstrap网格的基本结构
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
移动设备优先策略：
内容：决定什么是最重要的
布局：优先设计更小的宽度、基础的CSS是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强：随着屏幕大小的增加而添加元素。
Bootstrap网格系统工作原理：
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统是如何工作的：
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
媒体查询：
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
响应式的列重置：
以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。
为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3" style="background-color:#dedef8; box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p> </div> <div class="col-xs-6 col-sm-3" style="background-color:#dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p> <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p> </div> <div class="clearfix visible-xs"></div> <!--清除浮动--> <div class="col-xs-6 col-sm-3" style="background-color:#dedef8; box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p> </div> <div class="col-xs-6 col-sm-3" style="background-color:#dedef8; box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz </p> </div> </div> </div> <script src="jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
偏移列
偏移列是一个用于更专业布局的有用功，它们可用来给列腾出更多的空间。例如，.col-xs-*不支持便宜，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用.col-nd-offest-*类。这些类会把一个列的左外边距增加*列，*范围是1到11。
<div class="container"> <h1>Hello,world</h1> <div class="row col-md-offset-3"><!--col-md-offset-3来居中这个div--> <div class="col-xs-6 " style="background-color:#6699FF; box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> <p>hi I am an apple</p> </div> </div> </div>
嵌套列
为了在内容中嵌套默认的网格，请添加一个新的.row，并在一个已有的.col-md-*列内添加一组.col-md-*列。被嵌套的行应包含一组列，这个组列个数不能超过12.
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第一列</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第二列 - 分为四个盒子</h4> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </p> </div> </div> </div> </div> </div>
列排序
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <p> 排序前 </p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div> <br> <div class="row"> <p> 排序后 </p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div> </div>
