BootStrap——栅格系统

1、栅格参数

类前缀

超小屏幕（手机） .col-xs-

小屏幕（平板） .col-sm-

中等屏幕（桌面显示器） .col-md-

大屏幕（大桌面显示器） .col-lg-

他们的列数总为12。

<body>
        <div class="row">
          <div class="col-md-1">1</div>
          <div class="col-md-1">2</div>
          <div class="col-md-1">3</div>
          <div class="col-md-1">4</div>
          <div class="col-md-1">5</div>
          <div class="col-md-1">6</div>
          <div class="col-md-1">7</div>
          <div class="col-md-1">8</div>
          <div class="col-md-1">9</div>
          <div class="col-md-1">10</div>
          <div class="col-md-1">11</div>
          <div class="col-md-1">12</div>
        </div>
        <div class="row">
          <div class="col-md-8">.col-md-8</div>
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-12">.col-md-12</div>
        </div>
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
          <div class="col-md-6">.col-md-6</div>
          <div class="col-md-6">.col-md-6</div>
        </div>
    </body>

当把浏览器最大化的时候所有的元素是水平排列的（这时候的像素是足够的，当把浏览器的窗口逐渐缩小的时候，元素将变为堆叠排列）

水平显示：

堆叠排列：

因为没有对其他大小的屏幕进行设置，因此，在不满足中等屏幕大小的时候直接变为堆叠排列。

2、不同设备的显示规律

<body>
        <div class="container">
            <div class="row">
              <div class="col-sm-12 col-lg-8">col-sm-12 col-lg-8</div>
              <div class="col-sm-6 col-lg-4">col-sm-6 col-lg-4</div>
            </div>
            
            <div class="row">
              <div class="col-sm-5 col-lg-4">col-sm-5 col-lg-4</div>
              <div class="col-sm-7 col-lg-8">col-sm-7 col-lg-8</div>
              <div class="col-sm-7 col-lg-8">col-sm-7 col-lg-8</div>
            </div>
            
            <div class="row">
              <div class="col-sm-6">col-sm-6</div>
              <div class="col-sm-6">col-sm-6</div>
            </div>
        </div>
    </body>

大屏幕（大于1200px）：

此时，第一行的lg值相加等于12，第二行亦为12，在第二个<div>中，即同一个“row”中，如果值大于12，需要从新的一行开始显示。

小屏幕（大于等于768）：

3、页面内容的隐藏或显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>显示与隐藏控制</title>

        <!-- 引入Bootstrap核心样式文件 -->
        <link href="../css/bootstrap.css" rel="stylesheet">

        <!-- 引入jQuery核心js文件 -->
        <script src="../js/jquery-1.11.3.min.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <script src="../js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
              <div class="col-sm-12 col-lg-8">col-sm-12 col-lg-8</div>
              <div class="col-sm-6 col-lg-4">col-sm-6 col-lg-4</div>
            </div>
            
            <div class="row">
              <div class="col-sm-5 col-lg-4">col-sm-5 col-lg-4</div>
              <div class="col-sm-7 col-lg-8">col-sm-7 col-lg-8</div>
              <div class="hidden-sm col-lg-8">如果是小屏幕我就消失了！ col-lg-8</div>
            </div>
            
            <div class="row">
              <div class="col-sm-6">col-sm-6</div>
              <div class="col-sm-6">col-sm-6</div>
            </div>
        </div>
    </body>
</html>

大屏幕时能够正常显示：

小屏幕时文字消失了：

BootStrap——栅格系统

猜你喜欢