---
# System prepended metadata

title: Bootstrap 筆記
tags: [Bootstrap]

---

# Bootstrap 筆記

## 需求
### 必要組合 2 選 1
| 必要組合 1 | CDN |
| -- | -- |
| jquery.js | [link](https://code.jquery.com) |
| popper.js | [link](https://cdnjs.com/libraries/popper.js) |
| bootstrap.js | [link](https://www.bootstrapcdn.com) |
| bootstrap.css | 同上 |

| 必要組合 2 | CDN |
| -- | -- |
| jquery.js | [link](https://code.jquery.com) |
| bootstrap.bundle.js | [link](https://www.bootstrapcdn.com) |
| bootstrap.css | 同上 |

:::info
bootstrap.bundle.js 同時包含 bootstrap.js 和 popper.js
:::

---

## 載入

### 透過 html
以組合 2 為例, 使用最小化壓縮版本
```htmlmixed=
<body>
    <link rel="stylesheet" href="路徑/bootstrap.min.css" />
    <script src="路徑/jquery.min.js"></script>
    <script src="路徑/bootstrap.bundle.min.js"></script>
</body>
```

---
## TS 簡易使用範例
* 使用只顯示外框的按鈕樣式
    ```typescript
    let button = document.createElement("button");
    button.className = "btn btn-outline-primary";
    
    parentNode.appendChild(button);
    ```
    [參考文件](https://getbootstrap.com/docs/5.0/components/buttons/)

---
###### tags: `Bootstrap`