【Bootstrap Learning】-4 栅格系统

1. 栅格系统 

   container/container-fluid 

   row

   column

2.  选择Documentation -- 选择 Layout -- Container 

    container 有两种：

    container  响应式容器。随着屏幕的宽度自适应变化。

    container-fluid 非响应式容器。 一直是100%。

  

<div class="container bg-info"> Hey, I am simple container</div>
<div class="container-fluid bg-danger"> Hey, I am simple container-fluid</div>

3.  Responsive breakpoints

    Bootstrap 能够做到屏幕自适应，就是因为Responsive breakpoints。可以简单的理解为，bootstrap根据不同的屏幕大小写了几套CSS，会根据不同的屏幕选择相应的CSS样式显示。如果我们自定义屏幕自适应样式，只需要将相应的代码写在不同的@media 下面即可。

   /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {}

   /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {}

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {}

    /*  Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {}

  eg： 不同的屏幕下面显示不同的背景色。

 body{
            background: aqua;
        }
          
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
        body{
            background: yellow;
        }
          }

   /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        body{
            background: red;
        }
    
      }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        body{
            background: blue;
        }
      }

    /*  Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        body{
            background: green;
        }
      }

4. 简单的栅格

   等宽栅格

<div class="container">
    <div class="row">
        <div class="col bg-info">container column</div>
        <div class="col bg-warning">container column</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col bg-warning">container-fulid column</div>
        <div class="col bg-info">container-fulid column</div>
        <div class="col">container-fulid column</div>
    </div>
</div>

屏幕自适应栅格

bootstrap将屏幕平均分成12份，数值X表示该列占的份数，也就是占整行的X/12。

    <div class="container">
        <div class="row">
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-warning">container column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-info">container column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-primary">container column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-secondary">container column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-success">container column</div> 
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-dark text-light">container column</div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-warning">container-fulid column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-info">container-fulid column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-primary">container-fulid column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-secondary">container-fulid column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-success">container-fulid column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 bg-dark text-light">container-fulid column</div>
        </div>
    </div>

上面的例子中，超大屏幕一行放6列，大屏幕下一行放4列，中屏幕下一行放3列，小屏幕一行放2列，超小屏幕一行放1列(超小屏幕下没有设置CSS，根据DIV独立成行的属性)

不规格列宽栅格

    <div class="container">
        <div class="row">
            <div class="col-md-11  bg-warning">container column</div>
            <div class="col-md-4  bg-info">container column</div>
            <div class="col-md-4  bg-secondary">container column</div>
            <div class="col-md-10  bg-primary">container column</div>
            <div class="col-md-4  bg-secondary">container column</div>
            <div class="col-md-4  bg-success">container column</div>
            <div class="col-md-4  bg-dark text-light">container column</div>
        </div>
    </div>

在中屏幕下，第一列占11份，放在第一行。第二列占4份，而第一行只剩下1份的空间，放不下四份，故放在第二行。

同理，第三列放在第二行，第四列放在第3行。

 列里有列

        <div class="row">
            <div class="col-md-4  bg-warning">container column</div>
            <div class="col-md-4  bg-info">container column</div>
            <div class="col-md-4  bg-warning">container column</div>
            <div class="col-md-4  bg-warning">container column</div>
            <div class="col-md-4  bg-info">container column</div>
            <div class="col-md-4  bg-secondary">
                <div class="row">
                    <div class="col bg-primary">column in column</div>
                    <div class="col bg-success">column in column</div>
                </div>

            </div>

        </div>
    </div>