bootstrap栅格系统

时间：2018-07-21 18:53:10 阅读：152 评论：0 收藏：0 [点我收藏+]

一、概念：

①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-屏幕大小-数字，其中：

屏幕大小 lg 代表大屏设备以上生效包含本身，比如col-lg-4
屏幕大小md 代表中屏设备以上生效包含本身，比如col-md-4
屏幕大小sm 代表小屏设备以上生效包含本身，比如col-sm-4
屏幕大小xs 代表超小屏设备以上生效包含本身，比如col-xs-4
数字代表占多少份，默认分成12等份，比如col-lg-8

   <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;
      }

技术分享图片

bootstrap栅格系统

标签：功能屏幕拉伸 height 布局 tst color 扩展生效

原文地址：https://www.cnblogs.com/EricZLin/p/9347548.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行