Board logo

标题: Bootstrap 网格系统(6) [打印本页]

作者: look_w    时间: 2019-5-13 09:36     标题: Bootstrap 网格系统(6)

在下面的实例中,我们有 <div class="col-sm-6">..</div>,我们将使用 .col-sm-offset-3 class 来居中这个 div。

代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Hello, world!</h1>
        <div class="row" >
            <div class="col-sm-6 col-sm-offset-3"
            style="background-color: #dedef8;box-shadow:
            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>我是想要居中的列
                </p>
            </div>
        </div>
    </div>
     
    </body>
    </html>

效果如图:





列里嵌套行---列里多行布局

如果需要一个列里有多行请在这一列里添加一个新的 .row(行),并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <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>
                    第一列的内容
                </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>
                           第二列下的第一行的第一列内容
                        </p>
                    </div>
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                             第二列下的第一行的第二列内容
                        </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>
                             第二列下的第二行的第一列内容
                        </p>
                    </div>
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                           第二列下的第二行的第二列内容
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
    </body>
    </html>

效果如图:






列排序---调整列的顺序

我们知道col-xx-* 是用来觉得列的宽度的,表示占据12格子中的多少格。然后按照顺序排序,那么如果我们要调整列的顺序呢。

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

可以使用.col-xx-push-* 和 .col-xx-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
在下面的实例中,我们有两列布局,第一列是占据4格比较短,第二列占据8格,比较长。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。让第二列变成第一列,长的在左边。代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <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>
     
    </body>
    </html>

效果图:




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0