此款進度條實現的功能:
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顯示綠色
實現進度條暫停、停止、重新開始、繼續功能
具體**如下:
12 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的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說,相容性 多,工作量大,對瀏覽器來說,載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...