Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 12 節： CSS Frameworks: Bootstrap
###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021`
2022.07.05（Tue.）～2022.07.05（Tue.）
## ● 上課筆記
## 1. 載入Bootstrap
這裡是使用cdn的方法載入，先進到[官網](https://getbootstrap.com/docs/4.5/getting-started/introduction/)，然後找到[css的部份](https://getbootstrap.com/docs/4.5/getting-started/introduction/#css)，看到cdn：
```htmlembedded=
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
>
```
將以上這段引入我們的html檔中的`<head></head>`，記得放在我們的css檔之前，才不會把我們寫得css給蓋過去。
然後還會再找到[JS的separate部份](https://getbootstrap.com/docs/4.5/getting-started/introduction/#separate)，一共有三行程式碼：
```htmlembedded=
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
```
將以上內容引入到html檔中的`<body></body>`裡面，然後塞在`<body></body>`裡面的最下方。
## 2. Layout
### [Overview](https://getbootstrap.com/docs/4.5/layout/overview/)
A: [containers](https://getbootstrap.com/docs/4.5/layout/overview/#containers)
container是第一個要學的，也是最重要的。
```htmlembedded=
<div class="container">
<!-- Content here -->
</div>
```
可以發現擁有container這個屬性的元素具有「斷點」，他的斷點處如下圖：
B: [container-fluid](https://getbootstrap.com/docs/4.5/layout/overview/#fluid)
這是container的延伸概念。
使用`.container-fluid`的話，這個容器的寬度會延伸到跟viewport一樣寬。
C: [responsive](https://getbootstrap.com/docs/4.5/layout/overview/#responsive)
這裡分成了四種：
```htmlembedded=
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
```
以`container-sm`為例，他的作法就是該容器一直維持著100%的寬度，直到碰到small的斷點，容器寬度就會改變，至於怎麼改變（改變成怎樣的大小），可以參考（1）container底下的斷點圖。
****
:::danger
**以下是最最最最最重要的部份！**
:::
### [Grid](https://getbootstrap.com/docs/4.5/layout/grid/)
A: [How it works](https://getbootstrap.com/docs/4.5/layout/grid/#how-it-works)
* 我們每次要用grid時，要注意都要使用到`class="container"`，然後還會使用到`row`跟`column`來做布局（layout）。
* 在bootstrap裡面，每一列（row）都有12個空間單位。
* 接著要知道，我們需要創建行（column）在我們的row裡面。
* 從最簡單的示範開始理解：
```css=
<div class="container">
<h1 class="container display-1 text-center text-primary">The Grid System</h1>
<div class="row">
<div class="col-6 bg-success">I am 6 units!</div>
<div class="col-6 bg-info">I am 6 units!</div>
</div>
</div>
```
以上會有下面的效果，因為grid的排版方式，把row分成了12個單位，每個單位可以看作是1行，所以這裡各給col-6，就是把12行分成兩半：
* 如果直接給"col"，他會自動把12個單位去平分給col們。
* 可以container再包container，第二層container裡面的東西會有個margin，所以物件會再更往內推。
B: [Grid options](https://getbootstrap.com/docs/4.5/layout/grid/#grid-options)
可以在col上加上sm, md, lg, xl去做不同的斷點如下圖：
這邊放個範例：
```css=
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 bg-info">Lorem...</div>
<div class="col-md-6 col-lg-3 bg-danger">Lorem...</div>
<div class="col-md-6 col-lg-3 bg-success">Lorem...</div>
<div class="col-md-6 col-lg-3 bg-warning">Lorem...</div>
</div>
</div>
```
以上程式碼用了兩個斷點判斷，分別為md與lg。
當螢幕為large時：
當螢幕為middle時：
再更小時：
C: [No gutters](https://getbootstrap.com/docs/4.5/layout/grid/#no-gutters)
圖片之間會線縫隙如下圖：
把no-gutters加到父層上，就能使子層不會產生空隙如下圖：
他的css作用：
```css=
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
```
## 3. Component
### [buttons](https://getbootstrap.com/docs/4.5/components/buttons/)
A.寫法如下：
> 參考資料：[examples](https://getbootstrap.com/docs/4.5/components/buttons/#examples)
```htmlembedded=
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
```
可以發現在後方的primary, secondary, success, danger, ..., dark，都代表著不同的顏色，而且這項規則並不局限於button而已。
B.除此之外，`btn`這個屬性不只可以用在`<button></button>`裡面，也可以用在`<a></a>`、`<input>`上，例如以下範例，可以將不同的標籤變成各種按鈕樣式：
> 參考資料：[button tags](https://getbootstrap.com/docs/4.5/components/buttons/#button-tags)
```htmlembedded=
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
```
C.另外還有只有框線的按鈕樣式（框線顏色一樣可透過primary, secondary, success, danger, ..., dark來改變）
寫法如下，中間多加個outline即可：
>參考資料：[outline buttons](https://getbootstrap.com/docs/4.5/components/buttons/#outline-buttons)
```htmlembedded=
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
```
D.也可改變按鈕的大小
> 參考資料：[sizes](https://getbootstrap.com/docs/4.5/components/buttons/#sizes)
可以透過`.btn-lg`或`.btn-sm`來改變，如下：
```htmlembedded=
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
```
E.將按鈕變成無法使用的按鈕
> 參考資料：[disabled state](https://getbootstrap.com/docs/4.5/components/buttons/#disabled-state)
使用方法就是直接加上"disabled"，不用放在class裡面，disabled本身就是一種屬性：
```htmlembedded=
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
```
但要注意的是，如果現在我想在`<a></a>`上使用"disabled"時，會因為`<a></a>`沒有"disabled"這個屬性而無法使用，所以必須把disabled丟到class裡頭，才會有作用：
```htmlembedded=
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
```
****
### [Badges](https://getbootstrap.com/docs/4.5/components/badge/)
A. [Example](https://getbootstrap.com/docs/4.5/components/badge/#example)
產生一個小小的徽章造型，使用方法如下，先在class中加上badge後，在後面再加一次badge-（可接上primary, secondary, success, danger, ..., dark去改變顏色）。
```htmlembedded=
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
```
B. [pill badges](https://getbootstrap.com/docs/4.5/components/badge/#pill-badges)
加上`.badge-pill`即可產生像藥丸的小徽章：
```css=
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
```
****
### [Button group](https://getbootstrap.com/docs/4.5/components/button-group/)
A. [Basic example](https://getbootstrap.com/docs/4.5/components/button-group/#basic-example)
在div上下`.btn-group`，然後div裡面包裹想要群組起來的按鈕們：
```css=
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
```
### [Alerts](https://getbootstrap.com/docs/4.5/components/alerts/)
A. [Examples](https://getbootstrap.com/docs/4.5/components/alerts/#examples)
利用alert-（可接上primary, secondary, success, danger, …, dark去改變顏色）
```css=
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
```
## 4. Content
### [typography-排版](https://getbootstrap.com/docs/4.5/content/typography/)
A. [display heading](https://getbootstrap.com/docs/4.5/content/typography/#display-headings)
主要使用在header上，讓字體變得更大或更小：
```htmlembedded=
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
```
B. [Lead](https://getbootstrap.com/docs/4.5/content/typography/#lead)
官方文件說：「Make a paragraph stand out by adding `.lead.`」也就是指「用了.lead就可以使文章段落變得更顯目」。
（其實就是把font-size跟font-weight稍微增大了）
```htmlembedded=
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
```
C. [blockquote](https://getbootstrap.com/docs/4.5/content/typography/#blockquotes)
html中就有這樣的元素`<blockquote>`，這個元素用來定義一段文字屬於「引用」。
class="blockquote"會使font-szie變大，並且增加一個margin-bottom。
```htmlembedded=
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
```
D.[naming a source-引用來源](https://getbootstrap.com/docs/4.5/content/typography/#naming-a-source)
```htmlembedded=
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
```
以上程式碼會顯示如下：
E. [Alignment](https://getbootstrap.com/docs/4.5/content/typography/#alignment)
.text-center 字體靠中：
```htmlembedded=
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
```
.text-right 字體靠右：
```htmlembedded=
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
```
****
### [Images](https://getbootstrap.com/docs/4.5/content/images/)
A. [Responsive images](https://getbootstrap.com/docs/4.5/content/images/#responsive-images)
利用img-fluid，在同一列（row）的的height會是auto，去自動把不同的照片高度，變成相同高度。
```css=
<div class="container">
<div class="row">
<div class="col">
<img src="./image/1.jpg" alt="" class="img-fluid">
</div>
<div class="col">
<img src="./image/2.jpg" alt="" class="img-fluid">
</div>
<div class="col">
<img src="./image/3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
```
## 5. Utilities
### [Colors](https://getbootstrap.com/docs/4.5/utilities/colors/)
A. [Color](https://getbootstrap.com/docs/4.5/utilities/colors/)
改變字體顏色，.text-後方可以接上primary, secondary, success, danger, ..., dark去改變顏色。
```htmlembedded=
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
```
B. [Background color](https://getbootstrap.com/docs/4.5/utilities/colors/#background-color)
改變背景顏色，.bg-後面可以接上primary, secondary, success, danger, ..., dark去改變顏色。
```htmlembedded=
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
```
Sign in with Wallet
Connect another wallet