前端框架bootstrap－栅格系统

Posted 2021-04-05 前端咖秀

简介

bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或者viewport尺寸的增加，系统会自动分为最多12列

.container  和 .container-fluid

row必须包含在.container(固定宽度) 或 .container-fluid(100%宽度)，以便为其赋予合适的排列和内补（padding）

注：文章添加的样式 .show-grid，show-inner-grid，为了便于观察，可以去掉

 <div class="container">
    <div class="row show-grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
 </div>

 <div class="container-fluid">
    <div class="row show-grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
 </div>

 <style>
     .show-grid [class^=col-]{
         background-color:#e2e2e2;
         border:1px solid gray;
     }
 </style>

媒体查询－分界点阈值

• 超小屏幕（手机，小于768px）

没有任何媒体查询相关的代码，因为在bootstrap中是默认的（bootstrap是移动设备优先的）

• 小屏幕（平板，大于等于768px）

@media （min-width: @screen-sm-min）{...}

• 中等屏幕（桌面显示器，大于等于992px）   

@media（min-width: @screen-md-min）{...}

• 大屏幕（大桌面显示器，大于等于1200px）

@media （min-width: @screen-lg-min）{...}

偶尔会在媒体查询中包含max-width,从而将css的影响限制在更小范围的屏幕大小之内

@media（max-width: @screen-xs-max）{...}@media（min-width: @screen-sm-min）and (max-width: @screen-sm-max) {...}@media（min-width: @screen-md-min）and (max-width: @screen-md-max) {...}@media（min-width: @screen-lg-min）and (max-width: @screen-lg-max) {...}

栅格参数

.container最大宽度

• <768px — none(自动)

• >=768px — 750px

• >=992px — 970px

• >=1200px — 1170px

类前缀

• .col-xs-

• .col-sm-

• .col-md-

• .col-lg-

列数（column）: 12列

槽（gutter）宽 ： 30px(每列左右 各15px)

可偏移，可嵌套，可排序

小提示：如果在一个.row内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体的单元被另起一行排列

 <div class="container-fluid">
    <div class="row show-grid">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-6">.col-md-6<br>因为8 + 6 = 14 >12, 这6列就会另起一行排列</div>
        <div class="col-md-4">.col-md-4<br>随后的列会在新的一行跟随排列</div>
    </div>
 </div>

响应式列重置

在某些阈值时，某些列可能会出现比别的列高的情况，为了克服这一问题，建议联合使用.clearfix 和响应式工具类

响应式工具类

• 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

• 有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式

  
  

可用的类

• .visible-xs-*

• .visible-sm-*

• .visible-md-*

• .visible-lg-*

• .hidden-xs

• .hidden-sm

• .hidden-md

• .hidden-lg

从v3.2.0版本起，.visible-*-*， 针对不同屏幕都有三种变体，针对css中不同的display属性

类组	css display属性
.visible-*- block	diplay : block
.visible-*- inline	diplay : inline
.visible-*- inline-block	diplay : inline-block

<div class="row show-grid">
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3 <br> 这列比其他列高</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>

    <!-- 当分辨率小于992时，需要在分界点清除响应，使用clearfix  和 visible-sm-block -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
</div>

列偏移

使用.col-md-offset-*类可以将列向右侧偏移，实际上是通过使用＊选择器为当前元素增加左侧的边距（magin），例如： .col-md-offset-4 类 将 .col-md-4元素向右侧偏移列4个列（column）的宽度

<div class="container-fluid">
    <div class="row show-grid">
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-4 col-md-offset-4">.col-md-2 .col-md-offset-4向右偏移4列</div>
    </div>

    <div class="row show-grid">
        <div class="col-md-4 col-md-offset-2">.col-md-4  .col-md-offset-2向右偏移2列</div>
        <div class="col-md-2">.col-md-2</div>
    </div>
 </div>

列嵌套

为了使内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素 和 一系列 .col-md- 元素到 已经存在的 .col-md- 元素内， 被嵌套的 行（row） 所包含的列（column）不能超过12

<div class="container-fluid">
    <div class="row show-grid">
        <div class="col-md-10">
            外层列: .col-md-10
            <div class="row show-inner-grid">
                <div class="col-md-8 col-lg-6">
                    内层列: .col-md-8 .col-lg-6
                </div>
                <div class="col-md-4 col-lg-6">
                    内层列: .col-md-4 .col-lg-6
                </div>
            </div>
        </div>
    </div>
 </div>

 <style>
     .show-grid [class^=col-]{
         background-color:#e2e2e2;
         border:1px solid gray;
     }

     .show-inner-grid{
         padding-bottom: 15px
     }
 </style>

列排序

通过使用.col-md-pull- 和 .col-md-push- 类就可以很容易的改变列（column）的顺序

• .col-md-pull-*  : 在md 分辨率范围时 ， 往前移＊列

• .col-md-push-* : 在md 分辨率范围时 ，向后移＊列

 <div class="container-fluid">
    <div class="row show-grid">
        <div class="col-md-8 col-md-push-4">.col-md-8 .col-md-push-4 分辨率>=992px时，向后移4列</div>
        <div class="col-md-4 col-md-pull-8">.col-md-4 .col-md-pull-8 分辨率>=992px时，向前移8列</div>
    </div>
 </div>