Bootstrap 進度條特效

2021-09-10 15:55:02 字數 1235 閱讀 1786

@

@*預設的進度條*@

@*建立乙個基本的進度條的步驟如下:

新增乙個帶有 class .progress 的 。

接著,在上面的 內,新增乙個帶有 class .progress-bar 的空的 。

新增乙個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。*@

40% 完成

@*交替的進度條*@

@*建立不同樣式的進度條的步驟如下:

新增乙個帶有 class .progress 的 。

接著,在上面的 內,新增乙個帶有 class .progress-bar 和 class progress-bar-* 的空的 。其中,* 可以是 success、info、warning、danger。

新增乙個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。*@

90% 完成(成功)

30% 完成(資訊)

20% 完成(警告)

10% 完成(危險)

@*條紋的進度條*@

@*建立乙個條紋的進度條的步驟如下:

新增乙個帶有 class .progress 和 .progress-striped 的 。

接著,在上面的 內,新增乙個帶有 class .progress-bar 和 class progress-bar-* 的空的 。其中,* 可以是 success、info、warning、danger。

新增乙個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。*@

90% 完成(成功)

30% 完成(資訊)

20% 完成(警告)

10% 完成(危險)

@*動畫的進度條*@

@*建立乙個動畫的進度條的步驟如下:

新增乙個帶有 class .progress 和 .progress-striped 的 。同時新增 class .active。

接著,在上面的 內,新增乙個帶有 class .progress-bar 的空的 。

新增乙個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。*@

40% 完成

@*堆疊的進度條*@

40% 完成

30% 完成(資訊)

20% 完成(警告)

bootstrap 進度條樣式

bootstrap為我們提供具有漂亮樣式的進度條來表示乙個事務的進度,如下 實現方法如下 1 引入bootrap檔案,html view plain copy link rel stylesheet href libs bootstrap 3.3.7 css bootstrap.css 2 新增乙個...

Bootstrap 各種進度條詳解

建立乙個基本的進度條的步驟如下 讓我們看看下面的例項 40 完成 結果如下所示 建立不同樣式的進度條的步驟如下 讓我們看看下面的例項 90 完成 成功 30 完成 資訊 20 完成 警告 10 完成 危險 結果如下所示 建立乙個條紋的進度條的步驟如下 讓我們看看下面的例項 90 完成 成功 30 完...

Bootstrap中進度條樣式詳解

最簡單的進度條需要幾行 在bootstrap中,只需要兩句。class progress class progress bar style width 60 div div 不考慮 規範的話,class progress class progress bar style width 60 div d...