bootstrap栅格系统
发布时间:2020-12-17 20:51:40 所属栏目:安全 来源:网络整理
导读:一、概念: ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局,网格状布局,通过一系列的行(row)与列(column)创建页面布局,你的内容就
一、概念:①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局,网格状布局,通过一系列的行(row)与列(column)创建页面布局,你的内容就可以放入创建好的布局中。 二、行和列①行是类名row,其中container容器默认有15px的左右内间距 ,row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸 <div class="container"> <div class="row"> 第一行 </div> <div class="row"> 第二行 </div> </div> .container{ height: 100px; background: #ccc; } /* 推荐使用子代选择器 */ .container>.row:first-child{ height: 50px; background: green; } .container>.row:last-child{ height: 50px; background: yellow; } ②列是类名col,col可以配合媒体查询使用,格式是col-屏幕大小-数字,其中:
? <div class="container"> <div class="row"> <div class="col-xs-2 col-sm-4 col-md-6 col-lg-8">第一列</div> <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">第二列</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1">第三列</div> </div> </div> .container{ height: 100px; background: #ccc; } .container>.row{ height: 50px; background: green; } .container>.row>div{ height: 50px; border: 10px solid #000; } 三、扩展功能①栅格嵌套 <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div> </div> </div> .container{ height: 100px; background: #ccc; } .container>.row{ height: 50px; background: green; } .container>.row>div{ height: 50px; border: 10px solid #000; } .container>.row>div>.row>div{ height: 30px; border: 5px solid yellow; } ②列的偏移 <div class="container"> <div class="row"> <div class="col-xs-4">第一列</div> <div class="col-xs-4 col-xs-offset-3">第二列</div> </div> </div> .container{ height: 100px; background: #ccc; } .container>.row{ height: 50px; background: green; } .container>.row>div{ height: 50px; border: 10px solid #000; } ③列的排序 <div class="container"> <div class="row"> <div class="col-xs-4 col-xs-push-8">第一列(push往后推)</div> <div class="col-xs-4 col-xs-pull-4">第二列(pull往前拉)</div> </div> </div> .container{ height: 100px; background: #ccc; } .container>.row{ height: 50px; background: green; } .container>.row>div{ height: 50px; border: 10px solid #000; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |