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