3.栅格系统

2020-05-28 16:01:12来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

3.栅格系统

# 3.栅格系统

 

介绍的是 4.5.x版本

 

    一行最多放12列

 

- class类介绍     最外层容器:         1.container-fluid:宽度100%,和body的宽度一样         2.container:宽度是一个具体数值,但是会根据用户屏幕大小来改变

 

    行类         1.row:分行

 

    列类:         5个响应层         后面的*表示占据列数,取值从1-12         1.col-*:None(auto);//col为超小屏,屏幕<576px,容器的宽度固定为auto,一行可以永远设置12个列         2.col-sm-*:540px;//sm为小屏,屏幕>=576px,容器的宽度固定为540px,一行可以设置12个列。屏幕尺寸<576的时候,一行只能设置1列         3.col-md-*:720px;//md为中屏,屏幕>=768px,容器的宽度固定为720px,一行可以设置12个列。屏幕尺寸<768的时候,一行只能设置1列         4.col-lg-*:960px;//lg为大屏,屏幕>=992px,容器的宽度固定为960px,一行可以设置12个列。屏幕尺寸<992的时候,一行只能设置1列         5.col-xl-*:1140px;//xl为超大屏,屏幕>=1200px,容器的宽度固定为1140px,一行可以设置12个列。屏幕尺寸<1200的时候,一行只能设置1列 ```html <!DOCTYPE html> <html lang="en"> <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >     <title>Document</title>     <style>         .row div{             height:100px;             background:green;             border:1px solid #000;             color:#fff;         }     </style> </head> <body>     <div class="container-fluid">         <div class="row">             <div class="col-xl-1">第1列</div>             <div class="col-xl-1">第2列</div>             <div class="col-xl-1">第3列</div>             <div class="col-xl-1">第4列</div>             <div class="col-xl-1">第5列</div>             <div class="col-xl-1">第6列</div>             <div class="col-xl-1">第7列</div>             <div class="col-xl-1">第8列</div>             <div class="col-xl-1">第9列</div>             <div class="col-xl-1">第10列</div>             <div class="col-xl-1">第11列</div>             <div class="col-xl-1">第12列</div>         </div>         <div class="row">             <div class="col-xl-1">占1列</div>             <div class="col-xl-2">占2列</div>             <div class="col-xl-3">占3列</div>             <div class="col-xl-4">占4列</div>             <div class="col-xl-3">占3列</div>         </div>         <div class="row">             <div class="col-xl-13">占13列</div>         </div>     </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >     <title>Document</title>     <style>         .row div{             height:100px;             background:green;             border:1px solid #000;             color:#fff;         }         .v-align{             height:100px;             background:rgba(255,0,0,0.1);             margin:10px -15px;         }         .v-align div{             height:40px;             line-height:40px;             background:rgba(86,61,124,0.2);             color:#333;         }     </style> </head> <body>     <div class="container">         <div class="row">             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>             <div class="col">等宽列</div>         </div>         <!--设置多行等宽列,在希望换行的地方添加一个w-100的class,能够让后面的列换行-->         <div class="row">             <div class="col">等宽列,行1</div>             <div class="col">等宽列,行1</div>             <div class="w-100" style="height:auto;border:none;"></div>             <div class="col">等宽列,行2</div>             <div class="col">等宽列,行2</div>         </div>         <!--设置一个列宽,剩下的自动平分-->         <div class="row">             <div class="col-sm-7">在小屏下占7列</div>             <div class="col">自动平分剩余的宽度</div>             <div class="col">自动平分剩余的宽度</div>             <div class="col">自动平分剩余的宽度</div>         </div>         <!--设置根据内容调整列的宽度,使用.col-{breakpoint}-auto,breakpoint代指5个响应层-->         <div class="row">             <div class="col-md-auto">在中等屏幕下内容撑开宽度</div>         </div>         <!--设置所有尺寸下,都占同样的列数,使用.col-* -->         <div class="row">             <div class="col-8">所有尺寸下都占8列</div>             <div class="col-4">所有尺寸下都占4列</div>         </div>

 

        <!--             混合排列或组合模式                 1.超大屏幕下一行显示6个div,一个div占2列                 2.大屏幕下一行显示4个div,一个div占3列                 3.中屏幕下一行显示3个div,一个div占4列                 4.小屏幕下一行显示2个div,一个div占6列                 5.超小屏幕下一行显示1个div,一个div占12列         -->         <div class="row">             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>         </div>         <!-- 对齐             垂直对齐:                 1.行对齐方式                     align-items-start:顶对齐                     align-items-center:中间对齐                     align-items-end:底对齐                 2.列的单独对齐方式                     align-self-start:顶对齐                     align-self-center:中间对齐                     align-self-end:底对齐         -->         <div class="row v-align align-items-start">             <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>             <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>             <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>         </div>         <div class="row v-align align-items-center">             <div class="col">垂直对齐-中间对齐-行的对齐方式</div>             <div class="col">垂直对齐-中间对齐-行的对齐方式</div>             <div class="col">垂直对齐-中间对齐-行的对齐方式</div>         </div>         <div class="row v-align align-items-end">             <div class="col">垂直对齐-底部对齐-行的对齐方式</div>             <div class="col">垂直对齐-底部对齐-行的对齐方式</div>             <div class="col">垂直对齐-底部对齐-行的对齐方式</div>         </div>         <div class="row v-align">             <div class="col align-self-start">垂直对齐-顶部对齐-列的对齐方式</div>             <div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>             <div class="col align-self-end">垂直对齐-底部对齐-列的对齐方式</div>         </div>         <!--水平对齐             1.justify-content-start 左对齐             2.justify-content-center 居中对齐             3.justify-content-end 右对齐             4.justify-content-around 分散居中对齐(每个元素两侧的间距是相等的)             5.justify-content-between 左右两端对齐(元素之间的间距是自动平分的)         -->         <div class="row v-align justify-content-start">             <div class="col-4">水平对齐-左对齐-行的对齐方式</div>             <div class="col-4">水平对齐-左对齐-行的对齐方式</div>         </div>         <div class="row v-align justify-content-center">             <div class="col-4">水平对齐-居中对齐-行的对齐方式</div>             <div class="col-4">水平对齐-居中对齐-行的对齐方式</div>         </div>         <div class="row v-align justify-content-end">             <div class="col-4">水平对齐-右对齐-行的对齐方式</div>             <div class="col-4">水平对齐-右对齐-行的对齐方式</div>         </div>         <div class="row v-align justify-content-around">             <div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>             <div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>         </div>         <div class="row v-align justify-content-between">             <div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>             <div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>         </div>         <!--              列排序:使用。order-{breakpoint}-*              3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 来排序         -->         <div class="row">             <div class="col">第一列</div>             <div class="col order-4">第二列</div>             <div class="col order-3">第三列</div>         </div>         <div class="row">             <div class="col">第一列</div>             <div class="col order-xl-4">第二列</div><!--只有当屏幕尺寸>=1200的时候,才会进行排序-->             <div class="col order-xl-3">第三列</div>         </div>         <div class="row">             <div class="col">第一列</div>             <div class="col order-first">第二列</div><!--order-first代表排在第一位,order-last代表排在最后一位-->             <div class="col order-last">第三列</div>         </div>         <!--列偏移:使用offset-{breakpoint}-* -->         <div class="row">             <div class="col-md-4">第一列</div>             <div class="col-md-4 offset-md-4">往右偏移4列</div>         </div>         <div class="row">             <div class="col-3 offset-md-3">第一列</div><!--第一列偏移,后面的格子都会偏移,和下面的现象区分-->             <div class="col-3">第二列</div>         </div>         <div class="row">             <div class="col-3 offset-md-3">第一列</div><!--第一列偏移,后面的格子都会偏移,和上面的现象区分-->             <div class="col-3 offset-md-3">第二列</div>         </div>         <div class="row">             <div class="col-sm-5 col-md-6">小屏占5列,中屏占6列</div><!--第一列偏移,后面的格子都会偏移,和上面的现象区分-->             <div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列,中屏偏移5列</div>         </div>         <!--间距:使用margin工具可以让列之间产生间距             margin-right 和 margin-left             mr-{breakpoint}-auto 使右侧的列远离到最右边             ml-{breakpoint}-auto 使左侧的列远离到最左边         -->         <div class="row">             <div class="col-md-4">第一列</div>             <div class="col-md-4 ml-auto">第二列,跑到最右边</div>         </div>         <div class="row">             <div class="col-md-3 ml-md-auto">在中屏下,离左边距离自动计算</div>             <div class="col-md-3 ml-md-auto">在中屏下,离左边距离自动计算</div>         </div>         <div class="row">             <div class="col-auto mr-auto">宽度由内容撑开</div>             <div class="col-auto">宽度由内容撑开</div>         </div>         <!--嵌套:每个列里面可以再继续进行放行,那嵌套里面的元素就会以父级的宽度为基准,再分12列-->         <div class="row">             <div class="col-sm-9">                 父级的第一列                 <div class="row">                     <div class="col-sm-8 col-6">子级的第一列,小屏下占8列,超小屏下占6列</div>                     <div class="col-sm-8 col-6">子级的第一列,小屏下占8列,超小屏下占6列</div>                 </div>             </div>             <div class="col-sm-3" style="height:150px;background:pink;">父级的第二列</div>         </div>     </div>     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ```   以上是markdown格式的笔记

原文链接:https://www.cnblogs.com/lanshanxiao/p/12984450.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:巧用 display: contents 增强页面语义

下一篇:网页搜索框里显示字段鼠标点击后就隐藏的方法