Bootstrap学习笔记-栅格

最新推荐文章于 2019-04-04 16:47:56 发布

原创最新推荐文章于 2019-04-04 16:47:56 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

BootStrap 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例演示了如何使用Bootstrap的栅格系统进行响应式布局设计。包括基本的列定义、列偏移、嵌套列及列排序等关键特性。

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery.bootgrid.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
    <title>Title</title>
    <style>
        .row{
            margin-bottom: 20px;
        }
        .row .row{
            margin-top: 10px;
            margin-bottom: 0px;
        }
        [class*="col-"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86,61,124,.15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86,61,124,.2);
        }
    </style>
</head>
<body>
    <!-- 栅格测试 -->
    <div class="container">
        <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>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>

        <div class="row">
            <div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3co
                l-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>

        <div class="row">
            <!-- col-md-offset-4 偏移四个 -->
            <div class="col-md-4 col-md-offset-4">col-md-4</div>
        </div>

        <!--嵌套使用-->
        <div class="row">
            <div class="col-sm-9">
                one
                <div class="row">
                    <div class="col-xs-8">
                        first
                        <div class="col-xs-4">
                            two
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--列的排序-->
        <div class="row">
            <div class="col-md-9 col-md-push-3">col-md-9</div>
            <div class="col-md-3 col-md-pull-9">col-md-3</div>
        </div>

    </div>
</body>
</html>