# Bootstrap5 - 基本功能與排版
###### tags: `bootstrap` `程式` `筆記` `排版`

## 前言
Bootstrap 身為全球最流行的前端開發工具，沒用過也有要聽過!
本篇介紹最基本的安裝與常常被忽略卻又非常重要排版功能

## install
### npm 安裝
- 直接在專案內的cmd用npm指令安裝

npm install bootstrap

// 在專案中匯入下列其中一個即可使用
import 'bootstrap/dist/css/bootstrap.min.css';
const bootstrap = require('bootstrap')

### cdn 安裝
- CDN 就是透過API來將別人伺服器上的檔案引入到自己的專案中使用的方法
- 如果只需要用到css或是js的功能，直接將下方程式碼貼在html檔案中

<!-- CSS only 放在head裡面-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper 放在body裡面 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

## box
就像是PS有許多圖層一樣，網頁也是由好幾個方塊堆疊組合而成
但是當我們使用html的標籤時`<div></div> <p></p>`預設的寬度會是最寬也就是說會一直換行
:thinking_face: 但如果我們想要在同一行上有多的區塊該怎麼做呢? 當然就需要使用排版的元件了!

<div>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
//網頁顯示
123
123
123


## 排版通用方式
bootstrap提供許多不同的排版或對齊的方式，都可以達到相同的效果，可依個人喜好做選擇，沒有絕對答案!

### Grid
網格系統是最常用的排版系統之一，是一種二為布局的方式，一行被切成12個col，如果沒有特別設定像下圖一樣只有寫col，那麼會平均分配

#### Columns
bootstrap中 常用的col就是網格系統的一種實作，網格的層次結構從 container -> row ->column - >content。

- 垂直對齊 : align-item-start, align-item-center, align-item-end
- 水平對其 : justify-item-start, justify-item-center, justify-item-end

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

#### RWD
使用者除了使用電腦打開網頁之外，也會使用手機開啟網頁，這時面對不同大小的螢幕，去調整頁面就變得非常重要而bootstrap中有非常方便的方式可以讓我們撰寫響應式的網頁



- 前面有提到一行被切成12個col，col-sm-3代表，當螢幕寬度大於sm尺寸(576px)的時候每個div佔3個col的寬度，當螢幕尺吋小於sm的時候才會佔6個col的寬度
- 我們常用的斷點尺寸為sm: 576px, md: 768px, lg: 992px

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

### flex
第二種常用的工具就是flex，是一維的布局系統，適合做局部的排版

在css的display底下，所以要使用相關功能前，一定要先在class中宣告==d-flex==, 再改變內文屬性，下方介紹一些常用的flex容器變化
- flex-row

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

- flex-direction
- flex-wrap：超過父容器時就換行
- flex-flow：垂直排列、由下至上（flex-direction 與 flex-wrap 的縮寫）
- justify-content:水平位置＆對齊

- align-items：垂至位置＆對齊
- align-content：垂至位置＆對齊

### Position
對於指定位置也非常方便不過不能用在響應式網頁，故通常會用在比較小的地方或是固定footer, navbar等等
- static (靜態定位)：將其他定位特性取消，回到最原始的狀態（較少用
- relative (相對定位)： 可搭配top 、 right 、 bottom 、 left排版
- fixed (固定定位)：產生一個自己的新塗層並固定在==視窗==的特定點
- 滾動視窗的時候fixed的物件會一直在
- absolute (絕對定位)：產生一個自己的新圖層並固定在==網頁==的特定點
- 滾動視窗時absolute會不見
- sticky (黏貼定位)：結合了 relative 與 fixed 兩大特性，滾動完可以判斷top並自動消失


<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

### [Z-index](https://toruskit.com/docs/utilities/z-index/)

就像圖層的概念一樣，數值越大越上面，通常搭配position使用

<div class="box"><h3>box</h3>
  <div class="div1 position-absolute z-index-1">div1</div>
  <div class="div2 osition-absolute z-index-2">div2</div>
  <div class="div3 osition-absolute z-index-3">div3</div>
</div>

## 參考資料
[一文搞懂grid布局 和 flex 布局及其区别](https://juejin.cn/post/6940627375537258527)
[新手也會懂的Bootstrap container 與 flex grid system](https://ithelp.ithome.com.tw/articles/10240824)
[Bootstrap 5 Document](https://getbootstrap.com/docs/5.0/getting-started/introduction/)