Dokumentáció és példák a Bootstrap egyéni folyamatjelző sávjainak használatához, amelyek támogatják a halmozott sávokat, animált háttereket és szöveges címkéket.
Hogyan működik
A folyamat összetevői két HTML-elemből, néhány CSS-ből a szélesség beállításához és néhány attribútummal épülnek fel. Nem használjuk a HTML5 <progress>
elemet , ami biztosítja, hogy a folyamatjelző sávok egymásra halmozódjanak, animálhatók, és szöveges címkéket helyezzen el rájuk.
Használjuk .progress
burkolóként a folyamatjelző sáv maximális értékének jelzésére.
A belsőt használjuk az .progress-bar
eddigi előrehaladás jelzésére.
A .progress-bar
szélességének beállításához soron belüli stílusra, segédprogramosztályra vagy egyéni CSS-re van szükség.
A hozzáféréshez .progress-bar
néhány role
és aria
attribútumra is szükség van.
Ha mindezt összerakja, a következő példákat láthatja.
Másolat
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
A Bootstrap néhány segédprogramot biztosít a szélesség beállításához . Igényeitől függően ezek segíthetnek a haladás gyors konfigurálásában.
Másolat
<div class= "progress" >
<div class= "progress-bar w-75" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Címkék
Adjon hozzá címkéket a folyamatjelző sávokhoz úgy, hogy szöveget helyez el a .progress-bar
.
Másolat
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" > 25%</div>
</div>
Magasság
Csak height
értéket adunk meg a -n .progress
, így ha megváltoztatja ezt az értéket, a belső .progress-bar
automatikusan ennek megfelelően átméreteződik.
Másolat
<div class= "progress" style= "height: 1px;" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" style= "height: 20px;" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Hátterek
A háttérben használható segédprogramok segítségével módosíthatja az egyes folyamatjelző sávok megjelenését.
Másolat
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Több sáv
Ha szükséges, adjon meg több folyamatjelző sávot egy folyamatösszetevőben.
Másolat
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 15%" aria-valuenow= "15" aria-valuemin= "0" aria-valuemax= "100" ></div>
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 30%" aria-valuenow= "30" aria-valuemin= "0" aria-valuemax= "100" ></div>
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 20%" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Csíkos
Bármelyikhez hozzáadva csíkot .progress-bar-striped
alkalmazhat .progress-bar
a folyamatjelző sáv háttérszíne feletti CSS-gradiensen keresztül.
Másolat
<div class= "progress" >
<div class= "progress-bar progress-bar-striped" role= "progressbar" style= "width: 10%" aria-valuenow= "10" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-success" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-warning" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-danger" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Animált csíkok
A csíkos színátmenet animálható is. Add .progress-bar-animated
to .progress-bar
, hogy a csíkokat jobbról balra animálja CSS3 animációkon keresztül.
Másolat
<div class= "progress" >
<div class= "progress-bar progress-bar-striped progress-bar-animated" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" style= "width: 75%" ></div>
</div>