bootstrap與jQuery結合的動態進度條

2021-09-07 12:39:21 字數 660 閱讀 6550

此款進度條實現的功能:

1.利用了bootstrap的進度條元件。

a.在最外層的中加入class .progress,在裡層加入class .progress-bar從而實現基本的進度條。

b.在外層中加入class .progress-striped實現條紋進度條。

c.在內層加入class .progress-bar-danger/warning/info/success 從而實現紅色、黃色、藍色、綠色

d.在外層中加入class .active 實現動畫效果

2.利用jquery對進度條進度進行控制。

0-30時顯示紅色,30-60顯示黃色,60-90顯示綠色,90-100顯示綠色

實現進度條暫停、停止、重新開始、繼續功能

具體**如下:

1 

2 379 80 81 82 正在啟動,請稍後......

83

84

85 86 87 暫停

88 停止

89

90

91

92 93

Bootstrap與Foundation的區別

整體來說foundation比bootstrap略顯高大上一點,使用的都是比較新的技術,整體觀是以mofile first 移動優先 來考慮的。foundation 使用 border box 盒子模型 box model 即 它定義width 和 height時,border 和 padding是...

jquer多條件選擇

jquery 多條件選擇 1 id選擇 2 類選擇 3 元素選擇器 標籤 4 號選擇器 選擇html文件全部 5 多條件選擇器 5.1 通過元素名稱,id,class 三種組合查詢選擇 div.class id 5.2 有多個選擇條件是用逗號分開如 div.class id,input id.cla...

響應式布局與Bootstrap

bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說,相容性 多,工作量大,對瀏覽器來說,載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...