---
tags: Bootstrap5網頁切版整合術
---
# 6. Bootstrap 最實用的工具 - 元件
<!--[toc]-->

## 元件簡介:
* 結構與樣式分離: 概念來自oocss，例如: .btn是結構，.btn-primary是樣式

* 元件組合規則
* 元件模組大致包含以下規則
-模組(button,modal,pagination)
-主題(theme colors,primary,danger...)
-樣式(size,style)
-狀態(active, disabled)

* 範例:"btn btn-outline-primary" 先加上基本結構再添加主題、樣式或狀態等

* 容器元件: 先加上主結構，再加上內層結構，這類也常會跟著格線系統


## 元件與 JavaScript 之間的關係
* data屬性: 在 Bootstrap 中，如果要透過 HTML 正確對應 JavaScript 互動方法，均需要使用 data-bs-* 來調用

data-bs-toggle="modal" 呼叫modal視窗
data-bs-target="#myModal" 指向要開啟的id

* 或是建構方式呼叫 Bootstrap JavaScript API
(這裡後面章節會在說明)

## 手風琴 (Accordion)
還沒打完

## 警報 (Alerts)
* 連結顏色alert-link: 使用 alert-link 套用警告框內的連結色彩
* 外層用: alert-情境色
* 連結用: a標籤設定.alert-link

### icon
#### Copy HTML:
複製要使用的icon html，直接貼上SVG就可用


#### Icon font:
載入CDN連結，複製icon font語法，再用 utilities 調整大小、間距
例如.fs-4 me-2

`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">`
## 標籤 (Badges)
## 麵包屑 (Breadcrumb)
可以修改分隔線的符號，也可嵌入svg，加入`style="--bs-breadcrumb-divider:'>';`


## 按鈕 (buttons)
a標籤不支援disabled屬性，所以用class disabled
再加上 tabindex="-1" 用tab鍵也選不到，才能真的達到disabled禁用


### block buttons
* 按鈕滿寬.d-grid+gap-2: 寫法有彈性可設斷點.d-md-block，
或是用.w-100

* 網格col: 也可以用.col-xx 調整寬度

## 按鈕群組 (button group)重要

## 卡片 (cards)非常重要

## 輪播 (carousel)
* Slides only 僅有幻燈片
外層加上 data-bs-ride="carousel"，並給予唯一的 ID
過一段時間會自己換圖片，沒有按鈕可以點

* With controls 控制項
.carousel-control-prev
.carousel-control-next

左右加上控制<> 輪播
data-bs-target 需對應外層 ID

* With indicators 指引器
.carousel-indicators

中間會出現橫槓，知道目前在哪一張總共幾張
data-bs-slide-to="0" 要從0開始

* 時間間隔.data-bs-interval="秒數";
可以在每一個.carousel-item各別調整時間

* 禁用觸控滑動 .data-bs-touch="false"
加上這個class可以避免手機版觸控時 避免輪播影響用戶操作，往上往下滑時不會受影響
## 關閉按鈕 (Close button)（好用）
## 摺疊 (collapse)重要
* 基本使用方式：

* 按鈕加上 data-bs-toggle="collapse"
* 加上 href 或 data-bs-target 來對應項目，
herf對應`<a>`、data-bs-target 對應 `<button>`

## 下拉選單 (Dropdowns)（好用）
* 選單如果要加`<hr>` 要包在li裡面


## 列表群組 (List group)（好用）
* 若要使用`<a>`連結.list-group-item，需在加上 .list-group-item-action讓他有hover的效果

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    T123
  </a>
  <a href="#" class="list-group-item list-group-item-action">456</a>
</div>

* 禁用在`<button>`，是使用 disabled 屬性而不是 .disabled class

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">123</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>56</button>
</div>

* Checkboxes and radios 核取方塊和選項按鈕
將 <label> 作為 .list-group-item 使用以創造較大的點擊區域

  <div class="list-group">
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      First checkbox
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Second checkbox
    </label>
 </div>  

## 互動視窗 (Modal)（重要）
* 在兩個 Modal 中切換，
.data-bs-dismiss="modal" 關閉當前madal，
.data-bs-toggle="madal" 打開id為data-bs-taget=#exampleModalToggel2"

* 滿版互動視窗 Optional sizes
modal-dialog 加入 modal-{xl, lg, sm}

## 導覽與頁籤 (Navs and tabs)
* 使用 a 標籤，則不需要使用 .nav-item，加入.nav-link即可

* JavaScript 頁籤
* 分頁外層為 tab-content，內層為 tab-pane fade，其中一個需加入 show active
* 每個分頁需要有獨立的 id
* 按鈕加上 data-bs-toggle="tab"，並使用 data-bs-target 分別對應 id

## 導覽列（Navbar）（重要）
style="--bs-scroll-height: 100px;"


## Offcanvas - 側欄滑動導覽（好用）
## 分頁 (Pagination)（好用）
## 彈出提示框 (Popovers)
## 進度條 (Progress)
可在外層加上高度，內層加上寬度

## 滾動監控 (Scrollspy)
## 讀取圖示 (Spinners)（重要）
* 使用 text-{情境色} 來套用顏色
原理：顏色是使用 CSS 變數中的 currentColor 來套用文字色彩

## 吐司 (Toasts)（重要）
## 工具提示框 (Tooltips)（好用）

<small>備註-20220628先不寫太細的筆記，有用到或容易忘的再回來補寫就可以，因為大部分bs文件都有寫了，主要還是要會看bs官網的文件</small>