前面的話
在網(wǎng)頁中,進(jìn)度條的效果并不少見,比如一個評分系統(tǒng),比如加載狀態(tài)等,通過簡單、靈活的進(jìn)度條,可以為當(dāng)前工作流程或動作提供實時反饋。本文將詳細(xì)介紹Bootstrap進(jìn)度條
基本樣式
Bootstrap框架中對于進(jìn)度條提供了一個基本樣式,一個100%寬度的背景色,然后一個高亮的顏色表示完成進(jìn)度。其實制作這樣的進(jìn)度條非常容易,一般是使用兩個容器,外容器具有一定的寬度,并且設(shè)置一個背景顏色,子元素設(shè)置一個寬度,比如完成度是30%(也就是父容器的寬度比例值),同時給其設(shè)置一個高亮的背景色
Bootstrap框架中也是按這樣的方式實現(xiàn)的,它提供了兩個容器,外容器使用“progress”樣式,子容器使用“progress-bar”樣式。其中progress用來設(shè)置進(jìn)度條的容器樣式,而progress-bar用于限制進(jìn)度條的進(jìn)度
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26