---
tags: 21 天帶您做出 Bootstrap 5 募資網站
---
# 第二堂: Bootstrap 5 - 格線系統
<!--ok-->
## 21 天 Bootstrap 5 新手教學實戰營
* [第二堂直播: Bootstrap 5 新手教學實戰營 - 格線系統 (上) youtube](https://www.youtube.com/watch?v=mSp2csrvYhk&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=3)
* [第二堂直播: Bootstrap 5 新手教學實戰營 - 格線系統 (下) youtube](https://www.youtube.com/watch?v=amFRxhvGgFA&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=4)
* [第二堂講義](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FvSsfp1afRh-FBILRJtYt0Q)

## 格線系統 (10:16)
* [960 grid](https://960.gs/demo.html)

1.傳統寫法: 遇到相同寬度的設定，無限加上不同class

.header,.content,.footer,......{
 width:940px;
}

2.格線系統優化：解決重複class或重複設定的問題，把常用的另外命名做套用

<header class="col-12"> </header>

.col-12{
 width:940px;
}

3.格線系統三劍客 .container、.row、.column
* [BS4工具 layoutit](https://www.layoutit.com/build)
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面只能是 .col-
* 名言 3：網頁內容與元件請放在 .col- 裡面

## 常見錯誤與觀念
1: 不需要用兩個row，工程師還要幫你加一行row 且需算單數還雙數(35:34)

<!--不需要用兩個row-->
<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
  </div>
  <div class="row">
     <div class="col-6"></div>
  </div>
</div>

<!--正確寫法 超出範圍會自動往下排-->
<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>   
  </div> 
</div>

2: 不需多一層div，div預設沒有display:felx效果 所以會從上往下排(40:12)

<!--多一層div-->
<div class="container">      
  <div class="row">
    <div> 
        <div class="col-6">內容1</div>
        <div class="col-6">內容2</div>
        <div class="col-6">內容3</div>
    </div>     
  </div>
</div>

3: 在 .col 增加寬度，已使用格線系統不需要再加上寬度
格線系統加起來是100% col這層左右不需再加 margin 與 padding，
上下的 margin 與 padding不影響可以加

<!--已使用格線系統不需要加上寬度-->
<div class="container">      
  <div class="row">
    <div> 
        <div class="col-6 pink w80">內容1</div>
        <div class="col-6 pink">內容2</div>
        <div class="col-6 pink">內容3</div>
    </div>     
  </div>
</div>

4：最外層至少補一個 container
row外層若無設定 container 會以滿版方式排版，加上container 最大寬限制在max-width:1140px，讓內容水平置中。
另外如果只有寫col 不寫後面數字，內容會自適應寬度，照比例分配。

<div class="container">      
  <div class="row">
     <div class="col pink">內容1</div>
     <div class="col pink">內容2</div>
     <div class="col pink">內容3</div>
  </div>
</div>

5: 正確範例
.col- 的外層只能是 .row
.row 裡面只能是 .col-
網頁內容與元件請放在 .col- 裡面

<div class="container">
  <div class="row">
    <div class="col-6">
      <h2>標題</h2>
    </div>
    <div class="col-6">
      <h2>標題</h2>
    </div>
    <div class="col-6">
      <h2>標題</h2>
    </div>
  </div>
</div>

## BS5 格線斷點設計
[文件](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#grid-options)

## 格線系統與元件整合
容器不會跟元件混用
container、row、col是容器

/*錯誤範例:容器跟元件混用*/
.col-12,.btn-primary{
     width: 120px;
     height: 300px
     background: #000;
}

/*正確方式*/
.col-12{
    width:100%;
}
.btn-primary{
     width: 120px;
     height: 300px
     background: #000;
}

## 範例: 格線系統+通用類別搭配:
* 判斷是否使用格線系統，可看設計稿有沒有在格線系統上，若無則不需使用，如下圖SEARCH就不用

* [IT 邦幫忙](https://ithelp.ithome.com.tw/) - 手機版時隱藏右側內容，d-none d-lg-block


* [六角學院](https://www.hexschool.com/) - 選單變動性高，字數不一定，所以不用col，通常用nav
* [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
* [Bootstrap Template](https://bootstrapmade.com/bootstrap-4-templates/) - 使用格線系統

* 格線系統裡面可以在加格線

<div class="container">      
  <div class="row">
    <div class="col-3">
        <h2>選單</h2>
    </div>
    <div class="col-9">
       <div class="row">
         <div class="col-6"></div>
         <div class="col-6"></div>
         <div class="col-6"></div>
       </div>
    </div>
</div>

* 補充:
了解背後原理不用擔心框架一直更新
bs5產生器 自訂開發環境
排版float inline flexbox grid