首页 > > 网页制作 > css >

3.栅格系统

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

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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<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>

<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>  <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>  <div class="row"> <div class="col-md-auto">在中等屏幕下内容撑开宽度</div> </div>  <div class="row"> <div class="col-8">所有尺寸下都占8列</div> <div class="col-4">所有尺寸下都占4列</div> </div>

<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>  <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>  <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>  <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> <div class="col order-xl-3">第三列</div> </div> <div class="row"> <div class="col">第一列</div> <div class="col order-first">第二列</div> <div class="col order-last">第三列</div> </div>  <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>  <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>  <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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有