溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Bootstrap中如何實現加載效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Bootstrap中如何實現加載效果”吧！
使用Bootstrap讀取圖標以表示元件加載狀態，這些讀取圖標完全使用HTML，CSS，而沒有使用到JavaScript。它們的外觀、對齊以及尺寸都可以通過通用類來自定義,但您仍需要客制JavaScript來切換它們的顯示狀況。
下面是一個簡單的讀取圖標
<!doctype html> <html> <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>讀取圖標</title> </head> <body> <div> <br><br><br><br> <div role="status"> <span>Loading...</span> </div> </div> </body> </html>
邊框讀取圖標使用currentColor來當作它的border-color，這代表你可以使用文字顏色通用類別來自定義它的顏色。你可以在標準的讀取圖標上使用任何通用類別中的顏色。
<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>
如果你不喜歡邊框讀取圖標，可以切換到漸變讀取圖標。雖然技術上來說，它不會旋轉，但它會反復漸變顯示！ 漸變圖標也支持不同的顏色。
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
同上，這個讀取圖標也使用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>
使用margin utilities像m-5一樣簡單地增加間隔。
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
使用flexbox通用類別、float通用類別，或是文字排版在任何情況下都可以將讀取圖標精確地放置在您需要的位置上。
5.1 Flex
以下是居中對齊
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
靠右對齊
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
5.2 Float
浮動實現靠右對齊
<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 文本通用類
文本通用類實現居中對齊
<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
增加spinner-border-sm和spinner-grow-sm制作一個較小的讀取圖標，讓它可以在其他元件中快速地被使用。
<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>
顯示較大的圖標
<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>
在按鈕內使用讀取圖標是表示當前正在處理或正在進行操作。您也可以依照需求使用button text來更換讀取圖標的文字。
<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>
<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>
感謝各位的閱讀，以上就是“Bootstrap中如何實現加載效果”的內容了，經過本文的學習后，相信大家對Bootstrap中如何實現加載效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
