<style>
html, body, .ui-content {
background-color: #333;
color: #ddd;
}
body > .ui-infobar {
display: none;
}
.ui-view-area > .ui-infobar {
display: block;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #ddd;
}
.markdown-body h1,
.markdown-body h2 {
border-bottom-color: #ffffff69;
}
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #fff;
}
.markdown-body img {
background-color: transparent;
}
.ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a {
color: white;
border-left: 2px solid white;
}
.expand-toggle:hover,
.expand-toggle:focus,
.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus {
color: white;
}
.ui-toc-dropdown {
background-color: #333;
}
.ui-toc-label.btn {
background-color: #191919;
color: white;
}
.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: white;
border-left: 1px solid white;
}
.markdown-body blockquote {
color: #bcbcbc;
}
.markdown-body table tr {
background-color: #5f5f5f;
}
.markdown-body table tr:nth-child(2n) {
background-color: #4f4f4f;
}
.markdown-body code,
.markdown-body tt {
color: #eee;
background-color: rgba(230, 230, 230, 0.36);
}
a,
.open-files-container li.selected a {
color: #5EB7E0;
}
</style>
# Bootstrap 教學
我們已經學會 HTML 和 CSS 了，但是要大家從零開始寫出一個網頁外觀其實滿辛苦且費時的。
框架 (Framework) 是集合了前人花了數年時間和精力所產生出來的一種工具，它能夠讓開發者在編寫程式時輕鬆許多。今天要介紹的 Bootstrap 就是 CSS 的其中一種框架。
乍聽之下，框架似乎是個神器，但其實也是有缺點所在。優點大家應該都知道了，就是讓開發更簡單，以下舉出幾個缺點：
1. 需要遵循它的規則
2. 出現 bug 會很麻煩
3. 不懂真正的運作原理
:::success
**延伸閱讀：**
:book: ：[Design: #noFramework](https://javarome.medium.com/design-noframework-bbc00a02d9b3)
:book: ：[中文翻譯版](https://kknews.cc/code/j3a2v5q.html)
:::
---
## Bootstrap 簡介
Bootstrap 是最常見的 CSS 框架，它幫我們設計好各種物件的樣式，讓我們可以直接套用，不需要自己寫 CSS。它還有強大的「網格系統」，讓我們可以輕鬆的排版。當然，響應式設計也是有的，它會根據視窗尺寸的不同而自行調整大小，是個非常實用的工具。
以下為幾個 Bootstrap 官方提供的範例：
* 表單
* 部落格
* 後台數據管理介面
## 開始使用 [Bootstrap](https://getbootstrap.com/)
要使用 Bootstrap 非常簡單，只要在 html 的 `<head>` 裡面加上一行程式碼：
```htmlembedded=
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
```
如果想要使用動態的功能（下拉式選單等等），還需要在 `<body>` 的最後加上這一行：
```htmlembedded=
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
```
像這樣：
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
```
接下來，我們可以到 [Bootstrap 的官網](https://getbootstrap.com/docs/5.1/components/buttons/) 上尋找我們想要用的物件 (Component)，先以按鈕為例。
:::info
⒈ 可於畫面左側尋找想用的物件 (Component)，Button 是其中之一。
⒉ Examples 會告訴你這個物件最基本的長相及 html 的寫法。
:::
假如我要一個黃色的「警告」按鈕，只要在它提供的程式碼中找到相對應的那一行，直接複製到你的 html 裡，並更改文字內容。
像這樣：
這時候你的網頁就會冒出一個黃色按鈕，上面寫著「警告」 👇
再舉一個例子，假如我要一個下拉式選單：
**step1.** 在左側找到下拉式選單 (Dropdowns)
**step2.** 找到他的 Examples
**step3.** 複製程式碼並貼到 html 裡
**step4.** 大功告成！
---
使用 Bootstrap 能大幅減少我們編寫程式的時間，但是它到底是怎麼做到的呢？
## Bootstrap 運作原理
剛剛我們複製了一大堆程式碼，不知道眼尖的你有沒有發現，它在 class 裡面放了一堆看不懂的東西，這些東西就是關鍵。
:::info
**回顧：**
在 CSS 中，可以用 html 標籤名稱和 id、class 屬性來設定元素的樣式，範例如下：
:::
其實 Bootstrap 也是用相同的方式達成目的的。
我們回頭看最一開始的黃色按鈕：
```htmlembedded=
<button type="button" class="btn btn-warning">警告</button>
```
這個按鈕擁有兩個 class ， `btn` 和 `btn-warning`，Bootstrap 已經幫我們定義好這兩個 class 的樣式了，所以我們只要引入它們寫好的 CSS 就可以直接使用（也就是一開始要大家複製到 `<head>` 的那一行程式碼）
以下為 Bootstrap `btn-warning` 的 CSS 片段 (看不懂沒關係)：
```css=
.btn-warning {
color: #000;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-warning:hover {
color: #000;
background-color: #ffca2c;
border-color: #ffc720;
}
.btn-check:focus + .btn-warning,
.btn-warning:focus {
color: #000;
background-color: #ffca2c;
border-color: #ffc720;
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-check:active + .btn-warning,
.btn-check:checked + .btn-warning,
.btn-warning.active,
.btn-warning:active,
.show > .btn-warning.dropdown-toggle {
color: #000;
background-color: #ffcd39;
border-color: #ffc720;
}
.btn-check:active + .btn-warning:focus,
.btn-check:checked + .btn-warning:focus,
.btn-warning.active:focus,
.btn-warning:active:focus,
.show > .btn-warning.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-warning.disabled,
.btn-warning:disabled {
color: #000;
background-color: #ffc107;
border-color: #ffc107;
}
```
~~又臭又長的應該不會有人想要自己寫吧~~
光是一個按鈕就要寫這麼多行，所以說 Bootstrap 確實幫我們省下很多時間呢！
## 覆寫 Bootstrap 的樣式
既然 Bootstrap 也是用 CSS 寫的，這也代表我們可以更改它預設的設定，或是新增它原本沒有的設定。一樣以「警告」按鈕為例。
```htmlembedded=
<button type="button" class="btn btn-warning">警告</button>
````
我覺得他的顏色不好看，想要淺一點，我還想要讓按鈕大一點，我們可以這樣做：
**step1.** 自己建立一個 CSS 檔，並引入 html
**step2.** 像平常寫 CSS 一樣，設定 class name 叫 `btn-warning` 的樣式
**step3.** 大功告成！
---
以上是 Bootstrap 簡單的介紹及用法，相信大家現在都有基本的概念了，接下來將會帶大家使用 Bootstrap 製作一個專屬的個人頁面。
---
**[上一篇：JavaScript 基礎與 DOM 操作](https://hackmd.io/eV0s2oonTxyLDOBXiLQLLw?both)**
Sign in with Wallet
Connect another wallet