###### tags: `21 天 Bootstrap 5 新手實戰營`
# Bootstrap5_w3筆記(元件、JS)

## 基本概念

aria 開頭的標籤是給視障人士使用播報軟體撥放網頁使用，無障礙網站(通常是政府網站或國外網站會特別要求)。

data-bs-* 是用來套入一些 JS 效果，可特別注意 data-bs 開頭的屬性。

常見的有以下兩個：
1. data-bs-toggle："modal" =>你要的效果。
2. data-bs-target："#exampleModal" =>在哪裡開啟。=>對應其id

* 官網支援 https://getbootstrap.com/

## Modal 元件(彈跳視窗 ex:會員登入註冊、同意條款)

Modal [參考文檔](https://getbootstrap.com/docs/5.0/components/modal/)。

來看程式碼，
大致可分成三部分
* modal-header
* modal-body
* modal-footer

* 讓modal垂直置中
` <div class="modal-dialog modal-dialog-centered">`
* 調整modal大小

<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-xl">...</div>


1 data-bs-toggle="modal" =>你要的效果

2 data-bs-target="#exampleModal" =>在哪裡作用
要被開啟的 modal 對象須添加 class="modal" ，class="modal fade" fade表示預設為隱藏
對應 id="exampleModalLabel"

3 如要使用多個彈跳視窗，則設置不同target及對應id

4 在按鈕身上添加 data-bs-dismiss="modal" 可以關閉 modal

5 靜態背景:不希望點擊空白處 modal會消失，可以在 modal 身上添加 data-bs-backdrop="static"

6`<div class="modal-dialog modal-dialog-scrollable">`會有滾動卷軸

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

## collapse 折疊元件(點擊往下出現 ex:常見問答)
collapse [參考文檔](https://getbootstrap.com/docs/5.0/components/collapse/)。

來看程式碼，
* 一樣 data-bs-toggle="collapse" 為你要的效果。
* a 標籤用 href / 對應內容id
* 其他(button) 用 data-bs-target 對應內容id

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="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>

要被開啟的折疊對象須添加 class="collapse"

要一次操控多個折疊元件 可以使用 data-bs-target => 對應id

默認顯示折疊元件，則須把折疊對象身上的樣式改成class="collapse show"

## nav&tab 元件(tab頁籤)
nav&tab [參考文檔](https://getbootstrap.com/docs/5.0/components/navs-tabs/)。

頁籤
* 分成四個頁面顯示，較不影響seo。
* 若做在同一頁，資料量多時會需較多時間，影響使用者體驗。

.nav 使用 display:flex，所以可以使用flex特性控制位置。
使用.justify-content-center 置中對齊。
使用 .justify-content-end 靠右對齊。
使用 .flex-column 通用類別更改 flex 的軸線方向以堆疊導覽。

nav-tabs分頁標籤
nav-pills囊狀分頁標籤

來看程式碼，

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

* nav搭配nav-tabs
* data-bs-toggle="tab" 要的效果
* a 對應內容id 或是 data-bs-target="#nav-home" 對應內容id
* nav 搭配 tab-content 就可以做出動態頁籤的效果， nav 與 tab-content tab-pane 缺一不可。
* active 是默認顯示的對象。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-auto">
      <ul class="nav bg-dark"  >
        <li class="nav-item" >
          <a class="nav-link link-secondary" data-bs-toggle="tab" href="#homeImg">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary" data-bs-toggle="tab"  href="#aboutImg">ABOUT</a>
        </li>
        <li class="nav-item" >
          <a class="nav-link link-secondary" data-bs-toggle="tab"  href="#albumImg">ALBUM</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="homeImg">
          <img  src="https://fakeimg.pl/800x300/?text=home" />
        </div>
        <div class="tab-pane fade" id="aboutImg">
          <img src="https://fakeimg.pl/800x300/?text=about" />
        </div>
        <div class="tab-pane fade" id="albumImg" >
          <img  src="https://fakeimg.pl/800x300/?text=album" />
        </div>
      </div>
    </div>
  </div>
</div>

**要顯示的區域外為 div class="tab-content"。**
**要顯示的圖片外面包一層div，class和id要加在這一層，不是加在img上!!!**

 <div class="tab-content">
        <div class="tab-pane active" id="homeImg">

### 淡入淡出效果
要使分頁標籤淡入淡出，請將 .fade 加到每個 .tab-pane 中。 第一個分頁內容還必須具有 .show 以使初始內容可見。

## 通用類別：定位 Position
position [參考文檔](https://getbootstrap.com/docs/5.0/utilities/position/)。

來看程式碼，

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

* 基本上是 [子絕父相] 去做定位，以下為例子:

<div class="position-relative">
  <div class="position-absolute">xxxxx</div>
</div>

* 常用效果01
position: sticky；僅會於父元素的容器內生效，當父容器高度不足被設定sticky的容器就會上去了。

使用場合應該是這樣：

<div class="black" style="height:500px;background:black">

  <div class="pink position-sticky top-0" style="height:100px;background:pink;"></div>
  
  </div>
  
  <div class="gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ducimus voluptate odit architecto dolorum veritatis perspiciatis eaque pariatur quae nihil, nobis dolores tenetur corporis vero recusandae autem unde omnis facere Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, accusantium et adipisci quam sunt fuga, inventore dolore quisquam atque eos reprehenderit eligendi nostrum eius quasi quae provident ipsam magni</div>

* 常用效果02
文字的左右加上水平線
使用progress+定位

 <div class="position-relative my-4">
          <div class="progress bg-success" style="height: 2px;">
            <div class="progress-bar" role="progressbar"  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="position-absolute top-0 start-50 translate-middle bg-white text-center text-success px-2 fw-bold">我綠綠的</div>
        </div>

## 通用類別：overflow
overflow [參考文檔](https://getbootstrap.com/docs/5.0/utilities/overflow/)。

當一個元素中的內容超過其本身的寬度或高度時，可以使用 overflow 來調整顯示狀態，
有以下幾種值：
* overflow-auto 自動偵測當內容超過高度時顯示垂直滾動條，當內容超過寬度出現水平滾動條。
* overfloe-scroll 不管有沒有超過寬高都出現滾動條
* overflow-hidden

## 卡片元件
card [參考文檔](https://getbootstrap.com/docs/5.0/components/card/)。

## 表單元件

forms [參考文檔](https://getbootstrap.com/docs/5.0/forms/overview/)。

來看程式碼

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

# Helpers-color links
[color links](https://getbootstrap.com/docs/5.0/helpers/colored-links/)

你可以使用 .link-* 類別為連結著色。不同於 .text-* 類別， 這些類別具有 :hover 和 :focus 狀態。

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>