[bootstrap] bootstrap 基础（二）栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

bootstrap 栅格系统实例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <title>bootstrap 栅格系统</title>
    <style type="text/css" >
        /* 添加样式*/
        .grid [class^='col-']{
            border: 1px silver solid;
            background-color: darkgray;
            margin-top: 15px;
        }

    </style>
</head>
<body>

<div class="container" >
    <!--
    实例：从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），
在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
    -->
    <b>实例：从堆叠到水平排列</b>
    <div class="row  grid">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row grid">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row grid">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
    <b>实例：流式布局容器</b>
    <!--
    将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
    -->
    <div class="container-fluid">

    </div>

   <b>实例：移动设备和桌面屏幕</b>
    <!--
    是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，
    即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。
    -->
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row grid">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row grid">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row grid">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>

    <b>实例：手机、平板、桌面</b>
    <!--
在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。
    -->
    <div class="row grid">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row grid">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block "></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>

    <b>实例：多余的列（column）将另起一行排列</b>
    <!--
    如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
    -->
    <div class="row grid">
        <div class="col-xs-9">.col-xs-9</div>
        <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
        <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>

</div>

</body>
</html>

效果图:

响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <title>bootstrap 栅格系统</title>
    <style type="text/css" >
        /* 添加样式*/
        .grid [class^='col-']{
            border: 1px silver solid;
            background-color: darkgray;
            margin-top: 15px;
        }

    </style>
</head>
<body>

<div class="container" >
    <div class="row grid">
        <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 Resize your viewport or check it out on your phone for an example.</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

</div>

</body>
</html>

除了列在分界点清除响应，您可能需要重置偏移, 后推或前拉某个列。请看此栅格实例。

<div class="row grid">
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<b>列偏移</b>
    <div class="row grid">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row grid">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row grid">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<b>嵌套列</b>
    <div class="row grid">
        <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row grid1">
                <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                    Level 2: .col-xs-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<b>列排序</b>
    <div class="row grid">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>

总体实例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <link rel="stylesheet" href="../css/bootstrap.min.css">
 6     <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 7     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
 8     <title>bootstrap 栅格系统</title>
 9     <style type="text/css" >
10         /* 添加样式*/
11         .grid [class^='col-']{
12             border: 1px silver solid;
13             background-color: darkgray;
14             margin-top: 15px;
15         }
16 
17         .grid1 [class^='col-']{
18             border: 1px red solid;
19             background-color: blue;
20             margin-top: 15px;
21         }
22 
23     </style>
24 </head>
25 <body>
26 
27 <div class="container" >
28     <b>响应式列重置</b>
29     <div class="row grid">
30         <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 Resize your viewport or check it out on your phone for an example.</div>
31         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
32 
33         <!-- Add the extra clearfix for only the required viewport -->
34         <div class="clearfix visible-xs-block"></div>
35 
36         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
37         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
38     </div>
39 
40     <div class="row grid">
41         <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
42         <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
43     </div>
44 
45     <div class="row grid">
46         <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
47         <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
48     </div>
49     <b>列偏移</b>
50     <div class="row grid">
51         <div class="col-md-4">.col-md-4</div>
52         <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
53     </div>
54     <div class="row grid">
55         <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
56         <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
57     </div>
58     <div class="row grid">
59         <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
60     </div>
61 
62       <b>嵌套列</b>
63     <div class="row grid">
64         <div class="col-sm-9">
65             Level 1: .col-sm-9
66             <div class="row grid1">
67                 <div class="col-xs-8 col-sm-6">
68                     Level 2: .col-xs-8 .col-sm-6
69                 </div>
70                 <div class="col-xs-4 col-sm-6">
71                     Level 2: .col-xs-4 .col-sm-6
72                 </div>
73             </div>
74         </div>
75     </div>
76   <b>列排序</b>
77     <div class="row grid">
78         <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
79         <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
80     </div>
81 
82 </div>
83 
84 </body>
85 </html>

View Code

效果图：

Less mixin 和变量

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

变量

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

参考资料：

http://v3.bootcss.com/css/#grid-example-basic

posted @ 2015-04-13 18:05 snow__wolf 阅读(218) 评论(0) 收藏举报

刷新页面返回顶部

xwolf

花开不倦只为恋蝶香，人逢知己无奢望...

[bootstrap] bootstrap 基础（二）栅格系统

栅格系统

简介

栅格参数

响应式列重置

列偏移

嵌套列

列排序

Less mixin 和变量

变量

mixin

公告

xwolf

花开不倦只为恋蝶香，人逢知己无奢望...

[bootstrap] bootstrap 基础（二） 栅格系统

栅格系统

简介

栅格参数

响应式列重置

列偏移

嵌套列

列排序

Less mixin 和变量

变量

mixin

公告

[bootstrap] bootstrap 基础（二）栅格系统