前面的話
在網(wǎng)頁中,進(jìn)度條的效果并不少見,比如一個(gè)評分系統(tǒng),比如加載狀態(tài)等,通過簡單、靈活的進(jìn)度條,可以為當(dāng)前工作流程或動作提供實(shí)時(shí)反饋。本文將詳細(xì)介紹Bootstrap進(jìn)度條
基本樣式
Bootstrap框架中對于進(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)度
網(wǎng)友評論