---
# System prepended metadata

title: Bootstrap 5筆記
tags: [Front-end, Bootstrap]

---

# Bootstrap 5筆記

## 目錄
> :::spoiler 清單
> [TOC]
> :::
---
## 介紹
Bootstrap：由HTML、CSS、JavaScript三件套撰寫的前端框架，有良好的RWD設計，現成的樣式跟套件可使用
## 使用方式
### CDN引用
> 訪問網站時經過bootstrap伺服器
> 會根據使用者所在地連到距離最近的主機
> 如果CDN Server掛掉就無法訪問網站
- 引用步驟
    1. CSS引用
        ```html
        <!-- 加入html <head> -->
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
          crossorigin="anonymous"
        />
        ```
    2. JavaScript引用
        ```javascript
        <!-- 加入js -->
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
          integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
          crossorigin="anonymous"
        ></script>
        ```
### 下載離線檔
> 可以修改code (但通常不需要)
> 完整下載檔案較大 (可以選擇壓縮版)
- 安裝步驟
    - 到官網下載最新版本
        > min為壓縮板，其他版本差異請看說明文件

        > 若使用Vue + Vite開發建議看這兩篇教學
        > [🔗link1](/@chinggo/rkyqvjGtd)、[🔗link2](/@chinggo/HJ0H8r4s_?utm_source=preview-mode&utm_medium=rec)

### CSS Reset 與重置
需要重置CSS設定的原因：
-   更新部分瀏覽器的預設值，在可變動的元件間距上使用 `rem` 替代 `em`。
-   避開使用 `margin-top`。垂直邊界的 margins 可能會重疊，進而產生不能預期的結果。更重要的是， 使用單向的 `margin` 是一個更單純的思考模式。
-   為了在跨裝置時能輕鬆縮放，區塊元素的 `margin` 應採用 `rem`。
-   盡可能使用 `inherit` ，將 `font` 相關屬性的宣告保持在最低需求

> 為避免不同瀏覽器預設css設定差異，建議先覆蓋掉不同瀏覽器有差異的設定

Bootstrap自動進行覆蓋後的設定：[🔗點此查看](https://bootstrap5.hexschool.com/docs/5.0/content/reboot/)


### Grid system (格線系統)
- container：格線系統最外層
- components：Bootstrap 提供的一些撰寫好樣式的互動式功能，通常放置在 col 內，除非該 div 未使用格線系統
- Utilities：通用類別可以讓格線系統在不同大小的裝置上，呈現不同的顯示方式
> column常見總數為12
- container
    - .container：固定寬度，每個breakpoint都設置1個max-width
    - .container-fiuld：滿版，每個breakpoint都為width: 100%
    > Grid system最外層至少要有1個 container


- .row
    > vscode會補全`<div class="rol"></div>`
    
    > `.rol`的下一層一定要是`.col`，否則會報錯

- .col-1 ~ 12
    > vscode會補全`<div class="col"></div>`
    
    > 用於劃分格子，盡量不要設定width、左右margin、padding
    > height跟上下margin、padding不影響
    
    > col-number 決定該col佔據的欄位寬度，e.g., col-2佔2欄寬，col-10佔10欄寬
    > 如果加總<=12在同一行，
    > 超過將會自動換行 
    ```
    <div class="row">
      <!-- 第1行 -->
      <div class="col-3 black">網頁內容</div>
      <div class="col-3 black">網頁內容</div>
      <div class="col-5 black">網頁內容</div>
    </div>
    ```
    ```
    <div class="row">
      <!-- 第1行 -->
      <div class="col-4 black">網頁內容</div>
      <div class="col-4 black">網頁內容</div>
      <div class="col-4 black">網頁內容</div>
    </div>
    ```
    ```
    <div class="row">
      <!-- 第1行 -->
      <div class="col-5 black">網頁內容</div>
      <div class="col-7 black">網頁內容</div>
      <!-- 第2行 -->
      <div class="col-4 black">網頁內容</div>
    </div>
    ```
    ```
    <div class="row">
      <!-- 第1行 -->
      <div class="col-4 black">網頁內容</div>
      <div class="col-5 black">網頁內容</div>
      <div class="col-2 black">網頁內容</div>
      <!-- 第2行 -->
      <div class="col-2 black">網頁內容</div>
    </div>
    ```
- breakpoint (斷點)
    可以直接在element class中加入以下參數
    | 型別 | 參數 | pixel |
    |---|---|---|
    | xs(預設) | .col- | < 576px |
    | sm | .col-sm- | >= 576px |
    | md | .col-md- | >= 768px |
    | lg | .col-lg- | >= 992px |
    | xl | .col-xl- | >= 1200px |
    | xxl | .col-xxl- | >= 1400px |
    > 更完整內容：[🔗link](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/)

    ```css
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
            <div class="col-12 col-md-4 col-lg-3">網頁內容</div>
        </div>
        <!--  < 576px時1行1個 -->
        <!-- >= 768px時1行3個 -->
        <!-- >= 992px時1行4個 -->
    </div>
    ```

### Display
> 一種Utilities，預設不受media query限制
-   `.d-{value}`： xs<br> 
    {value} list
    - none：隱藏
    - inline：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display)
    - inline-block：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display)
    - block：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display)
    - grid：[🔗grid](#Grid-system-格線系統)
    - table
        - table-cell
        - table-row
    - flex：[flexbox](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#RWD-Responsive-Web-Design)
    - inline-flex：[🔗與flexbox差異](https://ithelp.ithome.com.tw/articles/10238558)

    ```html
    // none
    <div class="d-none">This element will not be displayed</div>

    // inline
    <div class="d-inline">This is an inline element</div>

    // inline-block 
    <div class="d-inline-block">This is an inline-block element</div>

    // block 
    <div class="d-block">This is a block element</div>

    // grid
    <div class="d-grid">
      // <div>...</div>
    </div>

    // table
    <table class="d-table" style="width: 100%; border-collapse: collapse">
      <tr class="d-table-row">
        <td class="d-table-cell" style="border: 1px solid black">Table cell 1</td>
        <td class="d-table-cell" style="border: 1px solid black">Table cell 2</td>
        <td class="d-table-cell" style="border: 1px solid black">Table cell 3</td>
      </tr>
      <tr class="d-table-row">
        <td class="d-table-cell" style="border: 1px solid black">Table cell 4</td>
        <td class="d-table-cell" style="border: 1px solid black">Table cell 5</td>
        <td class="d-table-cell" style="border: 1px solid black">Table cell 6</td>
      </tr>
    </table>
    ```
    ```html
    // flex 
    <div
      class="d-flex"
      style="width: 100%; height: 100px; background-color: lightgrey"
    >
      <div style="flex-basis: 25%; background-color: red">Flex item 1</div>
      <div style="flex-basis: 25%; background-color: yellow">Flex item 2</div>
      <div style="flex-basis: 25%; background-color: blue">Flex item 3</div>
      <div style="flex-basis: 25%; background-color: green">Flex item 4</div>
    </div>
    ```
    ```html
    // inline-flex 
    <div
      class="d-inline-flex"
      style="width: 100%; height: 100px; background-color: lightgrey"
    >
      <div style="flex-basis: 25%; background-color: red">
        Inline Flex item 1
      </div>
      <div style="flex-basis: 25%; background-color: yellow">
        Inline Flex item 2
      </div>
      <div style="flex-basis: 25%; background-color: blue">
        Inline Flex item 3
      </div>
      <div style="flex-basis: 25%; background-color: green">
        Inline Flex item 4
      </div>
    </div>
    ```
-   `.d-{breakpoint}-{value}`：sm、 md、lg、xl、xxl
    > 電腦版以上隱藏div
    > `.d-lg-none `

    > xs設定隱藏，平板以上顯示div
    > `.d-none .d-md-blick`


### nested grid
```
<div class="container">
  <div class="row">
    <div class="col-4 black">選單</div>
    <div class="col 8">
      <div class="row">
        <div class="col-6 black">商品欄位</div>
        <div class="col-6 black">商品欄位</div>
        <div class="col-6 black">商品欄位</div>
      </div>
    </div>
  </div>
</div>
```
![](https://i.imgur.com/FGpS4lD.png)
               
---
###### tags: `Front-end` `Bootstrap`
