# Bootstrap 元件 (一)
###### tags: `BootStrap`
Date : 2022/05/24

## 手風琴(Accordion)
- aria 標籤都可以刪除 (這些是螢幕閱讀器使用的)
- data-bs-toggle : 表示 BS 要觸發一個功能叫做 collapse(摺疊)的功能
- data-bs-target : 表示摺疊目標的 id 名稱，一個按鈕會對應一個id
- data-bs-parent : "#id" 對應到該.accordion 的 id
:::info
data-bs-parent
如果要在一個可折疊區域加入可折疊<font color="red">群組</font>，加入 data-bs-parent="#selector" 資料屬性，也就造成摺疊群組同時只能展開一個

如果拿掉`data-bs-parent` 就可以同時展開所有的目錄

:::
- Flush
加上 .accordion-flush 來移除預設 background-color、 外框和圓角使該手風琴能和父容器緊鄰。

## 麵包屑 (Breadcrumb)
網站路徑到目前位置

- 更改斜線

**方法一：**

找到變數名稱

設立style

.breadcrumb-divider-1{
     --bs-breadcrumb-divider:">"
}

套用

<nav>
  <ol class="breadcrumb breadcrumb-divider-1">
    <li class="breadcrumb-item"><a href="#">首頁</a></li>
    <li class="breadcrumb-item"><a href="#">分類一</a></li>
    <li class="breadcrumb-item active"><a href="#">分類一_1</a></li>
  </ol>
</nav>

結果

**方法二 :**
使用 <a href="https://unicode-table.com/en/">unicode</a>

設立style並套用

.breadcrumb-divider-2{
      --bs-breadcrumb-divider:"\261B"
}

結果

**方法三 : **
使用 <a href="https://www.base64-image.de/">base64</a>

在<a href="https://www.flaticon.com/">flaticon</a>找到要使用的圖片下載(注意大小)


丟進去 點show code


設立style並套用

.breadcrumb-divider-3{
   --bs-breadcrumb-divider: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFASURBVEiJ7ZQ9S4JhFIav86hRU2UtfuBg0D9oi8xWt+AtDaKpfxCKWx+DFuE/aAr60LkhgjQEob/Q19xQzWn2nJYMKQrl1SHwWu9z7pvn3PDAgAF/oYrkKkupXHVl/LcZcROwX05NNsU+AveqNpGNl+6+zxg3ARvx4yeBA2BaxFzvXTqxngYA+IZsFuQZ8FtjzncrydV2veMT5S+cUTzeMMZGVAmBhEU0AoSAGaDVgwKbmdjpjggqAIWaM1J/9wVoNqNiJKhIwKhGLQRFJIDqFDDW3duk+KrDa5KvJKugs90td5qhZwbU9sUcEBXp/4k6He+mZBHdSs8Vt79KdkOh5vgbDc8N6ARQF2Q9M39y2NK9bgPeGib3af5irF1ML5Su2vVefRUPRjyJdOzo1o3fD1SRfHk5Wag5/p4aD/hffACC43rvoRVj6gAAAABJRU5ErkJggg==')
}

結果


:::info
<a href="https://www.base64-image.de/">base64</a>.
優點: 下載的時候不需要跟伺服器請求，減少伺服器交流的時間，下載的時間會比較快。
缺點: 編碼產生，文字很多，大張圖片可能編碼檔案會比圖片更大。所以只適合使用小icon。
:::

## 按鈕/群組按鈕
## 卡片
範例中有設定width，如果要配合父元素(col..)大小，要移除。

|.card|卡片|
|----|---|
|.card-header|卡片結構|
|.card-body|卡片結構|
|.card-footer|卡片結構|
|.card-title|卡片主標title|
|.card-link|卡片連結link樣式|
|.card-subtitle|卡片次標subtitle|
|.card-img-top|把圖片放在卡片的頂部|
|.card-img-bottom|把圖片放在卡片的底部|
|.card-text|文字內容可以添加到卡片|
|.card-img-overlay|將圖片轉換為卡片背景，並疊加卡片的文字|

:::info
card 可以分層三個結構

完整結構
.card-header ->圖片
.card-body ->文字
.card-footer ->按鈕
:::

- 卡片加上高度(.h-100)可以水平一致 或是 都加上 footer
- .card-img-top 加上去圖片才會有圓角，反之沒加會變成直角。並且佔滿父元素寬度。

- 可以配合表群組
- 可以利用網格系統 排列成水平卡片

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <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"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

## 輪播

- 預設 5 秒輪播一張圖，滑鼠放在上方就會停止輪播。
**設定輪播秒數** `data-bs-interval="毫秒"`

| < > ： | 控制項(左右) |
| -------- | -------- |
| _ _ _ ： | 指示器(中間下方) |

- data-bs-target #id 須跟輪播圖一致， 範例 Tang_carousel

:::info
結構
指示器 carousel-indicators :有幾張圖片輪播
圖片
控制項
:::
|.carousel-indicators|指示器|顯示輪播的圖片數量、並可以點選跳至該圖播放。|
|----|----|----|
|.carousel-control-prev|上一張按鈕|data-bs-target #id 須跟輪播圖一致|
|.carousel-control-next|下一張按鈕|data-bs-target #id 須跟輪播圖一致|
|.carousel-inner|放圖片的父容器||
|.carousel-item|放圖片的子容器||
|.carousel-caption|字幕(字在圖上面)|
|data-bs-touch="true" |手機裝置觸控|預設true，要關閉使用fales|
|data-bs-interval="毫秒"|輪播時間|單位毫秒
|.carousel-fade|滑動變成淡入淡出的效果||
|.slide|滑動效果||
|.carousel-dark|深色模式，文字會變黑||

#### 改變速率
- <a href="https://easings.net/">easings.net</a>

.carousel-item{
   transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);
    }

/*秒數可以更改*/

#### 漸層效果
修改上一張、下一張背景氛圍

#Tang_carousel .carousel-control-prev {
  opacity: 0.75;
  background: linear-gradient(90deg, rgba(0, 0, 0, .75), transparent);
}

#Tang_carousel .carousel-control-next {
  opacity: 0.75;
  background: linear-gradient(270deg, rgba(0, 0, 0, .75), transparent);
}


#### 更改指示器

    .carousel-indicators [data-bs-target]{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-indent: 0;
    }


加上文字

<button type="button" data-bs-target="#Tang_carousel" data-bs-slide-to="0" class="active">1</button>
<button type="button" data-bs-target="#Tang_carousel" data-bs-slide-to="1">2</button>
<button type="button" data-bs-target="#Tang_carousel" data-bs-slide-to="2">3</button>
<button type="button" data-bs-target="#Tang_carousel" data-bs-slide-to="3">4</button>
<button type="button" data-bs-target="#Tang_carousel" data-bs-slide-to="4">5</button>


#### 輪播滿版
Date : 2022/06/25

必須一層一層抓 100%

<!DOCTYPE html>
<html lang="en">

<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 rel="stylesheet" href="./css/bootstrap.css">
  <title>Document</title>
  <style>

    @media(min-width:992px) {
      /* 由最外層開始一層一層抓滿版 */
      #myCarousel {
        height: 100vh;
      }
      /* 同一個標籤內的 ID Class 所以連一起寫 */
      #Tang.carousel {
        height: 100%;
      }

      #Tang .carousel-inner {
        height: 100%;
      }

      #Tang .carousel-item {
        height: 100%;
      }

      #Tang .carousel-item img{
        height: 100%;
      }

    }
  </style>
</head>

<body>
  <section id="myCarousel">
    <!--  data-bs-interval="3000" 輪播秒數 -->
    <div id="Tang" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#Tang" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#Tang" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#Tang" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#Tang" data-bs-slide-to="3"></button>
        <button type="button" data-bs-target="#Tang" data-bs-slide-to="4"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
          <img src="https://picsum.photos/1920/1080/?random=1" class="d-block w-100">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <img src="https://picsum.photos/1920/1080/?random=2" class="d-block w-100">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/1920/1080/?random=3" class="d-block w-100">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/1920/1080/?random=4" class="d-block w-100">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/1920/1080/?random=5" class="d-block w-100">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#Tang" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#Tang" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

  </section>

  <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>