【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>