Bootstrap学习笔记-栅格

最新推荐文章于 2022-02-12 17:12:14 发布

斗木獬

最新推荐文章于 2022-02-12 17:12:14 发布

阅读量159

点赞数

分类专栏： BootStrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_37791322/article/details/79743359

版权

BootStrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>