bootstrap--网格化布局

1.响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

2.规则

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。

3.Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */---xs
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */--sm @media (min-width: @screen-sm-min) { ... } /* 中型设备（台式电脑，992px 起） */--md @media (min-width: @screen-md-min) { ... } /* 大型设备（大台式电脑，1200px 起） */--lg @media (min-width: @screen-lg-min) { ... }

4.div没在网格布局中时，是独占一行的，网格把屏幕宽度平分为12个网格，可以定义每个列在各种屏幕占用多少个网格，在没有定义的屏幕中还是独占一行（更大的尺寸没有定义时会向下兼容）

下面代码在平板设备（768-992）中侧边占4格，内容占8格，由于没有定义更大尺，768以上尺寸都会是这个布局

小于768的各自独占一行

原理就是通过@media媒体查询获取当前屏幕宽度，然后设置相应div的宽度比例

比如下例中div.col-sm-4在屏幕宽度大于768px时，css中会出现：

@media (min-width: 768px)
.col-sm-4 {
width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="bootstrap.min.css">
  <title>Document</title>
</head>
<body>
   <div class="row">
     <div class="col-sm-4">
       <h2>侧边标题</h2>
       <p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
     </div>
     <div class="col-sm-8">
      <h2>内容标题</h2>
      <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
    </div>
   </div>
</body>
</html>

5.组合使用网格

bootstrap--网格化布局

猜你喜欢