《Bootstrap5零基礎(chǔ)到精通》 俺老劉原創(chuàng)，爭取每天更新一節(jié)。本來
29.1 簡單的讀取圖標(biāo)
使用Bootstrap讀取圖標(biāo)以表示元件加載狀態(tài)，這些讀取圖標(biāo)完全使用HTML，CSS，而沒有使用到JavaScript。它們的外觀、對齊以及尺寸都可以通過通用類來自定義,但您仍需要客制JavaScript來切換它們的顯示狀況。
下面是一個簡單的讀取圖標(biāo)
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>讀取圖標(biāo)</title>
</head>
<body>
<div class="container">
<br><br><br><br>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</body>
</html>
復(fù)制代碼29.2 顏色
邊框讀取圖標(biāo)使用currentColor來當(dāng)作它的border-color，這代表你可以使用文字顏色通用類別來自定義它的顏色。你可以在標(biāo)準(zhǔn)的讀取圖標(biāo)上使用任何通用類別中的顏色。
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼29.3 漸變讀取圖示
如果你不喜歡邊框讀取圖標(biāo)，可以切換到漸變讀取圖標(biāo)。雖然技術(shù)上來說，它不會旋轉(zhuǎn)，但它會反復(fù)漸變顯示！ 漸變圖標(biāo)也支持不同的顏色。
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼同上，這個讀取圖標(biāo)也使用currentColor，所以你可以輕易地使用文字顏色通用類別來改變它的外觀。這邊是藍色，以及它所支持的顏色變化。
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼29.4 邊距
使用margin utilities像m-5一樣簡單地增加間隔。
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼29.5 對齊方式
使用flexbox通用類別、float通用類別，或是文字排版在任何情況下都可以將讀取圖標(biāo)精確地放置在您需要的位置上。
29.5.1 Flex
以下是居中對齊
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
復(fù)制代碼靠右對齊
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
復(fù)制代碼29.5.2 Float
浮動實現(xiàn)靠右對齊
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
復(fù)制代碼29.5.3 文本通用類
文本通用類實現(xiàn)居中對齊
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
復(fù)制代碼29.6 大小
增加spinner-border-sm和spinner-grow-sm制作一個較小的讀取圖標(biāo)，讓它可以在其他元件中快速地被使用。
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼顯示較大的圖標(biāo)
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
復(fù)制代碼29.7 按鈕
在按鈕內(nèi)使用讀取圖標(biāo)是表示當(dāng)前正在處理或正在進行操作。您也可以依照需求使用button text來更換讀取圖標(biāo)的文字。
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
復(fù)制代碼<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
復(fù)制代碼今天的課程就到這里。請關(guān)注我，及時學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第30節(jié) Bootstrap5進度條Progress組件用法。
如果這篇文章對你有幫助，記得隨手點贊哦！