# 5/24(一) 每日任務

## 題目
根據以下三題寫出對應的代碼。
對知識理解不夠深入者可參考 [Bootstrap 5 網格](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#nesting) 與 5/19 [Bootstrap 實戰營直播內容](https://www.youtube.com/playlist?list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P)

### 範例

題目：請寫出一個在所有設備上都是一行四欄的區塊。
知識點：
1. 構建網格時 最外層需有一個 container
2. container 裡面是一個 row (表示一行)
3. col 不加上 -* 表示他們會自動安排大小
4. 一個 row 是 12 欄 三個 col 在一個 row 中 則一個 col 佔 4 欄

答案：

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
</div>

### 第一題
請寫出一個在所有設備上都是 **左邊佔四 右邊佔八** 的區塊。

知識點：
1. 構建網格時 最外層需有一個 container
2. container 裡面是一個 row (表示一行)
3. 左邊跟右邊的先後順序？先寫的在左邊 依序往右排列。

答案：

<div class="container bg-danger mt-3 mb-3">
  <div class="row pt-3 bg-dark text-light">
    <p>第一題 : 一個在所有設備上都是 左邊佔四 右邊佔八 的區塊</p>
    <div class="test col-4 bg-primary text-light">.col-4</div>
    <div class="test col-8 bg-primary text-light">.col-8</div>
    <hr>
    <p>因為border-box會把border往內推，width不變</p>
    <div class="test col-4 border border-5 border-light bg-primary text-light">.col-4</div>
    <div class="test col-8 border border-5 border-light bg-primary text-light">.col-8</div>
  </div>
</div>
    

### 第二題
請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊。

知識點：
1. col col-sm col-md col-lg 分別代表什麼意思？

答案：

    <div class="container mt-3 mb-3">
        <div class="row bg-dark pt-3 text-light">
            <p>第二題 : 請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊</p>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
            <div class="test col-lg-2 col-md-3 col-sm-4 border border-3 bg-primary text-light">.col</div>
        </div>        
    </div>

### 第三題
請利用第一題的答案 在右邊佔八的區塊中添加一個左邊佔據十欄右邊佔據兩欄的**巢狀網格**。

知識點：
1. 在 col 中添加巢狀網格 一定要在 col 中加上 row 再在 row 下添加 col

答案：

    <div class="container mt-3">
        <div class="row pt-3 bg-dark text-light">
            <p>第三題 : 請利用第一題的答案 在右邊佔八的區塊中添加一個左邊佔據十欄右邊佔據兩欄的巢狀網格</p>
            <div class="test col-4 border border-1 border-light bg-primary text-light">.col-4</div>
            <div class="col-8 border border-1 border-light bg-primary text-light">
                .col-8
                <div class="row">
                    <div class="test col-10 border border-1 border-light bg-success text-light">.col-10</div>
                    <div class="test col-2  border border-1 border-light bg-success text-light">.col-2</div>
                </div>
            </div>            
        </div>
    </div>