# Bootstrap 元件 (二)
###### tags: `BootStrap`
Date : 2022/05/25

## 關閉按鈕(Close button)
|.btn-close|關閉按鈕|
|-|-|
| .btn-close-white|改成白色|

- 也有 disabled 可以使用"禁用狀態"

## 折疊 (Collapse)
- 點擊元素需要有 `data-bs-toggle="collapse"` 來觸發摺疊功能
- 點擊 a 元素要有` href="#id"` ，或是 button 上需要有` data-bs-target="#id"` ，對應摺疊內容

<p>
    
  <!-- 使用 a 標籤 -->
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" >
  Link with href
  </a>
    
  <!-- 使用 button 標籤 -->
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" >
  Button with data-bs-target
  </button>
</p>

<!--內容-->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

#### 水平
添加 .collapse-horizontal 類別來轉換的是width 而不是 height ，在子元素上設定width。

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#Tang03">
  可達鴨
  </button>
</p>

<div style="min-height: 120px;">
    <!-- 加入 .collapse-horizontal  -->
  <div class="collapse collapse-horizontal" id="Tang03">
    <!-- style="width: 100px;" 改變寬度 -->
     <div class="card card-body" style="width: 500px;">
          呱呱呱呱呱呱，呱呱呱呱呱呱呱呱呱呱呱呱。
     </div>
  </div>
</div>

## 列表群組 (List group)
| .list-group|群組||
|-|-|-|
| .list-group-item|項目|
| .list-group-item-action | hover|
| .list-group-flush|移除部分邊框及圓角|
|.list-group-numbered |編號
|.list-group-horizo​​ntal |水平|
|list-group-item-primary|情境顏色|

## 互動視窗 (Modal)
<ul>
<li>可以使用 button 或 a 元素觸發 modal 視窗，並啟動 data-bs-toggle="modal" 效果。 </li>
<li>兩者觸發需對應 modal 主體的 id 。</li>
<li>在使用 button 元素時， 要在 data-bs-target 設定 id。</li>
<li>在使用 a 元素時， 要在 href 設定 id。</li>
</ul>

|data-bs-backdrop="static"|點旁邊關不掉視窗(靜態背景)
|-|-|
|.modal|互動視窗|
|.modal-content|內容|
|.modal-header||
|.modal-title|標題|
|.modal-body|內文|
|.modal-footer|按鈕|
|data-bs-toggle="modal"|互動視窗功能|
|.modal-dialog-scrollable|內文過多，增加滾輪|
| .modal-dialog-centered |水平垂直置中|
| modal-xl/lg/sm|尺寸1140px/預設500px/800px/300px||
|data-bs-dismiss="modal"|關閉 modal 視窗|
|.modal-dialog |視窗下滑的效果(動畫)|
|.fade|淡入淡出|

:::info
可以 link <a href="https://animate.style/">**animate.css**</a> 改變彈出動畫。

const tang = document.querySelector('#tang')
const dialog = document.querySelector('#tang .modal-dialog')


tang.addEventListener('show.bs.modal',()=>{
    goAnimation('animate__bounceOutUp','animate__bounceIn')
    // goAnimation('離場動畫','進場動畫')     
})

tang.addEventListener('hide.bs.modal',()=>{
    goAnimation('animate__bounceIn','animate__bounceOutUp')
    // goAnimation('進場動畫','離場動畫')
})

function goAnimation(remove,add){
    dialog.classList.remove(remove)
    dialog.classList.add('animate__animated',add,'animate_duration')
      // 一定要加 'animate__animated' 用來啟動 animate.js 
}

/* 解決： 速度太快造成動畫出不來 */

.animate_duration{
  animation-duration: 0.5s;
}
/* 修改 transition-duration 與 animation-duration 相同*/
.fade{
  transition-duration:0.5s ;
}

監聽事件參考：

:::

## 導覽與頁籤 (Navs and tabs)
- 本身是彈性盒，子元素無論是.nav-item .nav-link 都是彈性項目。
- .nav 有兩種寬度擴展用的 class ， .nav-fill、.nav-justifide
:::warning
將剩餘空間平均分配給每個item兩側


:::

|.nav|導覽|
|-|-|
|.nav-item||
|.nav-link||
|.tab-content|內文父元素|
|.tab-pane|內文子元素|
|.nav-tabs|分頁標籤|
| .nav-pills|膠囊狀樣式|
|.nav-fill|填充|
|.nav-justified|對齊|

#### javascript 行為
- 先確認使用 .nav-tabs or .nav-pills
- .nav-tabs 在分頁按鈕加上 data-bs-toggle="tab" 啟動 tab 功能
- .nav-pills 在分頁按鈕加上 data-bs-toggle="pill" 啟動 pill - 功能
- 確認對應的錨點 id ，範例是 #HTML #CSS #JS ，點選後對切換到對應的區塊。
- 設立垂直頁籤。在外層設定.d-flex，標籤上設定 .flex-column

## 導覽列 (Navbar)

- .navbar 是 flexbox
- .fixed-top 固定在上方，.fixed-bottom 固定在下方
- .navbar-expand-* 指通過某個中斷點展開整個導覽列，若沒這個 class 導覽列會永遠處於折疊狀態(漢堡按鈕)
- .navbar-dark 會讓導覽列文字白色，需搭配深色的背景
- .navbar-light 會讓導覽列文字黑色，需搭配淺色的背景
- 對調 logo 與 漢堡按鈕的位置，在摺疊狀態會互換位置

|.navbar||
|-|-|
|.navbar-expand|響應式|
|.navbar-dark|導覽列文字顯示"白色|
|.navbar-light|導覽列文字顯示"黑色|
|.navbar-brand|導覽列LOGO位置|
|.navbar-toggler|導覽響應式摺疊icon(漢堡按鈕)|
|.navbar-nav|導覽列的頁籤|
|.navbar-collapse|摺疊|.

## 下拉選單 (Dropdowns)
Date:2022/05/31

:::danger

下拉功能必須依賴第三方函式庫 <a href="https://popper.js.org/">popper.js</a>
使用 bootstrap.bundle.min.js/ bootstrap.bundle.js 包含 popper.js。
bootstrap..min.js/bootstrap.js 沒有包含 popper.js。
:::

|.dropdown|下拉選單|
|-|-|
|.dropdown-menu|清單|
|.dropdown-menu-start|選單靠左
|.dropdown-menu-end|選單靠右
|.dropdown-menu-\*-end|響應式
|.dropdown-header|分類標題|
|.dropdown-item|清單的item|
|dropdown-divider|清單的分隔線
|.dropdown-toggle|white-space: nowrap;
|.dropdown-toggle-split|分割按鈕
|.dropdown-menu-dark|深色樣式


|.dropup|選單向上|
|-|-|
|.dropend|選單向下|
|.dropstart|選單向左|

- 選單寬度 ： 直接設定 style="width: 500px;
- 下拉選單位移：在 button 添加 data-bs-offset="10(水平位移量),20(垂直位移量)
- 自動關閉行為 : data-bs-auto-close="true" 為預設 / 點外部或按鈕都可以關閉選單

## 彈出提示框 (Popovers)
Date:2022/05/31
:::danger
- 只有設定 data 無法啟動， 需使用程式啟動它。
- 需要依賴第三方函式庫 <a href="https://popper.js.org/">popper.js</a> ，才可以工作。
- bootstrap.bundle.min.js 含有 popper.js
:::

|data-bs-toggle="popover"|觸發彈出提示框|
|-|-|
|data-bs-placement="right" /bottom /left /top |方向|
| data-bs-trigger| 預設為 click ，必須點按鈕才會關閉popover|
|data-bs-trigger="focus"|在下一次按鈕以外任何地方 click 收起 popover
|data-bs-trigger="hover"|滑鼠移動按鈕彈出， 移出消失。

#### 單個抓取

<button id="Tang" type="button" 
        class="btn btn-lg btn-info" data-bs-toggle="popover" 
        title="我是title" data-bs-content="我是內容" 
        data-bs-placement="right"
        data-bs-trigger="focus"> 按我!!</button>

    const tang = document.querySelector('#Tang')
    new bootstrap.Popover(tang)

#### 多個按鈕抓取

const dom = document.querySelectorAll('[data-bs-toggle="popover"]')
console.log(dom)

//類陣列轉成真正列的方式
//第一種方式
//.slice(index) => 回傳index之前的物件，形成一個新的陣列 
//.call() =>
var popoverTriggerList = [].slice.call(dom)


//第二種方式
//Array.from() 方法會從類陣列（array-like）或是可迭代（iterable）物件建立一個新的 Array 實體。
var popoverTriggerList = Array.from(dom)


//第三種方式
//解構
var popoverTriggerList = [...dom]



// map() 將陣列中全部的物件 return new bootstrap.Popover()
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl)
    })

## 工具提示框 (Tooltips)
Date:2022/05/31
:::danger
- 只有設定 data 無法啟動， 需使用程式啟動它。
- 需要依賴第三方函式庫 <a href="https://popper.js.org/">popper.js</a> ，才可以工作。
- bootstrap.bundle.min.js 含有 popper.js
:::

|data-bs-toggle="tooltip"|工具提示框觸發|
|-|-|
|data-bs-placement="top"|提示框放置上方|
|data-bs-placement="bottom"|提示框放置下方|
|data-bs-placement="right"|提示框放置右方|
|data-bs-placement="left"|提示框放置左方|

- 單個

var tooltipTang = document.querySelector('#Tang')
new bootstrap.Tooltip(tooltipTang)

- 多個

const tooltipArrayLike = document.querySelectorAll('[data-bs-toggle="tooltip"]')

const tooltipArray = Array.from(tooltipArrayLike)
    tooltipArray.map(function (e) {
      return new bootstrap.Tooltip(e)
    })

- svg 使用(見文件)

## 讀取圖示 (Spinners)
|loading|-|-|
|-|-|-|
|spinner-border|線條轉圈||
|spinner-grow|圓形漸層||
| .spinner-border-sm| 尺寸變化|loadding 屬於文字，可以直接使用文字樣式修改大小
| .spinner-grow-sm |尺寸變化
||