文章前提

Components 中 Alert , Badge , Breadcrumb

| 警報Alert |

CH7 54
課程練習下載
Bootstrap 路徑 :　Components / Alerts

  • 通常是在做訊息回饋
  • 不同顏色的訊息框，提供不同的訊息暗示
  • 當中 role 屬性，通常是為不方便的人士提供的功能。 目標可替換為 Bootstrap 提供的顏色們 ( primary 綠色 , secondary 深灰, success 綠色 , danger 紅色 , warning 黃色 , info 藍綠色 , light 淺灰 , dark 黑色 , white 白色 )

註 : aria-lable 網頁親和性的屬性 ( 網頁親和性是給視障朋友看的 )

<div class="alert alert-目標" role="alert">
  A simple primary alert—check it out!
</div>

Link color

  • 於 alert 中加入 .alert-link 可為連結添加更合適的顏色
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

透過 JavaScript 啟動解除警報

範例 , 中譯文件

  • 按下 alert 視窗的叉叉，視窗消失。 此效果為一次性行為。
  • 需先載入 Bootstrap JavaScript
  • .alert.alert-顏色 ，建立 alert 框架
  • 加入 alert 內容文字
  • 用 <button> 寫一個 dismiss button ( 解除按鈕 )，並在 .alert 的 class 裡加 .alert-dissmissiable
  • dismiss button ( 解除按鈕 ) 增加 Bootstrap 樣式可於 button 加入 .close
  • 在 dismiss button 加入 data 屬性
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
</button>
  • aria-lable 是為視障朋友提供的功能
  • 要以動態方式解除他們，可使用 .fade 和 .show
  • 在目標按鈕補上 data-dismiss="alert" 屬性
    • 解除用的按鈕加上 data-dismiss="alert" 屬性用來觸發 JavaScript 函式。請使用 <button> 元素，這可以在所有裝置上正常運行。

註 : role 屬性與 aria-lable 是為視障人士提供的功能 (無障礙網頁的一部分；像 Mac 有提供 VoiceOver 會朗讀螢幕項目的描述，即這些屬性的內容)

<div class="alert alert-warning alert-dismissible fade show" role="alert">  
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" 目標 aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

| 標籤 Badge |

CH7 55
Bootstrap 路徑 :　Components / Badge

Badge 外觀設定

基本架構
Bootstrap-Bage示意圖01

<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Bootstrap-Bage示意圖02

<button type="button" class="btn btn-primary">
  Notifications 
  <span class="badge badge-light">4</span>
</button>

加入下方 Class 修改標籤外觀

  • 目標，替換成 Bootstrap 的主題色們
<span class="badge badge-目標">Primary</span>

膠囊標籤 Pill badages

  • 使用 .badge-pill 使標籤四周更圓，像膠囊一樣
<span class="badge badge-pill badge-目標色">Primary</span>

標籤連結 Links

<a href="#" class="badge badge-目標色 ">Primary</a>

| 麵包屑 Breadcrumb |

CH7 56
課程練習下載
Bootstrap 路徑 :　Components / Breakcrumb

  • 可讓用戶了解目前在網頁的哪個位置
  • 是以 <ol> 包著 <li> 或 a 連結 的結構
  • 網頁親和性 : 由於麵包屑提供了導航功能，所以增加一個有意義的標籤，aria-label="breadcrumb"來描述 <nav> 元素的導航說明，以及應用 aria-current="page" 到此群組的最後一個項目，表示這是當前頁面。

方法一 | <ol> 包著 <li> |

  • Bootstrap 的外層通常代表著這個結構
    • 像 <ol class="breadcrumb"> 代表這是一個麵包屑的結構
  • 正在執行的頁面加入 .active
<ol class="breadcrumb">
    <li class="breadcrumb-item active">Home</li>
</ol>
  • 當出現兩個 li 時會出現中間斜線
    • 查看開發者工具可見，此斜線是用 ::before 產生的

Bootstrap-Breakcrumb示意圖01

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

方法二 | <ol> 包著 a 連結 |

  • 正在執行的頁面加入 .active
<nav class="breadcrumb" aria-lable="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <a href="#" class="breadcrumb-item">Library</a>
  <a href="#" class="breadcrumb-item active" aria-current="page">Data</a>
</nav>

資料來源

最後修改日期: 8 3 月, 2020

作者