Bootstrap 4 Components 重點精華

FrontEndEden Liu0

Bootstrap 4 Components，是 Bootstrap 為何受歡迎的主要原因，它提供大量現成的組件供開發者使用，可以輕鬆組合與變化。只要 copy paste 就可以立即得到一模一樣的組件與效果，加上 Bootstrap 結構化非常落實，進行客製化的調整也非常簡單。

現在就來與 Bootstrap 官網 作對照，快速的掌握要點吧！

在文件閱讀部分，不脫離下列這幾個項目：

  • 基本元件範例
  • 元件樣式變化
    • 元件變化
    • Grid 或 Utilities 等混合使用
    • 網頁親和性
  • 元件與 JavaScript
  • 編譯說明
    • $ 開頭的程式碼

Alerts

訊息回饋用

  • .alert 僅包含簡單的間距，可搭配 .alert-{color} 做不同背景色彩
  • 內層有連結標籤 <a> 可掛上 .alert-link 類別，該連結顏色會是加深外層的背景色彩，會比較協調
  • plugin
    • 加上 data-dismiss=”alert” 屬性可以移除 alert，是一次性的行為

Badge

一行文字的額外訊息提供，可作 連結或按鈕的計數器、Tag 等

  • .badge 僅提供 padding 與字體變白色，需搭配 .badge-{color} 做不同背景色彩
  • 會自動符合各種尺寸
  • .badge-pill 可使標籤更圓潤
  • 套用在 <a> 連結元素，提供 hover 和 focus 狀態

Breadcrumb

讓用戶了解目前在網頁的位置，也會提升 SEO，它是運用 ::before 和 content 處理的

可用兩種結構：

  • ol.breadcrumb
    • li.breadcrumb-item
    • li.breadcrumb-item.active
  • nav.breadcrumb
    • a.breadcrumb-item
    • a.breadcrumb-item.active

Buttons

bootstrap 使用最頻繁的元件

  • .btn 僅是結構，可搭配 .btn-{color} 做不同主題色彩
  • 加入 disabled，會呈現半透明狀態
    • button 元素是加入 disabled 屬性
    • a 元素是加入 .disabled class
      • 看起來不能點其實還是可以點，所以建議還是用 button
  • .btn-link，保有 button 結構，但是呈現是連結樣式
  • 可套用在 a、button、input[type=”button”]、input[type=”submit”]、input[type=”reset”] 元素，input 一定要前述那三個，樣式才會正確
  • .btn-outline-{color}，屬於外框按鈕，hover 會變實心(好喜翻)
  • 加入 .active，啟用狀態，會直接按下去的樣式
  • 有不同尺寸，加上 .btn-sm or .btn-lg
  • 加入 .btn-block 變成塊狀屬性，填滿整個空間，並且兩個時上下相鄰會有間距
  • plugin
    • 加上 data-toggle=”button” 切換按鈕狀態
    • 群組式 (checkbox or radio，下方以 checkbox 為例)
      • div.btn-group
        • label.btn.btn-secondary.active
          • input[type=”checkbox”][autocomplete=”off”][checked]
        • label.btn.btn-secondary
          • input[type=”checkbox”][autocomplete=”off”]
        • label.btn.btn-secondary
          • input[type=”checkbox”][autocomplete=”off”]
      • input 會被隱藏

Button group

外層加上 .btn-group 的 class，裡面的 .btn 就可以被群組化了 (v4 採用 flex)

  • 結構
    •  div.btn-group
      • button.btn.btn-secondary
      • button.btn.btn-secondary
      • button.btn.btn-secondary
  • .btn-toolbar 可將整組的按鈕加入到按鈕工具列，實現再度群組化，
    • 多群組的外層掛上該 class
    • 可加上 .justify-content-between 等的類別實現 flex 的排版
  • 也有 .input-group 將按鈕與輸入元素作群組
  • 有不同尺寸的大小控制 (不是調整按鈕)
    • .btn-group-lg
    • .btn-group
    • .btn-group-sm
  • .btn-group-vertical 可使其垂直排列
  • plugin
    • 可再作到巢狀。官網是與下拉式選單群組使用，詳見 官網範例

Card

非常大的元件，將 v3 以前比較少用的元件整合到這裡

  • .card 可隨著外層 grid 調整它的大小，是有符合響應式的
  • .card 加入 .text.text-center、.text-right 調整內層的文字對齊
  • .card 加入 utilities 改變不同色彩
    • 背景：.bg-{color}
    • 外框：.border-{color}
  • 可透過 .bg-transparent 移除背景色

結構 1

  • div.card (加入一個細細的 border 與 白色的底)
    • img.card-img-top (or .card-img-bottom，會符合響應式)
    • div.card-body (加入一個上下左右 padding)
      • h4.card-title (調整間距)
      • h6.card-subtitle (調整間距)
      • p.card-text (最後一個會有縮小下距)
      • a.card-link

結構 2

  • div.card
    • div.card-header (上灰底，切上方圓角)
    • div.card-body
      • div.card-title
      • div.card-text
      • a.card-link
    • div.card-footer (上灰底，切下方圓角)

結構 3

卡片式導覽元件

  • div.card
    • div.card-header
      • ul.nav.nav-tabs.card-header-tabs
        • li.nav-item
          • a.nav-link
        • li.nav-item
          • a.nav-link
    • div.card-body

結構 4

導覽元件，片狀的

  • div.card
    • div.card-header
      • ul.nav.nav-pills.card-header-pills
        • li.nav-item
          • a.nav-link
        • li.nav-item
          • a.nav-link
    • div.card-body

結構  5

文字覆蓋在圖片上面 (要注意顏色搭配，預設白色文字作搭配)

  • div.card
    • img.card-img
    • div.card-img-overlay
      • h4.card-title
      • p.card-text
      • p.card-text

結構 6

卡片群組 1

  • div.card-group
    • div.card
    • div.card
    • div.card

結構 7

卡片群組 2，與 1 的差別就是 2 有加上 gutter

  • div.card-deck
    • div.card
    • div.card
    • div.card

結構 8

卡片欄，可容納 card  數量非常多。是瀑布流的排版方式，由上而下由左至右的新 CSS 排法。顯示可直接看 官網範例。

  • div.card-columns
    • div.card
    • div.card
    • div.card

Carousel

輪播插件，其結構：

  • div.carousel[id=”carouselExample”][data-ride=”carousel”]
    • ol.carousel-indicators
      • li.active[data-target=”#carouselExample”][data-slide-to=”0″]
      • li[data-target=”#carouselExample”][data-slide-to=”1″]
      • li[data-target=”#carouselExample”][data-slide-to=”2″]
    • div.carousel-inner
      • div.carousel-item.active
        • img
      • div.carousel-item
        • img
      • div.carousel-item
        • img
    • a.carousel-control-prev[href=”#carouselExample”][role=”button”][data-slide=”prev”]
      • span.carousel-control-prev-icon[aria-hidden=”true”]
      • span.sr-only{Previous}
    • a.carousel-control-next[href=”#carouselExample”][role=”button”][data-slide=”next”]
      • span.carousel-control-next-icon[aria-hidden=”true”]
      • span.sr-only{Next}

這樣會是三個在輪播，有往前往後箭頭，下方還有底線的指標
(這兩個要記得需要外層 .carouse 的元素 #id 做 data-target、href 屬性搭配)

包含字幕的話加上 .carousel-caption

  • div.carousel-item
    • img
    • div.carousel-caption.d-none.d-md-block
      • h5{…}
      • p{…}

Collapse

折疊 JavaScript 套件，有三個狀態 (用 javaScript 作切換)：

  • .collapse：隱藏套件
  • .callapsing：套用轉換中的動態效果
  • .callapse.show：顯示內容

連結要使用 href 屬性指定 .collapse 元素的 id，按鈕則是 data-target 屬性。而 data-toggle=”callapse” 則都需要設置。

  • a[data-toggle=”collapse”][href=”#collapseExample”]
  • button[data-toggle=”collapse”][data-target=”#collapseExample”]
  • div.collapse[id=”collapseExample”]
    • div.card.card-body

也可指定 .collapse 元素的 class，就可一次折疊多個

口風琴折疊

要注意一個 data-parent=”#accordion” 指向最父層，就可以一次只能顯示一個了。

以下是 bootstrap 官網範例：

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>
   
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Dropdowns

下拉選單的 JavaScript 套件，按鈕觸發隱藏選單

  • 可在 .dropdown 元素加上 .dropup 使其向上展開選單，空間不夠會自動切換向上或向下

結構 1

  • div.dropdown (定位使用)
    • button.dropdown-toggle[data-toggle=”dropdown”]{Action}
    • div.dropdown-menu
      • h6.dropdown-header{Dropdown header}
      • a.dropdown-item[#]
      • a.dropdown-item[#]
      • a.dropdown-item[#]
      • a.dropdown-divider (分隔線)
      • a.dropdown-item[#]

結構 2

  • div.btn-group
    • button{Action}
    • button.dropdown-toggle.dropdown-toggle-split[data-toggle=”dropdown”]
    • div.dropdown-menu
      • h6.dropdown-header{Dropdown header}
      • a.dropdown-item[#]
      • a.dropdown-item[#]
      • a.dropdown-item[#]
      • a.dropdown-divider
      • a.dropdown-item[#]

這樣箭頭會比較有協調與平均，寬度不會太寬

結構 3

可客製化內容，沒要求你一定要用選單

  • div.dropdown-menu
    • form.px-4.py-3
      • div.form-group
        • …
      • div.form-group
        • …
      • button[type=”submit”]
    • div.dropdown-divider
    • a.dropdown-item[#]
    • a.dropdown-item[#]

Form

  • class 應該要套在哪一個標籤上
  • HTML5 表單觀念

基本結構

  • form
    • div.form-group (包 input，調整間距)
      • label
      • input.form-control (or select 元素上)
      • small.form-text (調整間距)
    • div.form-check (要 disabled 建議也加 class=”disabled” 在這裡，就可文字也呈現灰色 )
      • label.form-check-label (沒有 for 屬性，且包住 input)
        • input.form-check-label[check]
    • div.form-group
      • label
      • select.form-control[multiple]
        • option{1}
        • option{2}
        • option{3}
        • option{4}
        • option{5}
    • div.form-group
      • label
      • textarea.form-control

上述範例僅 checkbox 元素是使用 .form-check

  • 可用 .form-control-{sizes}，來做不同的表單控制項的尺寸
    • .form-control-sm
    • .form-control
    • .form-control-lg
  • 只能讀不能修改，加 readonly 在 input 的屬性上
  • checkbox、radio 想要水平排列，可在 .form-check 元素上加 .form-check-inline
  • 有運用 grid，可用 .form-row 用來取代 .row，gutter 會拉小
    • div.form-row
      • div.form-group.col-md-6
      • div.form-group.col-md-6
  • 有運用做 grid，可用 .col-form-label 使其排版正確 (以下範例 label 字會置中)
    •  div.form-group
      • label.col-sm-2.col-form-label (.col-form-label 使其排版正確)
      • div.col-sm-10
        • input.form-control
  •  可在 form 元素套上 .form-inline 成為行內表單，變成水平一排，
    • 將標籤轉為 flex 的屬性，裡面的屬性必要時用 utilities 的 spacing 做調整
    • form.form-inline
      • input.form-control
      • div.input-group
        • div.input-group-addon{@}
        • input.form-control
      • div.form-check
        • label.form-check-label
          • input.form-check-input[type=”checkbox”]
      • button[type=”submit”]
  • disabled 屬性可加表單元素或外層做整個 disable
  • 自訂樣式
    • label.custom-control.custom-checkbox
      • input.custom-control-input[type=”checkbox”]
      • span.custom-control-indicator
      • span.custom-control-description{Check this custom checkout}
    • label.custom-control.custom-radio
      • input.custom-control-input[type=”radio”]
      • span.custom-control-indicator
      • span.custom-control-description{Check this custom radio}

表單驗證

  • 分 server 驗證與 client 驗證
  • client 使用偽元素 :invalid 與 :valid 來做驗證樣式，分別是紅色與綠色
  • server 則使用 class 手動加入 .is-invalid 與 .is-valid 來替換上面那兩個偽元素
  • .invalid-feedback 用來作錯誤回饋用的區塊 class
  • form 要配 id 以及加上  novalidate 的屬性，代表該表單未驗證，這樣未驗證 .invalid-feedback 的區塊內文字不會顯示
  • 要驗證的元素一定要加 required 屬性，否則驗證失敗樣式結果是呈現綠色的
  • 啟用瀏覽器驗證用 bootstrap 官網的範例就可以使用了
<form id="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
   
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
   
  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  }, false);
})();
</script>

 

Input group

與 button group 很，for input 標籤用，但多了一個 .input-group-prepend class 可作為文字或輸入標籤用的組合項目。效果可看 bootstrap 官方文件

結構：

  • div.input-group
    • div.input-group-prepend
      • span.input-group-text
      • (and | or)
      • div.input-group-text
        • input[type=”checkbox”]
    • input.form-control

可在 .input-group 加上不同尺寸

  • .input-group-sm
  • .input-group-lg

可使用 dropdown

  • div.input-group
    • div.input-group-prepend
      • button.dropdown-toggle[data-toggle=”dropdown”]
      • div.dropdown-menu
        • a.dropdown-item
        • a.dropdown-item
        • a.dropdown-item
    • input.form-control

Jumbotron

廣告大屏幕，大塊的關鍵行銷區域看板

  • div.jumbotron
    • h1.display-3
    • p.lead
    • hr.my-4
    • p
    • p.lead
      • a.btn.btn-primary.btn-lg[#]

不要有圓角，則在 .jumbotron 元素加上 .jumbotron-fluid，寬度也會更為寬廣一點

List group

列表清單群組

結構 1

  • ul.list-group
    • li.list-group-item.active
    • li.list-group-item.disabled
    • li.list-group-item
    • li.list-group-item
    • li.list-group-item

結構 2

結構 1 就不能夠點擊了，需要點擊可用下面結構，.list-group-item-action 類別使其有 hover 效果

  • div.list-group
    • a.list-group-item.list-group-item-action.active
      • 不僅純放文字，可放自訂內容結構
    • a.list-group-item.list-group-item-action.disabled
    • a.list-group-item.list-group-item-action
    • a.list-group-item.list-group-item-action
    • a.list-group-item.list-group-item-action

.list-group-item 元素也可以是 <button>

在 .list-group-item 元素加入 .list-group-item-{color} 可替換不同色彩

結構 3

可製作成 tab 化的列表群組與內容

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

tab-pane 是分頁的效果，裡面都有帶 id 來與 .list-group-item 的 a 元素 href 屬性作切換對應

Modal

互動視窗，是常用的元件 (從官網複製結構再調整最輕鬆)。以下是基本結構：

  • button[data-toggle=”modal”][data-target=”#exampleModal”]
  • div.modal.fade[id=”exampleModal”][tabindex=”-1″]
    • div.modal-dialog (可加入 .modal-sm or .modal-lg class 作尺寸的調整)
      • div.modal-content (要使用從這裡以下去做修改就好，不要修改外部的)
        • div.modal-header
          • h5.modal-title
        • div.modal-body
        • div.modal-footer
          • button[data-dismiss=”modal”] (modal 區塊外的灰色背景也可以 dismiss)

Navs

導覽元件，結構可使用 ul>li or nav>a：

  • ul.nav
    • li.nav-item
      • a.nav-link.active[#]
    • li.nav-item
      • a.nav-link[#]
    • li.nav-item
      • a.nav-link.disabled[#]
  • nav.nav
    • a.nav-link.active[#]
    • a.nav-link[#]
    • a.nav-link.disabled[#]

可使用 flex 改變它的排版方式，e.g. .nav 加上 .justify-content-end 等

.nav 元素可加上 .nav-tab 或 .nav-pills 改變樣式

JavaScript 可調整成頁籤切換功能 (也可換 pills 模式)：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Navbar

也是使用率非常高，一般是 .navbar 加上 .navbar-{color} 與 bg-{color} 作搭配，以下是基本結構：

  • nav.navbar.navbar-light.bg-light
    • a.navbar-brand[#] (連結或品牌)
    • (or)
    • span.navbar-brand (品牌)

.navbar 元素可加上 .navbar-expand-{sm or lg}，該指定尺寸以上會顯示出來，其他是隱藏

漢堡選單：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  • 如果要加入表單記得加入 .form-inline
  • 可用 fixed-top、fix-bottom、sticky-top 作 navbar 不同定位

Pagination

分頁結構，從 nav 標籤開始，內層的 ul 才加上 .pagination class，其結構：

  • nav
    • ul.pagination
      • li.page-item
        • a.page-link[aria-label=”previous”][#]
          • span[aria-idden=”true”]{<}
          • span.sr-only{Previous}
      • li.page-item.active
        • a.page-link[#]{1}
      • li.page-item
        • a.page-link[#]{2}
      • li.page-item.disabled[tabindex=”-1″]
        • a.page-link[#]{3}
      • li.page-item
        • a.page-link[aria-label=”Next”][#]
          • span[aria-idden=”true”]{>}
          • span.sr-only{Next}

 

  • .pagination 元素可加上不同尺寸 .pagination-sm or .pagination-lg
  • 可用 flex 屬性方式排版

Popovers

彈出提示框，JavaScript 插件，啟用要一段 script 作啟用 (因為消耗效能)，針對大量訊息

$(function () {
  $('[data-toggle="popover"]').popover()
})

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

可加上 data-trigger=”focus” 屬性以便用戶下一次點擊移除彈出提示框

Tooltips

工具提示框，JavaScript 插件，啟用要一段 script 作啟用 (因為消耗效能)，針對小量訊息

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Scrollspy

滾動監控，data-spy=”scroll” 屬性，滑動特定區域相應的 nav-item 項目會隨之 active 狀態。

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Progress

進度條元件，基本元件

  • div.progress
    • div.progress-bar[style=”width: 25%”]{25%}

.progress-bar 元素可透過加入 .bg-{color} 調整色彩

.progress-bar 元素可多個，做一條進度條的堆疊

.progress-bar 元素可透過加入 .progress-bar-striped 變成斜線條紋的樣式

.progress-bar 元素可透過加入 .progress-bar-animated 變成動態斜線條紋的樣式 (挺消耗 CPU 資源，要注意)

 

以上說明了 Bootstrap v4 Components 官網的所有文件，有很多細部的設定這裡沒有概括介紹到，就麻煩各位參照官網作對照囉！

 

參考資料：

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。