Stylizacja baru postępu w bootstrap 5

Znaczenie paska postępu można podkreślić fakt, że utrzymuje on zaangażowanie i informowanie o postępie procesu, takim jak wypełnianie długiego formularza, który ma kilka kroków lub przy załadowaniu strony lub innego źródła. Tutaj, na tym blogu, podsumowaliśmy dla Ciebie sposoby, w jakie możesz stylizować paski postępów za pomocą Bootstrap 5. Ale zanim przejdziemy do jego stylizacji, nauczmy się, jak go tworzyć.

Jak stworzyć pasek postępu

W celu wygenerowania paska postępu, ustaw .postęp Tymczas .pasek postępu do elementu następcy, podczas gdy szerokość paska postępu jest dostosowywana za pomocą właściwości szerokości.

Html

Dysp .Klasa postępu, podczas gdy Child Div otrzymał .Klasa Postępu Postępu. Wreszcie, używając właściwości szerokości, szerokość paska postępu została ustawiona na 50%.

Wyjście

Z powodzeniem wygenerowano pasek postępu.

Teraz nauczmy się różnych sposobów stylizacji paska postępu.

Jak skalować pasek postępu

Domyślnie pasek postępu ma wysokość 16px lub 1, ale w zależności od preferencji możesz skalować wysokość paska postępu w górę iw dół. W tym celu ustal tę samą wysokość dla poprzednika Div i następcy Div.

Html

Powyższy kod wygeneruje dwa paski postępu, jeden o wysokości 20px, a drugi o wysokości 40px. Zauważ, że kontener postępu i pasek postępu przypisano tę samą wysokość w obu przypadkach.

Wyjście

Wyjście pokazuje dwa paski postępów o różnych wysokościach.

Jak oznaczyć pasek postępu

Ponieważ wiemy, że pasek postępu pokazuje postęp procesu, jeśli chcesz pokazać ten postęp w liczbach lub procentach.

Html

50%

Pasek postępu utworzony w powyższym kodzie ma etykietę „50%”. Ta etykieta odpowiada postępowi procesu.

Wyjście

Etykieta została pomyślnie przypisana do paska postępu.

Jak pokolorować pasek postępu

Jeśli chcesz podać kolory do paska postępu, po prostu przypisz klasę kolorów tła do kontenera paska postępu. Zajęcia kolorów tła są .BG-Primary, .BG-SUCCCESS, .BG-Secondary, .BG-info, .Warning BG, .BG Danger, .BG Light, .BG-Dark, .BG-Muted.

Html

Tutaj tworzymy pięć pasków postępów o innej szerokości i kolorze.

Wyjście

Dostarczanie kolorów do pasków postępu sumuje się piękna strony internetowej.

Jak stworzyć pasek postępu w paski

Kolejną zabawną rzeczą, którą możesz zrobić, aby stylizować pasek postępu, jest to, że jest w paski i za to przypisać .Postępowanie w Postępu klasa do pojemnika dziecięcego.

Html

Powyższy kod wygeneruje pasek postępu w paski o szerokości 50%.

Wyjście

W ten sposób powstaje pasek postępu w paski.

Jak animować pasek postępu

Animowanie paska postępu sprawi, że postęp w pasku wydaje się poruszać. Można to zrobić, dostarczając .Zachęcone postępowanie klasa do paska postępu wraz z .Postępowanie w Postępu klasa.

Html

Tutaj tworzymy paski animowanego postępu w paski o szerokości 50%.

Wyjście

Utworzono animowany pasek postępu.

Jak układać wiele pasków postępu

Jeśli chcesz łączyć wiele pasków postępu, po prostu umieść je w pojemniku postępu.

Html

Pierwszy
Drugi
Trzeci

Powyższy kod ułoży trzy trzy paski postępów z inną szerokością.

Wyjście

Powyższe wyjście pokazuje trzy stosowane paski postępów.

Wniosek

W Bootstrap 5 można utworzyć pasek postępu, przypisując .postęp klasa do kontenera nadrzędnego i .pasek postępu klasa do pojemnika dziecięcego. Skalujesz wysokość paska postępu, przypisując tę ​​samą wysokość do pojemników dla rodziców i dzieci. Pasek postępowy można oznaczyć, umieszczając w nim trochę tekstu, aby tworzyć kolorowe paski postępów za pomocą klas kolorów tła. Ponadto możesz tworzyć paski w paski i animowane progresy za pomocą .Postępowanie w Postępu, I .Zachęcone postępowanie zajęcia odpowiednio.