bootstrap栅格系统

来源：互联网发布：java程序计数器编辑：程序博客网时间：2024/06/05 17:45
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>bootstrap</title>    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">    <script src="../JS/jquery-3.2.1.min.js"></script>    <script src="../JS/bootstrap.js"></script>    <style type="text/css">        div[class*='col-']{background: #666;border: 1px #00f solid;color: white;min-height: 50px;}    </style></head><body>    <!-- <div class="container-fluid">        aaaaa    </div> -->    <div class="container">        <div class="row">            <div class="col-lg-1">col-lg-1</div>            <div class="col-lg-11">col-lg-11</div>            <!-- 一共12列 -->        </div>        <div class="row">            <div class="col-md-6">col-md-1</div>            <div class="col-md-6">col-md-1</div>        </div>        <div class="row">            <div class="col-sm-4">col-sm-1</div>            <div class="col-sm-4">col-sm-1</div>            <div class="col-sm-4">col-sm-1</div>        </div>        <div class="row">            <div class="col-xs-4">col-xs-1</div>            <div class="col-xs-4">col-xs-1</div>            <div class="col-xs-4">col-xs-1</div>        </div>        <div class="row"><!-- 偏移 -->            <div class="col-lg-4">col-lg-1</div>            <div class="col-lg-4 col-lg-offset-4">col-lg-1</div>        </div>        <div class="row"><!-- 排序 -->            <div class="col-lg-1 col-lg-push-11">col-lg-1</div>            <div class="col-lg-11 col-lg-pull-1">col-lg-11</div>        </div>        <div class="row">            <div class="col-lg-4">col-lg-1</div>            <div class="col-lg-4 col-lg-offset-5">col-lg-1</div><!-- 偏移量超出十二列会自动移向下一行 -->        </div>        <div class="row">            <div class="col-lg-4">col-lg-1</div>            <div class="col-lg-4 col-lg-push-5">col-lg-1</div><!-- 排序超出十二列不会自动移向下一行  -->        </div>        <div class="row"><!-- 嵌套 -->            <div class="col-lg-6">col-lg-6                <div class="row">                    <div class="col-lg-4">col-lg-4</div>                    <div class="col-lg-4">col-lg-4</div>                    <div class="col-lg-4">col-lg-4</div>                </div>            </div>        </div>        <div class="row">            <div class="col-lg-6">col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6</div>                    <!-- <div class="col-lg-3">col-lg-3</div>                    <div class="col-lg-3">col-lg-3</div>                    <div class="col-lg-3">col-lg-3</div>会出现浮动 -->                    <div class="col-lg-3">col-lg-3</div>                    <div class="col-lg-3">col-lg-3</div>                    <div class="clearfix"></div><!-- 清除浮动 -->                    <div class="col-lg-3">col-lg-3</div>        </div>    </div></body></html><!-- 容器：container-fluid:流体container:固定，1170，970，750，auto(针对不同的分辨率，也可以自己指定宽度)栅格系统：分为12列:row col'阈值：分辨率  1200>=    超大分辨率                       lg-   只要大于1200，就是水平列，小于1200是竖直列            (1200>=和992>=之间是中等屏幕)   md-   只要大于992就是水平列,小于992是竖直列  992>=                 (992>=和768>=之间是paid屏幕)  sm-   只要大于768就是水平列,小于768是竖直列  768>=   768<      是移动端屏幕                  xm-    小于768是竖直列 它们之间可以相互配合 class="col-lg-6 col-xs-4"  分辨率变化时一排两个或三个 列偏移：只能往右偏移 col-[lg/md/sm/xm]-offset-数值 排序： col-[lg/md/sm/xm]-push-数值：向后移动 col-[lg/md/sm/xm]-pull-数值：向前移动 偏移和排序的区别： 有时它们能达到相同的效果，例如一个格子的时候靠左或靠右。 但是偏移只能往右，且多个存在若超出范围，则会自动向下一行重新偏移 排序push向右，pull向左，排序超出十二列不会自动移向下一行 嵌套： 嵌套的子元素会以父级为单位重新按照12网格分配空间 清除浮动：<div class="clearfix"></div> 以下的div都会清除浮动 -->
阅读全文
0 0