###### tags: `bootstrap`,`職訓`,`fontawsome`
# Bootstrap5 元件應用

<!-- ## [fontawsome](https://fontawesome.com/v5.15/icons?d=gallery&p=2) -->
<!-- 1. 引入cdn -->
<!-- * https://pro.fontawesome.com/releases/v5.10.0/css/all.css -->
<!-- 3. 加入相對應class名稱 -->
<!-- * https://pro.fontawesome.com/releases/v5.10.0/css/all.css -->

<!-- [googlefont](https://fonts.google.com/) -->

<!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> -->

## 麵包屑
[Breadcrumb](https://getbootstrap.com/docs/5.0/components/breadcrumb/)

1. breadcrumb對應breadcrumb-item
2. 可自定義符號
分隔符透過 ::before 以及 content 而自動被加入在 CSS 中。可以透過修改本地 CSS 自定義屬性 --bs-breadcrumb-divider 或 $breadcrumb-divider Sass 變數來改變，如有需要還可以透過 $breadcrumb-divider-flipped 的 RTL 對應項。預設使用 Sass 變數為自定義屬性的備案。這樣您將獲得一個全域分隔符，並且無需重新編譯 CSS 就能覆蓋該分隔符。

3. 添加active刷淡
4. SASS使用

## 按鈕
[Buttons](https://getbootstrap.com/docs/5.0/components/buttons/)
1. class 一定要下 btn btn-info

2. 按鈕標籤可以用在每個元素上(ex:div/span/a...)
3. 把按鈕做成連結的樣子
4. outline 外框線
5. 按鈕大小
btn-sm
btm-lg
6. disabled禁用
底層是鎖住事件發生 point-event:none
7. 自定義屬性=>切換狀態 data-bs-toggle:button (按下去效果)
active 得到深色

增加點擊事件產生 .active 反應（顏色變化），你可以拿來設計在需要切換 ON/OFF 效果。

添加屬性 data-bs-toggle="button" 就能進行切換效果
若初始化為作用中效果，你需要先增加 .active 與親合性屬性 aria-pressed="true" 。

補充:字體變色 text-info(text-color)

## 按鈕群組
[Button group](https://bootstrap5.hexschool.com/docs/5.0/components/button-group/)

1. 把按鈕連起來，主要是處理圓角。
透過一個父容器將多個按鈕組合起來，使得畫面為一個排列的按鈕群組。
父容器為 div.btn-grounp，以 d-inline-flex 設計

2. 也可以加outline 顏色

3. **checkbox也可以做成按鈕版本**
btn-check是把前面的打勾選項隱藏起來(但通常部會這樣用)+判斷兄弟元素是否打勾
所以label for 只能用兄弟元素這種方式不能用另一種包在裡面的。
一定要先INPUT後LABEL

* 下label
* label class下btn btn-info把它變成按鈕


4. radio也可做成button group
5. btn-toolar(三層，阿公)
預設:d-flex/f-wrap/justify-content:flex-start

## 下拉選單
[Dropdowns](https://getbootstrap.com/docs/5.0/components/dropdowns/)

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

* 一個元素btn，一個元素清單。` <ul class="dropdown-menu">`
* 透過data-toggle，去找到對應的內容
* 可做巢狀:一個group裡再包一層group
* 垂直擺放 btn-group-vertical

## 卡片
[cards](https://getbootstrap.com/docs/5.0/components/card/)
* card
card-header
card-body
card-footer

### 卡片文字

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

* card-header(選擇使用:圓角、邊框、刷灰)

* card-body(必要)
card-title(作用:margin-bottom:0.5rem)
card-subtitle
card-text(作用:card-text:last-child:margin-buttom:0px)
card-link
(hover去掉底線和調整兩個link的間距)
* card-footer(選擇使用:刷灰效果)

**搜尋快捷ctrl+f**

### 卡片圖
card的作用:flex-box
**card-img-top當圖片在卡片上方時，做上方圓角，反之亦然。**

**如果放在card-header裡，也沒有圓角問題。
也可以放外面，如果在卡片最上面或最下面就要處理圖片圓角問題。**

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

### overlay
* 將圖片轉換為卡片背景，並疊加卡片的文字。 根據圖片，你可以選擇是否需要額外的樣式或通用類別。
* 

class="card-img" 把四個角都圓角
card-img-overlay內可以放很多東西
(視覺歸視覺、邏輯歸邏輯)

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

* card和List group組合一起

## 導覽與頁籤 [Navs and tabs](https://getbootstrap.com/docs/5.0/components/navs-tabs/)

* nav搭配nav-item
* nav搭配nav-link

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

* card+nav[card+nav](https://bootstrap5.hexschool.com/docs/5.0/components/card/)
card-header
nav nav-tabs card-header-tabs
* nav nav-pills card-header-pills

### card group

等高 h-100

### **Masonry+rwd** [瀑布流](https://getbootstrap.com/docs/5.0/examples/masonry/)
[第三方網站介紹](https://masonry.desandro.com/)
* 1 CDN<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
2 用js
* 在row加上data-masonry='{"percentPosition": true }'
* 圖片要給固定寬高


* 第二種方式是用js去控制，可參考[loki筆記](https://summer10920.github.io/2021/03-03/bs5-class-3/)

## 輪播 [Carousel](https://getbootstrap.com/docs/5.0/components/carousel/)
輪播是一個幻燈片，是使用 CSS 3D 的變形轉換和一些 JavaScript 構建一系列內容產生的迴圈播放。它適用於一系列圖像、文本或自訂標記。它還包括對上一個 / 下一個控制項和指示器的支援。

主要可分為以下:
1. 幻燈片
2. 控制項(左右)
3. 指示器(下面的槓槓)
4. 文字

[輪播時間/禁止觸摸滑動/暗色系變化](https://bootstrap5.hexschool.com/docs/5.0/components/carousel/)
* 設定data-bs-interval，可以控制輪播圖時間在carousel下

  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>`
    
* 禁制觸摸滑動
  ` <div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">`
* 暗色系變化
* 在 .carousel 上添加 .carousel-dark 以獲得暗色系的控制項、指示器及字幕。控制項已透過 CSS 屬性 filter 從它們預設的白色充填反轉。字幕與控制項具有用來自定義 color 及 background-color 的額外 Sass 變數。

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

**整體輪播範例**

<div class="container w-50 carousel-fade">
<!-- 主容器 -->
<div id="lokiSlider" class="carousel slide" data-bs-ride="carousel">
<!-- 幻燈片區 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/720/?random=1" class="w-100">
<!-- 字幕 -->
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/720/?random=2" class="w-100">
<!-- 字幕 -->
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<!-- 控制項 -->
<a class="carousel-control-prev" href="#lokiSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#lokiSlider" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 導覽列 -->
<ol class="carousel-indicators">
<li data-bs-target="#lokiSlider" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#lokiSlider" data-bs-slide-to="1"></li>
</ol>
</div>
</div>

### 幻燈片
* 圖片記得要w-100
* data-ride="carousel" (輪播效果)
* 預設情況下是 5 秒轉場以及 focus（滑鼠懸停）時會暫停轉場動作。
* 要對子項目其中之一設active
* 只要是class="carousel-item"中的內容都可以播，不局限於圖片

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>

### 控制項(左右)
* button:data-bs-target="#carouselExampleControls" 和主容器相對應。
* 也可以使用a取代button:a href="#carouselExampleControls" 和主容器相對應。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

* 可以把左右的圖示換掉


### 指示器
* data-target="#carouselExampleIndicators"對應主容器id
* 給其中一個class="active"

<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>

### 文字
在 .carousel-item(幻燈片區中字幕區) 中使用 **.carousel-caption** 添加字幕到您的幻燈片。它們會隱藏在較小的 viewport 上，如下所示，可用的 顯示通用類別。 我們最初用 .d-none 隱藏它們，並將它們顯示在中型的設備上(使用 .d-md-block)。

<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>

**控制參數:淡入淡出效果**
淡入淡出轉場效果，對大容器添加 .carousel-fade 能更改為 fade 轉場。
對主容器 .carousel 添加 .carousel-dark 能適應淺底深字的配色。

<div class="container w-50 carousel-fade">

### **輪播圖重點**
1. 如果輪播文字要一直為同一組，則在carousel-inner中放一組即可，會輪播同一組文字。
![](https://i.imgur.com/sYqHmdY.png)
2. 圖通常是1920*1080(通常)，圖越大越好，不然w-100解析度會跑掉
3. item區的高度是由內容撐開，當畫面在手機板的時候，因為w-100所以圖片很小，因此把item變vh-100(整個畫面)，把w-100收起

![](https://i.imgur.com/tp4PtSz.png)


**要寫成以下，在rwd時圖片大小也是剛好的不會太小**
1. 當圖片小於視窗時(置中)就用margin:0 auto
2. 當圖片大於視窗時(置中)
    * 在Img下:position:absolute(成block d-block可刪)，將圖片定位在              carousel-item(本來bs就給relative了)。
      1. position:absolute
      2. left:-9999
      3. right:-9999
      4. margin:0 auto
    * 對item下 overflow:hidden

<div id="mycontrol" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active vh-100 overflow-hidden">
<img src="https://picsum.photos/1920/1080/?random=1" style="left:-9999px;right:-9999px"
class="mx-auto position-absolute" />
</div>
<div class="carousel-item vh-100 overflow-hidden">
<img src="https://picsum.photos/1920/1080/?random=2" style="left:-9999px;right:-9999px"
class="mx-auto position-absolute" />
</div>
</div>

<a class="carousel-control-prev" href="#mycontrol" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycontrol" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

<ol class="carousel-indicators">
<li data-bs-target="#mycontrol" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#mycontrol" data-bs-slide-to="1"></li>
</ol>

<div class="carousel-caption d-none d-sm-block">
<h1>hello world</h1>
<p>nice to meet you</p>
</div>
</div>

## 關閉按鈕 [Close button](https://getbootstrap.com/docs/5.0/components/close-button/)
`
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
`
## 摺疊 [Collapse](https://getbootstrap.com/docs/5.0/components/collapse/)
下拉後彈出顯示
* 單一目標
  data-bs-toggle="collapse"
  a連結的href或data-target對應內容id
  
* 多個目標控制(toggleA/toggleB/toggleA+B)
  對應內容也可使用class，做出對應多個目標


## 下拉選單 [Dropdowns](https://getbootstrap.com/docs/5.0/components/dropdowns/)
按下按鈕觸發js顯示下方清單，會使用到popper.js需引入。button搭配ul/li。
* button
  ul(class="dropdown-menu")-li

* 分割按鈕=>.dropdown-toggle-split

<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

* 深色按鈕
  透過在目前現有的 .dropdown-menu 增加 .dropdown-menu-dark 屬性，就可以增加較暗的下拉選單以適應較深色的導覽列或自定義樣式。因此這樣子就可以不用修改下拉選單。
  

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

* 箭頭方向
 ` <div class="btn-group dropup">` 向上
   .dropend 向右
   .dropstart 向左 


[分隔線/表頭/純文字](https://bootstrap5.hexschool.com/docs/5.0/components/dropdowns/)

## 列表群組 [list group](https://i.imgur.com/al0QUu0.png)

## 導覽列 [navbar](https://bootstrap5.hexschool.com/docs/5.0/components/navbar/)
* 定位:sticky-top/Fixed top/ fixed-bottom
* 響應式
導覽列可以使用 .navbar-toggler, .navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 決定它們的內容何時會摺疊。結合其他通用類別，您可以選擇何時顯示或隱藏特定元素。

對於不需要折疊的導覽列，在導覽列中加入 .navbar-expand。對於總是折疊的導覽列，不要加任何 .navbar-expand class。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

## 畫布 [offcanvas](https://getbootstrap.com/docs/5.0/components/offcanvas/)
向上下左右邊顯示區塊，是bs5新的項目。
可參考官網說明。

## 進度條[Progress](https://getbootstrap.com/docs/5.0/components/progress/)
* 父 progress 外層指定最大值
* 子 progress-bar ，給子元素
1. 寬度
2. 可以改顏色
3. 中間也可以放字
4. .progress-bar-animated 動畫
5. .progress-bar-striped 條紋 糖果紙
   
 ![](https://i.imgur.com/drlMCz3.png)
 
 ## 滾動監控 [Scrollspy](https://getbootstrap.com/docs/5.0/components/scrollspy/)
 [中文網站滾動監控](https://bootstrap5.hexschool.com/docs/5.0/components/scrollspy/)
 必須使用在 Bootstrap 導覽元件 nav 或 列表群組 list group.
 1. 導覽列隊應整個監控範圍
 2. 個別列隊應個別對象(錨點)
 3. 監控範圍 (寫在body不用下)
    * 添加 position:relative
    * overflow:auto
    * 給高度height:50vh
sticky-top

## 讀取圖示[Spinners](https://getbootstrap.com/docs/5.0/components/spinners/)
1. 在class上加spinner-border
2. 顏色用文字控制
* 在 Bootstrap 中的讀取圖示是用 rem, currentColor 和 display: inline-flex。這意味著它們可以輕易地調整大小、顏色以及快速對齊。
3. 定位

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

4. 尺寸
增加 .spinner-border-sm 和 .spinner-grow-sm 製作一個較小的讀取圖示，讓它可以在其他元件中快速地被使用。
5. 按鈕

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>

漸變讀取圖示 spinner-grow

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

## 吐司 [toasts] (https://getbootstrap.com/docs/5.0/components/toasts/)

主容器(fade) header/body

## 工具提示[Tooltips](https://getbootstrap.com/docs/5.0/components/tooltips/)
1. 添加 data-bs-toggle="tooltip" 
2. 位置 data-bs-placement="top"

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>