bootstrap栅格系统

xiaoxiao2021-02-28  18

<!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都会清除浮动 -->
转载请注明原文地址: https://www.6miu.com/read-1400116.html

最新回复(0)