Bootstrap 自學筆記
===

進入網頁 [Bootstrap](https://getbootstrap.com/)

## Getting Started
進入 [Getting Started](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
新增 index.html

加入 head

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

integrity 是用來辨識 bootstrap.min.css 是否正確
crossorigin 跟跨網域有關（安全性措施）

js 加入 body 最後

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

jQuery 降版 避免版本差異執行出問題
上面用到 js jquery-3.5.1.slim.min.js 的 3.5.1 slim 版本換成 minified 版本（壓縮過的）
進入 [jQuery](https://jquery.com/) 點 Download
在 Using jQuery with a CDN 點 visit https://code.jquery.com
點 3.5.1 minified 版本

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Show components requiring JavaScript 有說明為什麼需要 js
例如：Alerts 消失等等

Starter template 這個可以直接複製到 index.html 上面就不用做了
裡面跟剛剛講的多了一個步驟

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

多一個htmlmixed=

shrink-to-fit=no

Bootstrap 預設會把 Box-sizing 的 content-box 改成 border-box
可能會影響到其他套件
需要時可以用 css 檔覆寫

.selector-for-some-widget {
  box-sizing: content-box;
}

Reboot
在不同的瀏覽器預設的 tag 有可能會不同 會放一個 css 檔都設成相同的

到這邊 Getting Started 結束了

點選左邊的 Components -> Dropdowns
語法來測試一下 Bootstrap

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

## Container
現在開始使用 Bootstrap 的元件
點選左邊
[Layout](https://getbootstrap.com/docs/4.5/layout/overview/)
[Grid system](https://getbootstrap.com/docs/4.5/layout/grid/)
Container 用來限制寬度

<div class="container-fluid">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

* container 有空白
One of three columns 前面沒有空白 字體往右移

* container-fluid 沒有空白
One of three columns 前面沒空白 字體往左移

這邊介紹了 media 這邊稱做斷點
在設定的範圍尺寸
會覆寫我們指定的內容

Grid options 有表格介紹
.col-sm- （Small ≥576px）
.col-md- （Medium ≥768px）
等等
這個表很常用 可能要稍微記一下

.col-6 等於一半 因為 Bootstrap 預設切成 12 等分
所以 6 等於一半

還可以寫成 col-sm-6 col-md-7
這樣表示 sm 6 格 md 7 格

## 參考資料
[02. 安裝與開始使用Bootstrap4](https://www.youtube.com/watch?v=kax6QO6GP88)
[03. Container, 斷點, 與Grid system](https://www.youtube.com/watch?v=NqqEd6PRSMg)
[04. 巢狀 Grid System](https://www.youtube.com/watch?v=ckzIUqGrxw4)

[Bootstrap-元件中英對照 Quick Start](https://hackmd.io/@chiisen/BJC_6IgaL)

###### tags: `Bootstrap`