Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

青灯夜游

Dec 10, 2021 pm 07:18 PM

bootstrap

Bootstrap中怎麼實作載入效果？以下這篇文章就來跟大家介紹Bootstrap5讀取圖示（Spinners）元件的用法，看看怎麼讀取圖示來表示元件載入狀態，希望對大家有幫助！

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

1 簡單的讀取圖示

使用Bootstrap讀取圖示以表示元件載入狀態，這些讀取圖示完全使用HTML，CSS，而沒有使用到JavaScript。它們的外觀、對齊以及尺寸都可以透過通用類別來自訂,但您仍需要客製JavaScript來切換它們的顯示狀況。【相關推薦：《bootstrap教學》】

下面是一個簡單的讀取圖示

<!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>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

2 顏色

邊框讀取圖示使用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>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

3 漸層讀取圖示

如果你不喜歡邊框讀取圖標，可以切換到漸變讀取圖標。雖然技術上來說，它不會旋轉，但它會反覆漸變顯示！漸層圖示也支援不同的顏色。

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

同上，這個讀取圖示也使用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>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

4 邊距

使用margin utilities像m-5一樣簡單地增加間隔。

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

5 對齊方式

使用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>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

##靠右對準

<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

5.2 Float

浮動實作靠右對準

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

##5.3 文字通用類別 Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

文字通用類別實作置中對齊

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

6 大小

增加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>

1Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件

#7 按鈕

1Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件 #在按鈕內使用讀取取圖示是表示目前正在處理或正在進行操作。您也可以依照需求使用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基礎教學###！！ ###

以上是Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

了解響應式網絡設計的引導網格系統May 14, 2025 am 12:07 AM

Bootstrap'SgridSemiteStemfiveDuetoIts12-columnlayOutAndResponsiveClasses，允許ForfforFlexibleanDmaintabainbabledesignsignsigns.toleverations.toleveration：1）userowsandcolumnswithclasseslikecol-md，col sm，col-lggfordforentscreenscreenscreens.2）

Bootstrap網格系統：響應迅速佈局的綜合指南May 13, 2025 pm 04:17 PM

BootstrapGridSemessentialForCreatingResponsivElayouts.1）ItuseScontainers，行，和ColumnSbasedona12-ColumnLaylayOut.2）cssflexboxandMediaqueriesensEnsureflexibilityAcrossscreenscreensacribilityAcrosscreensacrizes.3）classLikeCol-XSSLLIKECOL-XSSLIKECOL-XM，COLIKECOL-XM，COL-SM，COLCHANGCHANGCHANGCHENSCHENTCHESCHEN.4）

Bootstrap：所解釋的應用和優勢May 10, 2025 am 12:18 AM

Bootstrap是一個前端框架，用於快速構建響應式網站。其優勢包括：1.快速開發：利用預定義樣式和組件。 2.一致性：提供統一設計風格。 3.響應式設計：內置網格系統適應各種設備。通過CSS類和JavaScript插件，Bootstrap簡化了網頁開發過程。

Bootstrap：簡化響應式Web開發May 09, 2025 am 12:13 AM

Bootstrap簡化開發流程主要通過其柵格系統、預定義組件和JavaScript插件。 1.柵格系統允許靈活佈局，2.預定義組件如按鈕和導航欄簡化樣式設計，3.JavaScript插件增強交互功能，提升開發效率。

Bootstrap：響應式Web設計的關鍵May 08, 2025 am 12:24 AM

Bootstrap是由Twitter開發的開源前端框架，提供了豐富的CSS和JavaScript組件，簡化了響應式網站的構建。 1)其網格系統基於12列佈局，通過類名控制元素在不同屏幕尺寸下的顯示。 2)組件庫包括按鈕、導航欄等，易於定制和使用。 3)工作原理依賴於CSS和JavaScript文件，需注意處理依賴關係和样式衝突。 4)使用示例展示了基本和高級用法，強調了自定義功能的重要性。 5)常見錯誤包括網格系統計算錯誤和样式覆蓋，需使用開發者工具調試。 6)性能優化建議只引入必要組件，使用預處理器定製樣

Bootstrap：一個強大的Web設計框架May 07, 2025 am 12:05 AM

Bootstrap是一個開源的前端框架，由Twitter團隊開發，旨在簡化和加速網頁開發過程。 1.Bootstrap基於HTML、CSS和JavaScript，提供了豐富的組件和工具，用於創建現代化的用戶界面。 2.它的核心在於響應式設計，通過預定義的類和組件實現各種佈局和样式。 3.Bootstrap提供了預定義的UI組件，如導航欄、按鈕、表單等，易於使用和調整。 4.使用示例包括創建簡單的導航欄和高級的可折疊側邊欄。 5.常見錯誤包括版本衝突、CSS覆蓋和JavaScript錯誤，可通過版本管理工具

Bootstrap在React中的力量：詳細的外觀May 06, 2025 am 12:06 AM

Bootstrap在React中可以通過兩種方式集成：1)使用Bootstrap的CSS和JavaScript文件；2)使用React-Bootstrap庫。 React-Bootstrap提供了封裝好的React組件，使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap組件：逐步教程May 05, 2025 am 12:09 AM

在React項目中使用Bootstrap組件可以通過兩種方式：1)使用原始Bootstrap的CSS和JavaScript；2)使用專門為React設計的庫如react-bootstrap或reactstrap。 1)通過npm安裝Bootstrap並在入口文件中引入其CSS文件，然後在React組件中使用Bootstrap類名。 2)安裝react-bootstrap或reactstrap後，直接使用其提供的React組件。使用這些方法可以快速構建響應式UI，但需注意樣式加載、JavaScript

See all articles