1.Alert警告提示框
將任意文本和一個可選的關閉按鈕組合在一起就能組成一個警告框，
常用提示框樣式：
<div role="alert">成功提示</div>
<div role="alert">訊息提示</div>
<div role="alert">警告提示</div>
<div role="alert">危險提示</div>
除此之外，還有如四種：
.alert-primary .alert-secondary .alert-light .alert-dark
每種提示框都是通過“.alert”類（必須設定）和一個特定意義的類（如 .alert-info）來實作的，
“role”屬性通常用于增強語意，對一些非標準的組件進行用途描述，便于其他輔助工具更好地判別當前元素的實際作用，
另外，還可以添加標題“alert”，如：<h3 >…</h3>
2.可關閉的提示框
如要為提示框添加關閉按鈕，則需要添加一個“.alert-dismissible”類，
同時，關閉按鈕設定“ data-dismiss="alert" ”屬性，
<!--定義警告提示框div，并增加“.alert-dismissible”類，還可以添加fade/show效果-->
<div role="alert">
<!-- 設定關閉按鈕“button”，定義“.close”類，并增加“data-dismiss”屬性 -->
<button type="button" data-dismiss="alert" aria-label="Close">
<!-- 定義關閉按鈕圖示,"x"必須使用物體字符(×)替換! -->
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
說明事項：
屬性“ aria-* ”主要用于輔助工具（如螢屏閱讀器）識別當前內容，便于其判斷是否將當前內容輸出視覺效果或聲音效果，
aria-hidden="true" 屬性，表示當前元素內容不需要螢屏識讀設備抓取，忽略跳過處理
aria-label="Close"屬性，表示對當前<button>的用途描述，輔助設備在識別內容時可以明確這個空間的意圖并輸出，
aria-label="Close"擴展：正常情況下，form表單的input組件都有對應的label，當input獲取到焦點時，
螢屏閱讀器會讀出對應label里的文本，但是如果沒有給輸入框設定label，
當其獲得焦點時，螢屏閱讀器會讀出aria-label屬性的值，aria-label不會在視覺上呈現效果，
除此之外，
也可以將關閉按鈕封裝為JavaScript觸發器進行呼叫，
通過“$().alert();”等方法觸發提示框關閉，該方法用于偵聽具有“ data-dismiss="alert" ”屬性的敲擊事件，
示例：$(".alert").alert("close");
3.警告框中的鏈接
通過給“.alert”元素包裹之中的鏈接（<a>標簽）定義“.alert-link”類，具有突出顯示匹配顏色鏈接，
示例：<div role="alert">
訊息提示，<a href="https://www.cnblogs.com/husa/p/#" >點擊查看</a>
</div>
4.Badge徽章
可以理解為用于突出顯示元素內容的文本樣式，
要設定元素的徽章樣式，類似 Alert樣式需要定義“.badge”和“.badge-* ”至少兩個類名，
① 基本樣式：
<h1>Example heading <span >New</span></h1>
<h2>Example heading <span >New</span></h2>
<h3>Example heading <span >New</span></h3>
<h4>Example heading <span >New</span></h4>
<h5>Example heading <span >New</span></h5>
<h6>Example heading <span >New</span></h6>
還有“badge-dark、badge-light”等，
② 按鈕或鏈接中添加徽章
將設定有“.badge”類的<span>標簽包裹在<button>標簽或<a>標簽中，
<button type="button" >
Profile <span >9</span>
<span >unread messages</span>
</button>
，用于為螢屏閱讀器（screen reader）添加描述文本，且不會顯示給正常使用者，
③ 藥丸徽章
在基本樣式的基礎上增加“badge-pill”（修飾類）樣式，示例如下：
<span >Danger</span>
④ 徽章鏈接
給<a>標簽賦予“.badge”類，使得超鏈接擁有徽章樣式，示例如下：
<a href="https://www.cnblogs.com/husa/p/#" >Success</a>
5.Breadcrumb面包屑（導航）
主要用于創建有層次結構的位置資訊，如選單、目錄、索引等，在用戶界面實作導航輔助，
實作面包屑的三個主要類：
breadcrumb，定義面包屑的區域
breadcrumb-item，定義面包屑的內容項
active，定義活動頁（當前頁）
注意：對于非活動頁通常需要嵌套<a>標簽進行跳轉鏈接，
構建面包屑導航的常用方式是使用“無序串列”，示例如下：
<ol aria-label="breadcrumb">
<li ><a href="https://www.cnblogs.com/husa/p/#">Home</a></li>
<li ><a href="https://www.cnblogs.com/husa/p/#">Library</a></li>
<li >Data</li>
</ol>
也可以不使用無序串列的方式，示例如下：
<nav aria-label="breadcrumb">
<a href="https://www.cnblogs.com/husa/p/#">Home</a>
<a href="https://www.cnblogs.com/husa/p/#">Library</a>
<a href="https://www.cnblogs.com/husa/p/#">Data</a>
<span >Bootstrap</span>
</nav>
其他說明：
<nav>標簽用于定義導航連接，作為標注一個導航連接的區域（不是必須使用），
還可以在<nav>中添加螢屏屬性，用于規定導航是否顯示，以適應不同設備螢屏需求，
6.Button按鈕
BootStrap通過“.btn”類和其他“.btn-*”特定意義的類定義了很多按鈕樣式
① 基本樣式
<button type="button" >Primary</button>
<button type="button" >Secondary</button>
<button type="button" >Success</button>
<button type="button" >Danger</button>
<button type="button" >Warning</button>
<button type="button" >Info</button>
<button type="button" >Light</button>
<button type="button" >Dark</button>
<button type="button" >Link</button>（鏈接樣式的按鈕）
② ".btn"類還可以應用在<a>和<input>標簽上，示例如下：
<a href="https://www.cnblogs.com/husa/p/#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="https://www.cnblogs.com/husa/p/Input">
<input type="submit" value="https://www.cnblogs.com/husa/p/Submit">
<input type="reset" value="https://www.cnblogs.com/husa/p/Reset">
③ 輪廓按鈕
與基本樣式不同的是，沒有內部背景顏色，而是突出了按鈕輪廓和字體樣式
類名的差異也是在特定類的名稱中加入了“outline”，示例如下：
<button type="button" >Success</button>
<button type="button" >Danger</button>
<button type="button" >Warning</button>
<button type="button" >Info</button>
④ 按鈕大小
“.btn-lg”（大尺寸按鈕）、“.btn-sm”（小尺寸按鈕）、“.btn-block”（全部寬度按鈕），示例如下：
<button type="button" >Large button</button>
<button type="button" >Small button</button>
<button type="button" >Large button</button>
⑤ 活動狀態和禁用狀態
“.active”，表示活動狀態，用于突出顯示按鈕被按下時的樣式
“.disable”，表示禁用狀態，按鈕無法點擊
<a href="https://www.cnblogs.com/husa/p/#" role="button" aria-pressed="true">Link</a>
<button type="button" disabled>Button</button>
<a href="https://www.cnblogs.com/husa/p/#" tabindex="-1" role="button" aria-disabled="true">Link</a>
說明事項：
“.disable”類與html中<button>的“disable”屬性效果相同，
所以對于<button>標簽添加“.disable”類和“disable”屬性都可以，
但是對于<a>標簽不支持“disable”屬性，因此只能使用“.disable”類的方式，
“tabindex”擴展：
用于設定鍵盤中的TAB鍵在控制元件中的移動順序，即焦點的順序，
把控制元件的tabIndex屬性設成1到32767某個值，就可以將其加入TAB鍵的序列中，
使用TAB鍵在網頁中切換時，焦點將按照tabIndex的屬性值從小到大的順序移動，
默認的tabIndex屬性值為 0 ，將排列在所有指定tabIndex的控制元件之后，
若tabIndex屬性為負值（如tabIndex="-1"），那么將被排除在TAB鍵的序列之外，
如果兩個控制元件的tabIndex屬性相同，則以控制元件在html代碼中出現的順序為準，
如果tabIndex屬性值使用-1時，onfocus與onblur事件仍會被啟動，
⑥ 復選框按鈕和單選按鈕
針對<input>標簽的“checkbox”和“radio”兩個屬性的按鈕樣式，
input type=“checkbox”時，示例：
<div data-toggle="buttons">
<label >
<input type="checkbox" checked> Checked
</label>
</div>
input type=“radio”時，示例：
<div data-toggle="buttons">
<label >
<input type="radio" name="options" id="option1" checked> Active
</label>
<label >
<input type="radio" name="options" id="option2"> Radio
</label>
<label >
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
注意：兩種樣式都是通過將<label>和<input>元素包裹在一個容器內，
然后給外層容器賦予 class類和 data-toggle屬性，實作 input按鈕（組）的轉換，
⑦ 按鈕組
多個按鈕包裹在一個容器中，形成按鈕拼接擺放的效果，
普通按鈕組（Button group），示例：
<!-- 按鈕組 div容器添加“.btn-group”類 -->
<div color: rgba(255, 0, 0, 1)">btn-group" role="group" aria-label="First group">
<!-- 按鈕 button元素定義 type型別等于“button”，添加“.btn”類和“btn-*”類 -->
<button type="button" >Left</button>
<button type="button" >Middle</button>
<button type="button" >Right</button>
</div>
按鈕工具列（Button toolbar），多個按鈕組封裝在一個容器中，示例：
<!--最外層 div容器賦予“.btn-toolbar”類，內部按鈕組的類樣式與單個按鈕組相同-->
<div toolbar" aria-label="Toolbar with button groups">
<!-- 按鈕組 div容器添加“.btn-group”類 -->
<div role="group" aria-label="First group">
<!-- 按鈕 button元素定義 type型別等于“button”，添加“.btn”類和“btn-*”類 -->
<button type="button" >Left</button>
<button type="button" >Middle</button>
<button type="button" >Right</button>
</div>
<div role="group" aria-label="Second group">
<button type="button" >Left</button>
<button type="button" >Right</button>
</div>
<div role="group" aria-label="Third group">
<button type="button" >Middle</button>
</div>
</div>
嵌套按鈕組（Nesting），將一個按鈕組包裹在另一個按鈕組內部，示例：
<!--外層按鈕組與一般按鈕組樣式相同-->
<div role="group" aria-label="Button group with nested dropdown">
<button type="button" >1</button>
<button type="button" >2</button>
<!-- 內部按鈕組由“按鈕組容器、下拉按鈕、下拉選單”三部分構成 -->
<div role="group">
<!-- 下來按鈕需要在一般按鈕的樣式基礎上，添加“.dropdown-toggle”類 -->
<button id="btnGroupDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<!-- 下拉選單由“下拉容器和下拉選項”兩部分構成 -->
<div aria-labelledby="btnGroupDrop1">
<a href="https://www.cnblogs.com/husa/p/#">Dropdown link</a>
<a href="https://www.cnblogs.com/husa/p/#">Dropdown link</a>
</div>
</div>
</div>
垂直按鈕組，
為按鈕組的外部容器添加“.btn-group-vertical”類，則按鈕組將垂直方向排列，
語法示例：
<div >
...
</div>
按鈕組大小，
按鈕組中的按鈕大小不需要針對具體某一個進行設定，只需要對按鈕組容器設定即可，
包括多個按鈕組嵌套，
示例：
<div role="group">...</div>
<div role="group">...</div>
<div role="group">...</div>
參考資料來源：BootStrap中文網（https://v3.bootcss.com/）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115776.html
標籤：Html/Css