Bootstrap - 開發者您好

歡迎，有抱負的網頁開發者！今天，我們將進入Bootstrap動畫指示器的精彩世界。作為您親切友善的鄰居電腦老師，我在這裡為您指導這個旅程，一步步來。所以，拿起您最喜歡的飲料，放鬆身心，讓我們一起進行這個教程！

工作原理

Bootstrap中的動畫指示器用於在您的網頁應用程序中指示加載狀態。它們就像您在網站加載內容時看到的那些小旋轉圈。這些小巧的組件通過提供視覺反饋來改善用戶體驗，讓用戶知道背後有事情正在發生。

Bootstrap動畫指示器是使用HTML、CSS以及一點JavaScript魔法构建的。它們使用自定義的CSS來創建旋轉動畫，確保在不同瀏覽器和設備上都有平滑且一致的顯示效果。

邊框動畫指示器

讓我們從最基礎的動畫指示器開始：邊框動畫指示器。這是Bootstrap的默認動畫指示器風格。

<div class="spinner-border" role="status">
<span class="visually-hidden">加載中...</span>
</div>

在這個例子中，我們有一個帶有兩個類的div元素：spinner-border和role="status"。spinner-border類應用旋轉動畫，而role="status"幫助屏幕閱讀器理解這是一個狀態指示器。

在div內部，我們有一個帶有visually-hidden類的span。這段文字在屏幕上不可見，但可以被屏幕閱讀器讀取，為視覺障礙用戶提高了無障礙性。

顏色

就像變色龍改變顏色一樣，我們的動畫指示器也可以適應不同的主題！Bootstrap讓您可以使用文字顏色工具来自定义動畫指示器的顏色。

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">加載中...</span>
</div>

這個例子中的每個動畫指示器都有一個像text-primary、text-secondary等的附加類。這些類會改變動畫指示器的顏色，以匹配Bootstrap的顏色方案。

擴展動畫指示器

如果邊框動畫指示器不是您的菜，Bootstrap還提供了另一種風味：擴展動畫指示器。這種動畫指示器會進行擴展和縮小，而不是旋轉。

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

結構與邊框動畫指示器相似，但我們使用spinner-grow類而不是spinner-border。

對齊

使用Bootstrap的flexbox工具，對齊動畫指示器就像派一樣簡單。讓我們看一些例子：

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">加載中...</span>
</div>
</div>

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

在第一個例子中，我們使用justify-content-center將動畫指示器水平居中。在第二個例子中，我們使用align-items-center將動畫指示器與文字垂直對齊。

邊距

需要在動畫指示器周圍留出一些空間？Bootstrap的邊距工具來幫忙！

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

m-5類在動畫指示器所有側邊添加了大小為5（通常是3rem）的邊距。

位置

動畫指示器可以放置在多種其他元素內部。這是您如何在按鈕內放置動畫指示器的方法：

<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">加載中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
加載中...
</button>

在這些例子中，我們將動畫指示器放入按鈕內，並使用spinner-border-sm使其變小。

Flex

Flexbox工具可以帮助您使用動畫指示器創建更複雜的佈局：

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">加載中...</span>
</div>
</div>

這會將動畫指示器在其容器中水平居中。

浮動

當您需要動畫指示器浮動時，Bootstrap的浮動工具來幫忙：

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

float-end類使動畫指示器在其容器的右侧浮動。

文字對齊

文字對齊工具也可以與動畫指示器一起使用：

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

這使用文字對齊將動畫指示器在其容器中居中。

大小

有時，大小真的很重要！您可以使用Bootstrap的大小類調整動畫指示器的大小：

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">加載中...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">加載中...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">加載中...</span>
</div>

使用spinner-border-sm或spinner-grow-sm來創建小型的動畫指示器。對於自定義大小，您可以使用內聯樣式來設置特定的維度。

按鈕

最後但同樣重要的是，讓我們看看如何在按鈕中使用動畫指示器：

<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">加載中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
加載中...
</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">加載中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
加載中...
</button>

這些例子展示了如何將邊框和擴展動畫指示器整合到按鈕中，有無文字陪伴。

現在，各位，您已經成為Bootstrap動畫指示器的專家了。記住，熟能生巧，所以不要害怕在您的项目中嘗試這些組件。開心編程，願您的網頁永遠以風格旋轉！

方法	描述
spinner-border	創建一個旋轉的邊框動畫指示器
spinner-grow	創建一個擴展和縮小的動畫指示器
text-[color]	改變動畫指示器的顏色（例如：text-primary, text-secondary）
spinner-border-sm	創建一個小型的邊框動畫指示器
spinner-grow-sm	創建一個小型的擴展動畫指示器
m-[size]	在動畫指示器周圍添加邊距（例如：m-5）
d-flex	創建一個flexbox容器
justify-content-center	在flexbox容器中水平居中內容
align-items-center	在flexbox容器中垂直居中內容
float-[direction]	浮動動畫指示器（例如：float-end）
text-center	使用文字對齊來居中動畫指示器
visually-hidden	視覺上隱藏內容，但對屏幕閱讀器可見

Credits: Image by storyset