码迷,mamicode.com
首页 > 其他好文 > 详细

栅格系统

时间:2020-02-06 14:45:11      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:box   fse   执行   visible   全屏   pad   order   移动   containe   


容器类名:box、wrap、wrapper、content、container
栅格系统的容器:
固定宽居中:container

0-768:移动端       768-992:pad端        992-1200:pc端    1200-:pc端宽屏
    xs                    sm                   md                  lg
100%                     750px                970px               1170px

全屏(百分百):container-fluid(自身带有左右padding的15px)
子元素需要实现全屏时需要加上 左右外边距-15px
( margin-left:-15px;margin-right:-15px; )

先写行再写列(若设定范围为sm则在md、lg、都会以sm样式展示)
行:row           列:col

辅助工具(只在规定范围内执行):
hidden-* (范围)隐藏
visible-* (范围)显示

列偏移: col-*(范围)-offset-1(数量)
注意:列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围,则需要声明更宽范围偏移为0 ;

列排序:
向右:col-*-push-*
向左:col-*-pull-*
注意:列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围,则需要声明更宽范围排序为0 ;
 
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 bo-red">
            <div class="row">
                <div class="col-sm-6 bo-red">4</div>
                <div class="col-sm-6 bo-red">4</div>
            </div>
        </div>
        <div class="col-sm-4 bo-red">4</div>
    </div>
</div>
 
 
<div class="container">
    <div class="row">
        <div class="border yellow col-sm-3 col-sm-push-9 col-xs-push-0 col-xs-3 hidden-md col-lg-10 col-lg-push-0 col-lg-offset-1 col-xs-offset-0 "></div>
        <div class="border red col-sm-4 col-sm-pull-1 col-xs-pull-0 col-xs-4 hidden-md hidden-lg"></div>
        <div class="border blue col-sm-3 col-sm-pull-1 hidden-xs col-md-5 col-md-pull-0 hidden-lg"></div>
        <div class="border green col-sm-2 col-sm-pull-10 col-xs-pull-0 col-xs-5 col-md-7 col-md-pull-0 hidden-lg"></div>
    </div>
</div>

栅格系统

标签:box   fse   执行   visible   全屏   pad   order   移动   containe   

原文地址:https://www.cnblogs.com/ZXH-null/p/12268392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!