Bootstrap 進度條
阿新 • • 發佈：2019-02-16
進度條
Bootstrap提供了多種漂亮的進度條，可以使用進度條來表示載入、跳轉等正在執行中的狀態。進度條本身只是一個靜態元素，要讓它擁有互動能力，還需要JavaScript程式碼的配合。
基本進度條
進度條由巢狀的兩層結構定義：外層結構用於建立進度條的容器，使用 .progress 類定義；內層結構用於建立進度條，使用 .bar 類定義，並通過CSS的 width 屬性值來設定進度的百分比。如：
<divclass="progress"><divclass="bar"style="width:60%;"></div></div>
預設情況下，進度條容器的背景為淺灰色，進度條本身為藍色，並帶有垂直漸變。效果如圖 4‑56所示：
圖4-56 Bootstrap進度條元件關於作者
歪脖先生，十五年以上軟體開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2使用者指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。