Dokumentācija un piemēri Bootstrap pielāgoto norises joslu izmantošanai, kas atbalsta saliktas joslas, animētus fonus un teksta etiķetes.
Kā tas strādā
Progresa komponenti ir veidoti ar diviem HTML elementiem, dažiem CSS platuma iestatīšanai un dažiem atribūtiem. Mēs neizmantojam HTML5 <progress>elementu , nodrošinot, ka varat sakraut norises joslas, animēt tās un novietot virs tām teksta iezīmes.
Mēs izmantojam .progresskā iesaiņojumu, lai norādītu progresa joslas maksimālo vērtību.
Mēs izmantojam iekšējo .progress-bar, lai norādītu līdzšinējo progresu.
Lai .progress-bariestatītu platumu, ir nepieciešams iekļauts stils, utilīta klase vai pielāgots CSS.
Lai padarītu to pieejamu, .progress-barir nepieciešami arī daži roleun atribūti.aria
Salieciet to visu kopā, un jums ir šādi piemēri.
Bootstrap piedāvā vairākas utilītas platuma iestatīšanai . Atkarībā no jūsu vajadzībām tie var palīdzēt ātri konfigurēt progresu.
Etiķetes
Pievienojiet iezīmes savām progresa joslām, ievietojot tekstu sadaļā .progress-bar.
25%
Augstums
Mēs iestatām heightvērtību tikai .progress, tāpēc, ja mainīsit šo vērtību, iekšējais .progress-barizmērs tiks automātiski attiecīgi mainīts.
Foni
Izmantojiet fona utilītu klases, lai mainītu atsevišķu progresa joslu izskatu.
Vairāki stieņi
Ja nepieciešams, progresa komponentā iekļaujiet vairākas progresa joslas.
Svītrains
Pievienojiet .progress-bar-stripedjebkuram .progress-bar, lai, izmantojot CSS gradientu, lietotu svītru virs progresa joslas fona krāsas.
Animētas svītras
Svītraino gradientu var arī animēt. Pievienot .progress-bar-animated, .progress-barlai animētu svītras no labās puses uz kreiso, izmantojot CSS3 animācijas.