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-horizontal	水平
list-group-item-primary	情境顏色

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

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	淡入淡出

可以 link animate.css 改變彈出動畫。



















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

將剩餘空間平均分配給每個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 是 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

下拉功能必須依賴第三方函式庫 popper.js
使用 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

只有設定 data 無法啟動，需使用程式啟動它。
需要依賴第三方函式庫 popper.js ，才可以工作。
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

只有設定 data 無法啟動，需使用程式啟動它。
需要依賴第三方函式庫 popper.js ，才可以工作。
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	尺寸變化

Bootstrap 元件 (二)

tags: BootStrap

關閉按鈕(Close button)

折疊 (Collapse)

水平

列表群組 (List group)

互動視窗 (Modal)

導覽與頁籤 (Navs and tabs)

javascript 行為

導覽列 (Navbar)

下拉選單 (Dropdowns)

彈出提示框 (Popovers)

單個抓取

多個按鈕抓取

工具提示框 (Tooltips)

讀取圖示 (Spinners)

Read more

Vue 元件

Bootstrap 整理

counter-increment 屬性

Bootstrap 元件 (一)

tags: `BootStrap`