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> <!-- 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>
<!-- 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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
- web前端零基础系统学习路线(写给入门的新手) 2020-03-24
- 用flex布局实现栅格系统 2020-03-15
- 使用栅格系统开发响应式页面 2020-03-15
- 基于原生的 html css js php ajax做的一个 web登录和注册系 2020-02-21
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash