Bootstrap 《基礎二十六》進度條

2021-09-22 20:29:22 字數 2573 閱讀 2849

原文:

bootstrap 《基礎二十六》進度條

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

讓我們看看下面的例項:

aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

40% 完成

結果如下所示:

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

讓我們看看下面的例項:

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 90%;">

90% 完成(成功)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 30%;">

30% 完成(資訊)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">

20% 完成(警告)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 10%;">

10% 完成(危險)

結果如下所示:

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

讓我們看看下面的例項:

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 90%;">

90% 完成(成功)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 30%;">

30% 完成(資訊)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">

20% 完成(警告)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 10%;">

10% 完成(危險)

結果如下所示:

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

這將會使條紋具有從右向左的運動感。

讓我們看看下面的例項:

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 40%;">

40% 完成

結果如下所示:

您甚至可以堆疊多個進度條。把多個進度條放在相同的.progress中即可實現堆疊,如下面的例項所示:

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 40%;">

40% 完成

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 30%;">

30% 完成(資訊)

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">

20% 完成(警告)

結果如下所示:

系列文章:

bootstrap 《基礎一》 css 概覽

bootstrap《基礎二》網路系統

bootstrap《基礎三》排版

bootstrap《基礎四》 **

bootstrap 《基礎五》**

bootstrap《基礎六》 表單

bootstrap 《基礎七》按鈕

bootstrap 《基礎八》

bootstrap《基礎九》輔助類

bootstrap《基礎十》 響應式實用工具

bootstrap《基礎十一》字型圖示(glyphicons)

bootstrap 《基礎十二》下拉列表(dropdowns)

bootstrap《基礎十三》 按鈕組

bootstrap《基礎十四》 按鈕下拉列表

bootstrap《基礎十五》 輸入框組

bootstrap《基礎十六》 導航元素

bootstrap《基礎十七》導航欄

bootstrap 《基礎十八》麵包屑導航(breadcrumbs)

bootstrap 《基礎十九》分頁

bootstrap《基礎二十》 標籤

bootstrap 《基礎二十一》徽章(badges)

bootstrap 《基礎二十二》超大螢幕(jumbotron)

bootstrap 《基礎二十三》頁面標題(page header)

bootstrap《基礎二十四》 縮圖

bootstrap 《基礎二十五》警告(alerts)

bootstrap 《基礎二十六》進度條

Java基礎語法(二十六)

1.程序概念 2.執行緒的概念 3.深入執行緒概念 5.執行緒的執行模式 大部分作業系統都支援多程序併發執行,現在的作業系統幾乎都支援同時執行多個程式。比如 現在我們上課一邊使用編輯器,一邊使用錄屏軟體,同時還開著畫圖板,dos視窗等軟體。此時,這些程式是在同時執行,感覺這些軟體好像在同一時刻執行著...

二十六 shell基礎與變數

今日內容 shell 基礎 1 介紹 2 變數 3 引導變數shell是一門程式語言,用來解釋執行這門程式設計語法的直譯器 計算機體系結構控制流程 命令 shell直譯器 系統呼叫介面 核心 計算機硬體1 先啟動bash直譯器 2 bash直譯器會把a.sh的內容從硬碟度入內容 3 bash直譯器會...

二十六 遮蔽中斷

1.6410和210採用向量中斷,由硬體執行。有兩組中斷源,相應的控制暫存器也有多個 2.6410和210使能和遮蔽是分開的暫存器 3.遮蔽控制暫存器的讀寫操作從而遮蔽中斷,都是寫入全1 4.6410的 遮蔽中斷,要操作兩個暫存器,目的是將使能中斷暫存器的相關位清除 define vic0inten...