5. BootStrap 栅格对齐 和 栅格排列

看图:

5. BootStrap 栅格对齐 和 栅格排列

 

 

看例子:  注释有些是这里没得 认真看注释即可!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">

        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            .row { /*高是100px*/
                border: solid red;
                height: 100px;

            }

            .ca { /*  格子的高是30px*/
                border: 1px blue solid;
                height: 30px;
            }

        </style>
    </head>
    <body>

    <div class="container">
        <!-- 普通 默认是行 居顶(align-items-start)-->
        <div class="row">
            <div class="ca col-sm ">1列</div>
            <div class="ca col-sm">2列</div>
            <div class="ca col-sm">3列</div>
        </div>

        <br>
    <!--行居中-->
        <div class="row align-items-center">
            <div class="ca col-sm ">1列</div>
            <div class="ca col-sm">2列</div>
            <div class="ca col-sm">3列</div>
        </div>

        <br>
        <!--行居底-->
        <div class="row align-items-end">
            <div class="ca col-sm ">1列</div>
            <div class="ca col-sm">2列</div>
            <div class="ca col-sm">3列</div>
        </div>

        <br>
    <!--  --------------------------------------------------------------  -->
        <!-- 普通 默认是列 居顶(align-self-start)-->
        <br>
        <div class="row">
            <div class="ca col-sm ">1列</div>
            <div class="ca col-sm">2列</div>
            <div class="ca col-sm">3列</div>
        </div>

        <!-- 三种列 默认是居顶 下面是否全部:(align-self-xxx)-->
        <br>
        <div class="row">
            <div class="ca col-sm align-self-start">1列</div>
            <div class="ca col-sm align-self-center">2列</div>
            <div class="ca col-sm align-self-end">3列</div>
        </div>
        <!--  --------------------------------------------------------------  -->
        <br>
        <br>
    <!--  未满100%填充时 可以用 justify-content-* 指定对齐方式 -->
        <div class="row justify-content-start">   <!-- 这里 1+2+3=6 未满12 默认是左对齐 -->
            <div class="ca col-sm-1 ">1列</div>
            <div class="ca col-sm-2 ">2列</div>
            <div class="ca col-sm-3 ">3列</div>
        </div>
        <br>
        <div class="row justify-content-center">   <!-- 这里 1+2+3=6 未满12 此处居中 -->
            <div class="ca col-sm-1 ">1列</div>
            <div class="ca col-sm-2 ">2列</div>
            <div class="ca col-sm-3 ">3列</div>
        </div>
        <br>
        <div class="row justify-content-end">   <!-- 这里 1+2+3=6 未满12 此处右对齐 -->
            <div class="ca col-sm-1 ">1列</div>
            <div class="ca col-sm-2 ">2列</div>
            <div class="ca col-sm-3 ">3列</div>
        </div>
        <br>
        <div class="row justify-content-around">   <!-- 这里 1+2+3=6 未满12 此处间隔相等 -->
            <div class="ca col-sm-1 ">1列</div>
            <div class="ca col-sm-2 ">2列</div>
            <div class="ca col-sm-3 ">3列</div>
        </div>
        <br>
        <div class="row justify-content-between">   <!-- 这里 1+2+3=6 未满12 此处两端对齐 -->
            <div class="ca col-sm-1 ">1列</div>
            <div class="ca col-sm-2 ">2列</div>
            <div class="ca col-sm-3 ">3列</div>
        </div>


        <br>
        <!--  --------------------------------------------------------------  -->
    <!--  栅格列可以排序 用 .order-N N的值最大为12 因为只有12列
          注意! 不指定排序的话 默认是最大的! 一定要记得!
    -->

        <div class="row justify-content-center">                                       <!-- 这里把第一和第三列位置调换 -->
            <div class="ca col-sm-1 order-3">1列</div>
            <div class="ca col-sm-2 order-1">2列</div>
            <div class="ca col-sm-3 order-0">3列</div>
        </div>
        <br>
        <div class="row justify-content-center">                                       <!-- 这里强制排序 第一 和 最后 -->
            <div class="ca col-sm-1 order-last">1列</div>
            <div class="ca col-sm-2 order-">2列</div>
            <div class="ca col-sm-3 order-first">3列</div>
        </div>
        <br>

        <!--  --------------------------------------------------------------  -->
        <!--  可以用offset-N 或 offset-*-N 设置列的偏移量,N表示栅格列数 意思就是隔空几个格子-->
        <br>
        <div class="row">                                       <!-- 这里用offset-N 设置偏移量 -->
            <div class="ca col-sm-1 offset-1">1列</div>
            <div class="ca col-sm-2 offset-2">2列</div>
            <div class="ca col-sm-3 offset-3">3列</div>
        </div>
        <br>

        <!--  --------------------------------------------------------------  -->
        <!--  可以用.ml-N 和 .mr-N 来微调列距离,ml调前(左)的距离 mr 调后(右) 的距离:
                但是最高是   5
        -->

        <div class="row">                                       <!-- 这里用ml-N 设置距离量 -->
            <div class="ca col-sm-1 ml-1">1列</div>
            <div class="ca col-sm-2 ml-5">2列</div>
            <div class="ca col-sm-3 ml-1">3列</div>
        </div>
        <br>
        <div class="row">                                       <!-- 这里用ml-N 设置距离量 -->
            <div class="ca col-sm-1 mr-1">1列</div>
            <div class="ca col-sm-2 mr-3">2列</div>
            <div class="ca col-sm-3 mr-1">3列</div>
        </div>

        <br>

        <!--  --------------------------------------------------------------  -->
        <!--  可以用.ml-auto 和 .mr-auto 来左右对齐,ml调前(左) 、 mr 调后(右):
                没什么软用 貌似...
        -->
        <div class="row">                                       <!-- 这里用ml-auto 设置左边距对齐 -->
            <div class="ca col-sm-1 ml-auto">1列</div>
            <div class="ca col-sm-2 ml-auto">2列</div>
            <div class="ca col-sm-3 ml-auto">3列</div>
        </div>
        <br>
        <div class="row">                                       <!-- 这里用mr-auto 设置右边距对齐  -->
            <div class="ca col-sm-1 mr-auto">1列</div>
            <div class="ca col-sm-2 mr-auto">2列</div>
            <div class="ca col-sm-3 mr-auto">3列</div>
        </div>



    </div>


    </body>
    </html>

 

  

上一篇:css公共样式总结


下一篇:安卓渗透测试环境搭建笔记