bootstrap中的Grid system详解

本文转载自查看原文 2016-10-28 16:57 3429 bootstrap

啦啦啦,都十月中旬啦,好快啊,这个月的多一半都过去了,然而我才写第三篇随笔,小颖得加油啦~~~

下面来看下小颖给大家分享的内容

1. .col-md-和.col-xs-

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bootstrap网格demo</title>
    <link rel="stylesheet" href="style/bootstrap.css">
    <style type="text/css">
        .bootstrap-body { margin-top: 100px;margin-left:50px;margin-right:50px; }
        .row>div{
            background-color: pink;
            border: 1px solid #cacaca;
        }
        .row-two>div{
            background-color: #cacaca;
            border: 1px solid red;
        }
    </style>
<body id='content'>
    <div class="bootstrap-body">
        <!-- 使用一组.col-md- *网格类，您可以创建一个基本网格系统，但是当页面缩小到一定范围时,网格就会出现平铺现象。 将网格列放置在任何.row中。 -->
        <div class="row">
            <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>
        <!-- 不希望你的列简单地堆叠在较小的设备？ 通过将.col-xs- * .col-md- *添加到列，可以使用额外的中小型设备网格类。  -->
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
        </div>
        <div class="row">
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
        </div>
        <div class="row">
            <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>
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</body>
</html>

页面效果:

1378px下:

815px下:

通过上图大家会发现:如果在单个行中放置超过12列，则每组额外列将作为一个单位包装到新行上。

        <div class="row">
            <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>

在这段代码中大家看图当页面缩小到815px时,网格是以 .col-xs-12和.col-xs-6分割的,又因为 .col-xs-12 已经等于12列了,所以后面的那个 <div class="col-xs-6 col-md-4">.col-xs-6 col-md-4</div> 额外列将作为一个单位包装到新行上。示例如下:

        <div class="row">
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
        </div>
        <!-- 如果在单个行中放置超过12列，则每组额外列将作为一个单位包装到新行上。 -->
        <div class="row">
            <div class="col-xs-9">.col-xs-9</div>
            <div class="col-xs-4">
                .col-xs-4
                <br>Since 9 + 4 = 13 &gt; 12, 这个4列宽的div被包装到一个新行上作为一个连续的单元.</div>
            <div class="col-xs-6">
                .col-xs-6
                <br>后续列将沿着新行继续。</div>
        </div>

1378px下和815px下页面效果一样:

2. Responsive column resets(响应列重置)

        <!-- 有四层网格可用，你必然会遇到一些问题，在某些断点，你的列不能清楚地正确，因为一个比另一个更高。 要解决这个问题，使用.clearfix和我们的响应实用程序类的组合。 -->
        <div class="row">
            <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>
            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-xs-block">当页面缩小的一定程度才会出现的div</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>

页面效果:

1378px下和815px下页面效果一样:

767px下:

当页面缩小到767px时,网格按照.col-xs-6进行分割.

3.使用.col-md-offset- *类将列向右移动。

        <!-- 使用.col-md-offset- *类将列向右移动。 这些类将列的左边距增加*列。 例如，.col-md-offset-4将.col-md-4移动到四列。 -->
        <div class="row">
            <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>
        <div class="row">
            <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">
            <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">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <!-- .col-sm-offset-0 -->
        <div class="row">
            <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>
            <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">.col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0</div>
        </div>

页面效果:

1378px下和815px下页面效果一样:

页面中第三行的空白是因为: .col-md-offset-4 ,第四行的空白是因为: .col-md-offset-3 ,第五行的第一个空白是因为 .col-md-offset-3,第二个空白是因为哪一行只有 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>,后面没有内容了,所以是空白的.

1197px下:

第二行的空白是因为页面缩小后,它按照: <div class="col-md-5">.col-sm-6 .col-md-5 .col-lg-6</div>和<div class="col-md-5 col-md-offset-2"> .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0 </div>去进行网格分割的,因为col-md-offset-2所以中间会两个网格的空白.

1117px下:

最后一行的.col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0之所以会出现1197px下和1117px下不一样的原因是内容太长,如果我把哪一行的内容改为 .col-sm-4 ,同样是在1117px下效果如下:

1042px下:

1042px下和1117px下效果的区别在于第二行 .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0 ,原理同上,只是因为内容太长.

991px下:

页面缩小到991px后,第一行网格按 .col-sm-5 分割,第二行按 .col-sm-6分割,第三,四,五,六,七行,是因为使用一组.col-md- *网格类，您可以创建一个基本网格系统，但是当页面缩小到一定范围时,网格就会出现平铺现象。将网格列放置在任何.row中。第八行网格按.col-sm-4进行分割.

719px下:

看图后发现不希望你的列简单地堆叠在较小的设备？通过将.col-xs- * .col-md- *添加到列，可以使用额外的中小型设备网格类。

4.Nesting columns (嵌套列)

        <!-- 要使用默认网格嵌套您的内容，请在现有.col-sm- *列中添加一个新的.row和.col-sm- *列。 嵌套行应该包含一组最多12个或更少的列（不需要使用所有12个可用列）。 -->
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <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>
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                </div>
                <div class="row row-two">
                    <div class="col-xs-8 col-sm-6">Level 3: .col-xs-8 .col-sm-6</div>
                    <div class="col-xs-4 col-sm-6">Level 3: .col-xs-4 .col-sm-6</div>
                </div>
            </div>
        </div>

页面效果:

1378px下:

Level 2: .col-xs-8 .col-sm-6 ,网格按.col-sm-6分割. Level 2:.col-xs-4 .col-sm-6 ,网格按.col-sm-6分割.

Level 3: .col-xs-8 .col-sm-6,网格按.col-sm-6分割. Level 3:.col-xs-4 .col-sm-6 ,网格按.col-sm-6分割.

700px下:

Level 2: .col-xs-8 .col-sm-6 ,网格按.col-xs-8分割. Level 2:.col-xs-4 .col-sm-6 ,网格按.col-xs-4分割.

Level 3: .col-xs-8 .col-sm-6,网格按.col-xs-8分割. Level 3:.col-xs-4 .col-sm-6 ,网格按.col-xs-4分割.

5.Column ordering(列排序)

        <!-- 使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改内置网格列的顺序。 -->
        <div class="row">
            <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>

页面效果:

1378px下:

991px以下都是这样:

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Bootstrap3 Grid system原理及应用 Angular中ui-grid的使用详解 Bootstrap 2.3.0自定Grid布局 Grid布局详解 Extjs4 Grid详解 selenium Grid详解 grid布局详解 css之Grid Layout详解 Grid布局详解 java中System.getProperty()方法详解