Bootstrap 筆記
===
###### tags: `web` `frontend` `UI` `RWD` `library`
[官方](http://getbootstrap.com/)
[中文翻譯](http://bootstrap.hexschool.com/)
## 大致步驟
### 順序
快速開始 > 內容、元件 > 排版 > 通用類別(額外調整)
## 快速開始
:::info
記得 JS 要放在 body 中最下面，讓頁面先渲染出來
:::
```htmlmixed=
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
```
## 實作範例
該如何做出這樣的頁面呢?
首先分析裡面的內容和元件有 Navbar、Card，再到 Bootstrap 網頁中找到對應的程式碼
**Navbar**
```htmlmixed=
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
```
**Card**
```htmlmixed=
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary p-3 text-center">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
```
找到之後就直接加入，但是此時畫面長這樣，明顯需要把 Navbar 下方的 Card 進行排版
因此把 Card 包到 container 中，畫面明顯好看許多
```htmlmixed=
<div class="container">
...
</div>
```
但是 Card 與上方 Navbar 過近，需要有一些距離，可以到通用類別中找到如何調整間隔。
這裡選擇增加 margin top
```htmlmixed=
<div class="container mt-3">
...
</div>
```
大功告成
:::success
測試用圖片可以到 http://lorempixel.com/ 快速產生自訂假圖
EX:
http://lorempixel.com/400/200/cats/1
http://lorempixel.com/400/200/cats/2
:::
## 重置排版
Bootstrap 4 預設採用
1. border-box
2. 字體
但是在 Windows 上，會出現英文是明體字、中文是黑體的問題，所以可以手動加入微軟正黑體(用英文確保兼容所有瀏覽器)。
```css=
font-family:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
system-ui,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Microsoft JhengHei", "Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif;
```
## 文字排版
[看更多](http://bootstrap.hexschool.com/docs/4.0/content/typography/)
### 標題
```htmlmixed=
<!-- h1~h6 -->
<h1>我是具有語意的H1</h1>
<p class="h1">我只是長得像H1,並沒有語意</p>
<!-- 1~4 -->
<div class="display-1">H1不夠大? 我更大</div>
```
### 行內文本元素
<code>我是程式碼</code>
```htmlmixed=
<code>我是程式碼</code>
```
<p>拉拉拉拉拉 <mark>highlight</mark> 拉拉拉拉拉拉</p>
```htmlmixed=
<mark>highlight</mark>
```
<p><del>刪除的內容</del></p>
```htmlmixed=
<del>刪除的內容</del>
```
<p><s>不確定內容</s></p>
```htmlmixed=
<s>不確定內容</s>
```
<p><ins>引用文字</ins></p>
```htmlmixed=
<ins>引用文字</ins>
```
<p><u>底線</u></p>
```htmlmixed=
<u>底線</u>
```
<p><small>較小字體</small></p>
```htmlmixed=
<small>較小字體</small>
```
<p><strong>變為粗體及增強語意</strong></p>
```htmlmixed=
<strong>變為粗體及增強語意</strong>
```
<p><em>斜體</em></p>
```htmlmixed=
<em>斜體</em>
```
### 擴增內容
當游標移動到文字上面時，會出現更詳細的說明文字，``initialism`` 可以讓說明文字稍微小一點。
```htmlmixed=
<p><abbr title="是一種標籤語言">HTML</abbr></p>
<p><abbr title="能夠調整元素外觀" class="initialism">CSS</abbr></p>
```
### 引用來源
```htmlmixed=
<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>
```
### 描述型列表對齊
```htmlmixed=
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
```
### 清單
取消預設黑點、數字
```htmlmixed=
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
</ul>
```
子項目橫排成一行
```htmlmixed=
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
```
## 圖片
[看更多](http://bootstrap.hexschool.com/docs/4.0/content/images/)
### 響應式
RWD 中，會把圖片最大寬度設為100%，以及高度設為自動，在這邊可以直接使用 ``img-fluid``，很好用，記得加上。
```htmlmixed=
<img src="..." class="img-fluid">
```
### 邊框
讓圖片週圍有 padding 以及 border
```htmlmixed=
<img src="..." class="img-thumbnail">
```
### 圓角
```htmlmixed=
<img src="..." class="rounded">
```
### 對齊
1. float (記得 clearfix)
```htmlmixed=
<div class="clearfix">
<img src="..." class="float-left">
<img src="..." class="float-right">
</div>
```
2. 原生 css 作法(圖片轉 block 後，左右 margin auto)
```htmlmixed=
<img src="..." class="mx-auto d-block">
```
3. 文字對齊方式
```htmlmixed=
<div class="text-center">
<img src="...">
</div>
```
### 圖片說明文字
使用內建的 ``.figure`` 、 ``figure-img`` 和 ``.figure-caption`` 類別，設定 HTML5 ``<figure>`` 和 ``<figcaption>`` 的底線樣式。
圖片沒有明確指定尺寸，因此請務必在 ``<img>`` 標籤加入 ``.img-fluid`` 設定圖片為響應式。
```htmlmixed=
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
```
## 表格
[看更多](http://bootstrap.hexschool.com/docs/4.0/content/tables/)
### 基本結構
將 ``<table> `` 加入 ``.table`` 即可套用設定好的樣式
這邊的 ``<thead>`` ``<tbody>`` 寫法為更嚴謹的結構，而 ``scope`` 表示此 ``<th>`` 所表示的範圍
```htmlmixed=
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
```
### 反轉色彩
```htmlmixed=
<table class="table table-inverse">
```
### 只對 thead 變色
```htmlmixed=
<!-- 反轉色 -->
<thead class="thead-inverse">
<!-- 淺灰色 -->
<thead class="thead-default">
```
### 斑馬條紋
```htmlmixed=
<table class="table table-striped">
```
### 框線
```htmlmixed=
<table class="table table-bordered">
```
### Hover
滑鼠移動到 row 上面時，顏色變深
```htmlmixed=
<table class="table table-hover">
```
### 語意顏色
可針對某行(row)或某格(td)
```htmlmixed=
<tr class="table-primary">
<td class="table-success">
```
:::warning
反轉色(table-inverse)表格沒有預設語意顏色，只能用背景顏色方式實作
``<tr class="bg-primary">``
:::
### 響應式
讓表格在（小於768px）小設備上水平滾動。當在寬度大於 768px 的任何設備上觀看時，不會看見任何差異。
```htmlmixed=
<table class="table table-responsive">
```
## 網格系統
[看更多](http://bootstrap.hexschool.com/docs/4.0/layout/grid/)
### container
:::danger
記得把想要限制最大寬度的所有內容都要包在 container 中
:::
``container-fluid`` 會讓寬度自動適應裝置大小，而 ``container`` 則會在各寬度設有最大值。
Ex: 裝置最大寬度為768px，則 container 大小會設定為720px。
:::info
不是說自動適應裝置寬度就是最好，像是螢幕很寬時，但是內容沒那麼多，還是會自適應為滿版，整個頁面會很奇怪，所以要看情況使用。
:::
:::success
另外 ``container-fluid``，會自適應寬度，換句話說如果內容超過 100%，可以使用它來確保剛好滿版。
:::
### 說明
欄和欄之間的空白(間隔)，是藉由替每欄加上左右 padding 實現的。
而最左及最右邊的 padding 則透過 row 來設定負的 margin 來消除。
:::info
Hint:
Bootstrap 將畫面分割為 12 等份，可以選擇8+4、4+4+4、6+6...等等。
Ex: col-*
col 也可以不指定大小，每欄皆等寬
Ex: col
:::
### 架構
```htmlmixed=
<div class="container">
<div class="row">
<div class="col-6">
content1
</div>
</div>
<div class="row">
<div class="col-6">
content2
</div>
</div>
</div>
```
### 中斷點
Bootstrap 的網格包含五個等級來建立不同的響應式排版。在極小、小、中、大、或極大設備上定制欄的大小來建立符合你需求的尺寸。
透過以下表格看 Bootstrap 如何在不同的裝置上運作
:::info
簡單來說，欄位比例會先尋找並套用最大的中斷點設定值，若是當螢幕寬度低於當前設定中斷點寬度，將會自動改為套用小一級的中斷點設定值，若是沒有則每一欄皆獨佔一列。
反過來說，如果希望在任何裝置上皆是設定好的比例，則直接套用最小尺寸中斷點 ``.col-``，因為不會有小於它的中斷點來覆蓋設定值了。
:::
### 架構
```htmlmixed=
<!-- 大於768px尺寸為8:4，小於則第一欄獨佔一列，另一欄佔50% -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 大於768px尺寸為4:4:4，小於則第一列有兩欄6:6，第三欄則到第二列佔50% -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 因為不會有更小的尺寸，所以在任何裝置上皆為6:6 -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
```
### 超出欄位
一列中的欄位最多所佔等份為12，若是超過則自動換到下一列。
### 推移欄位
透過 v4 的 flexbox，我們不在使用 v3 的推移樣式 class，取而代之的是間隔通用類別，像是 ``.mr-auto`` 來使元件左右物件遠離。
```htmlmixed=
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
```
### 巢狀
```htmlmixed=
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
```
## Flex
Bootstrap 4開始使用 flex 屬性來進行排版，而不是之前的 float。
可以參考之前寫的[筆記](https://hackmd.io/CwQwzAjAJg7BCsBaAHAYzAJkaAnBRARlAGYHbw7AYCmydADGMEA=?view)
### 重點整理
## Bootstrap 中的 Flex
[看更多](http://bootstrap.hexschool.com/docs/4.0/utilities/flex/)
:::info
Bootstrap 4 通過 flexbox 建立，但並不是每一個元素的 display 都已經改變為 display: flex，因為這可能增加很多不必要的覆蓋。但是大部分的元件都是用 flexbox 建立。
:::
### 可套用的 class 屬性
上面講到的 row，預設為 ``display: flex``，可以直接使用指定屬性排版。
而且也可以設定中斷點(sm、md、lg...)
EX: 想要在電腦版是靠右對齊，手機板恢復靠左，只需要加上中斷點 sm 即可，讓 flex 效果僅在大於 sm 之裝置奏效。
:::warning
需要注意的是 row 預設開啟 wrap 自動換行，若是用 ``<div class="d-flex">``，則不會自動換行。
還有常常會忘記的是套上 ``d-flex``，就會把內元素水平排列囉，而不是還需要其他屬性。像是 ``row`` 中的 ``col`` 是 ``div`` 卻能水平排列。
:::
### 範例
### 垂直置中對齊
```htmlmixed=
<div class="container">
<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>
```
### 元素各自對齊
```htmlmixed=
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
```
### 水平對齊
```htmlmixed=
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
```
### 不換行
```htmlmixed=
<div class="d-flex flex-nowrap">
...
</div>
```
### 排序
```htmlmixed=
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>
```
### 多行置中
:::danger
記得 align-content 要在有啟用 flex-wrap 的情況下才會發生作用!
:::
```htmlmixed=
<div class="d-flex align-content-center flex-wrap">...</div>
```
### 搭配 margin
```htmlmixed=
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex justify-content-start">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
```
## 網格系統排版練習
### 相簿排版
```css=
.box {
height: 300px;
background-color: #ccc;
}
.bg-cover {
background-size: cover;
background-position: center;
}
```
```htmlmixed=
<!-- 加上 fluid 為了達到滿版效果 -->
<div class="container-fluid">
<div class="row">
<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=)"></div>
<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1490921045028-16ab0b47b757?dpr=2&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=)"></div>
<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1493585552824-131927c85da2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)"></div>
</div>
<div class="row" style="height: 100vh">
<div class="col-8 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=)"></div>
<!-- 因為 col 會左右預留 padding，若不取消則會有白邊 -->
<div class="col-4 d-flex flex-column px-0">
<div class="h-50 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1502472584811-0a2f2feb8968?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=)"></div>
<div class="h-50 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1496347646636-ea47f7d6b37b?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=)"></div>
</div>
</div>
</div>
```
## 通用類別
[看更多](http://bootstrap.hexschool.com/docs/4.0/utilities/)
### 間隔 Spacing
有 margin、padding 兩種
用法為:
```htmlmixed=
{property}{sides}-{breakpoint}-{size}
<div class="mr-3></div>
```
#### property
- m： 設定 margin
- p： 設定 padding
#### sides
- t： 設定 margin-top 或 padding-top
- b： 設定 margin-bottom 或 padding-bottom
- l： 設定 margin-left 或 padding-left
- r： 設定 margin-right 或 padding-right
- x： 設定 *-left 和 *-right
- y： 設定 *-top 和 *-bottom
- 沒有填寫: 設定 margin 或 padding 在元素的四個邊緣
#### size
:::info
$spacer = 1rem = 16px
:::
- auto： 自動配置間隔
- 0： 設定 margin 或 padding 的樣式值為 0
- 1： 設定 margin 或 padding 於 $spacer * .25
- 2： 設定 margin 或 padding 於 $spacer * .5
- 3： 設定 margin 或 padding 於 $spacer
- 4： 設定 margin 或 padding 於 $spacer * 1.5
- 5： 設定 margin 或 padding 於 $spacer * 3
#### 補充
:::success
除了使用 flex 排版(定位)，也別忘了可以使用 auto 來排版喔!
ex: NavBar 中兩元素各自位在最左最右邊，可以在最左邊的元素加上 ``mr-auto`` 即可。
:::
### border
```htmlmixed=
<!-- 淺色線條 -->
<span class="border"></span>
<!-- 無邊框 -->
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
```
#### 顏色
```htmlmixed=
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
```
#### 圓角 radius
```htmlmixed=
<!-- 小幅度圓角 -->
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<!-- 若是元素本身有圓角，可以取消掉 -->
<img src="..." alt="..." class="rounded-0">
```
### clearfix
下面的例子顯示了如何使用清除浮動。不使用清除浮動，外層 div 將不會包覆按鈕而導致跑版
```htmlmixed=
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
```
### close icon
:::info
確保為螢幕閱讀器添加文字(讓有閱讀障礙者也能順利閱讀網頁)，使用 aria-label 標籤屬性。
:::
```htmlmixed=
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
```
### color
#### 文字、連結
```htmlmixed=
<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><a href="#" class="text-warning">.text-warning</a></p>
<p><a href="#" class="text-info">.text-info</a></p>
<p><a href="#" class="text-light bg-gray">.text-light</a></p>
<p><a href="#" class="text-dark">.text-dark</a></p>
```
#### 背景
```htmlmixed=
<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-white">.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-gray-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-gray-dark">.bg-white</div>
```
### display
可用類別(也可加上中斷點)
- .d-none
- .d-inline
- .d-inline-block
- .d-block
- .d-table
- .d-table-cell
- .d-flex
- .d-inline-flex
```htmlmixed=
<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-success">d-inline</div>
```
```htmlmixed=
<span class="d-block bg-primary">d-block</span>
```
```htmlmixed=
<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>
```
### embeds
在任何比例的裝置上建立內嵌的響應式影片或簡報，使其有固定的縮放比例(``<iframe>``、``<video>`` RWD 化)。
```htmlmixed=
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
```
:::info
也有其他比例可以使用 21by9、16by9、4by3、1by1
:::
### float
```htmlmixed=
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
```
#### 也可以加上中斷點
```htmlmixed=
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
```
### 文字隱藏
除了單純隱藏文字，也可以將 Logo 變成圖片，但又維持標籤的親和性及 SEO。
```htmlmixed=
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
```
### position
#### 定位屬性
快速增加定位 Class，雖然這些不包含響應式。
```htmlmixed=
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
```
#### 固定在頂部、底部
不需要再添加 ``position-fixed``
```htmlmixed=
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
```
#### 貼齊於頂部
好用！可用來做固定 Navbar
:::danger
Microsoft Edge 與 IE11 呈現 position: sticky 是使用 position: relative。
:::
```htmlmixed=
<div class="sticky-top">...</div>
```
### size
#### width
```htmlmixed=
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
```
#### height
```htmlmixed=
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
```
#### max
``max-width`` = ``mw``、``max-height`` = ``mh``
```htmlmixed=
<img class="mw-100" src="..." alt="Max-width 100%">
```
寬度大於父元素，但是設定 mh，所以不會超出父元素
```htmlmixed=
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
```
### 文字
#### 對齊
可能對中文字沒效
```htmlmixed=
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
```
#### 位置
```htmlmixed=
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
```
#### 不換行
```htmlmixed=
<div class="box text-nowrap">...</div>
```
#### 超出部分裁切
:::warning
需要使用 display: inline-block or display: block。
:::
```htmlmixed=
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
```
#### 大小寫轉換
```htmlmixed=
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<!-- 僅每個字母首字大寫 -->
<p class="text-capitalize">CapiTaliZed text.</p>
```
#### 粗體、斜體
```htmlmixed=
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
```
### visibility
隱藏元素，但不會影響物件的實際空間(不會改變 display 值)
```htmlmixed=
<!-- 顯示 -->
<div class="visible">...</div>
<!-- 隱藏 -->
<div class="invisible">...</div>
```
## 元件
### 輪播
```htmlmixed=
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
```
#### 圖片高度問題
圖片輪播需要注意的問題是圖片的高度，若是高度過大，想要調小時，如果直接在 img 中或是 carousel-item 中限制 height，是可以達到目的，但很可能會有圖片變形、位置不精確、外框顯示問題...等等。
可行的解決方法是由 carousel-item 限制高度，並把圖片使用背景圖片的方式加入，然後再調整圖片位置。
```htmlmixed=
<div class="carousel-item my-carousel-item bg-cover" style="background-image: url(img/xxx.jpg)" ></div>
```
```css=
.my-carousel-item {
height: 450px;
}
.bg-cover {
background-size: cover;
background-position: center center;
}
```
#### 圖片說明文字
```htmlmixed=
<div class="carousel-caption d-none d-md-block">
<h3>...</h3>
<p>...</p>
</div>
```
若是有加入說明文字，可能會因為背景圖片的顏色，而使文字不清楚，此時可以替說明文字加上背景顏色。
此處是加上黑色，並設置透明度為 0.6
```css=
.carousel-caption {
background-color: rgba(0, 0, 0, 0.6);
}
```
示意圖
<style>
.ui-infobar { display: none; }
</style>
Sign in with Wallet
Connect another wallet