TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć paski postępu Bootstrap 5?

2

Paski postępu służą do prezentowania umiejętności, procentu ukończenia projektów i do podobnych celów. Bootstrap 5 ma różne style pasków postępu, podobne do poprzednich wersji. W tym samouczku przyjrzyjmy się bliżej każdemu rodzajowi pasków postępu oferowanych w Bootstrap 5.

Samouczek dotyczący pasków postępu Bootstrap 5

  1. Paski postępu HTML5
  2. Bootstrapowe paski postępu Klasy CSS
  3. Tworzenie domyślnych pasków postępu
  4. Paski postępu z różnymi kolorami tła
  5. Dodawanie etykiet w paskach postępu
  6. Wiele pasków postępu
  7. Styl w paski
  8. Animowany styl w paski
  9. Regulacja wysokości

Omówmy szczegółowo każdy temat.

1 paski postępu HTML5

Pamiętaj, że HTML5 ma domyślny tag do tworzenia poziomych pasków postępu, co w większości przypadków wystarcza. Poniżej znajduje się blok kodu pasków postępu HTML5.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

W przeglądarce będzie wyglądać jak poniżej:

50%

60%

70%

80%

Bootstrap nie używa paska postępu HTML5 i ma własny styl komponentu paska postępu.

2 klasy CSS używane w paskach postępu Bootstrap

Bootstrap 4 używa następujących klas CSS do tworzenia pasków postępu:

  • Klasa „.progress" służy do zewnętrznego opakowania paska postępu. Służy do przechowywania wielu pasków postępu w opakowaniu.
  • Klasa „.progress-bar” służy do tworzenia rzeczywistego paska postępu, pokazującego procent postępu.
  • Szerokość każdego paska postępu powinna być wyraźnie zdefiniowana za pomocą dodatkowych klas CSS.
  • Dodatkowo możesz dodać atrybuty „role” i „aria” do paska postępu w celu zwiększenia czytelności.
  • „aria-valuenow” służy do wskazania bieżącej wartości postępu, „aria-valuemin” to minimalna wartość, która wynosi 0, a „aria-valuemax” to maksymalna wartość, która wynosi 100.

Stwórzmy kilka przykładów z wykorzystaniem tych klas.

3 domyślne paski postępu

Domyślny pasek postępu wykorzystuje kolor podstawowy do pokazania postępu i jasnoszary jako tło. Poniżej znajduje się kod do tworzenia pięciu pasków postępu z postępem 0, 25, 50, 75 i 100%.

<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 w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" 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>

W przeglądarce będzie wyglądać jak poniżej:

Jak wspomniano powyżej, każdy pasek postępu powinien mieć wyraźnie określoną szerokość, aby pokazać zakończenie. W tym celu można użyć stylu wbudowanego lub klas narzędziowych. Użyliśmy klas wielkości użytkowych dla 25%, 50% i 75% odpowiednio z w-25, w-50 i w-75. Dla szerokości 100% użyliśmy stylu inline z „szerokość: 100%”.

Pamiętaj również, aby dodać ręczne łamanie linii między paskami postępu, aby uniknąć wyświetlania wszystkich pasków w tej samej linii.

4 paski postępu z tłem

Podobnie jak w przypadku wielu innych komponentów, możesz po prostu użyć klas narzędziowych tła, aby zmienić tło na sukces, ostrzeżenie, informacje, niebezpieczeństwo, ciemne lub drugorzędne kolory.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Paski postępu będą wyglądać jak poniżej:

Jak stworzyć paski postępu Bootstrap 5?

Pamiętaj, że kolor podstawowy jest wartością domyślną, więc nie musisz wspominać, czy chcesz, aby postęp był w kolorze podstawowym. Nie możesz również używać jasnego koloru tła, ponieważ tło paska postępu jest również jasne.

Możesz użyć klas narzędziowych działających w tle w zewnętrznym opakowaniu postępu, aby zmienić tło paska postępu. Na przykład poniższy kod wygeneruje pasek postępu z czerwonym (niebezpiecznym) tłem zamiast jasnoszarego.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Wynik będzie wyglądał jak poniżej w przeglądarce:

Jak stworzyć paski postępu Bootstrap 5?

5 pasków postępu z etykietami

Jeśli chcesz dodać etykiety do paska postępu, po prostu dodaj tekst przed zamknięciem

tag każdego paska postępu. Poniżej znajduje się przykład pokazujący ukończenie 75%:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

Etykieta zostanie wyświetlona na górze paska z wyrównaniem do środka, jak poniżej:

Jak stworzyć paski postępu Bootstrap 5?

6 wielu pasków postępu

Dodanie wielu pasków postępu w jednym zewnętrznym opakowaniu spowoduje utworzenie wszystkich pasków w jednym wierszu.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Wiele pasków postępu będzie wyglądać jak poniżej:

Jak stworzyć paski postępu Bootstrap 5?

7 pasków postępu w paski

Klasa „.progress-bar-striped” służy do tworzenia pasków postępu (klasa narzędziowa tła służy do pokazywania różnych kolorów).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</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">100%</div> </div>

Paski postępu powinny wyglądać jak poniżej:

Jak stworzyć paski postępu Bootstrap 5?

8 animowanych pasków postępu w paski

Ostatnią opcją jest animacja paska za pomocą klasy „.progress-bar-animated”.

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Spowoduje to utworzenie animowanego paska postępu z zielonymi paskami. Pamiętaj, że możesz animować tylko paski w paski, a nie domyślne.

9 Zmiana wysokości lub grubości pasków postępu

Domyślnie paski postępu będą miały wysokość 1 rem. Możesz zmienić wysokość za pomocą stylu wbudowanego w klasie „.progress-bar”, a zewnętrzna otoczka zostanie automatycznie dopasowana. Utwórzmy dwa paski o wysokości 0.rem i 30px:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Wynik powinien wyglądać jak poniżej w przeglądarce:

Jak stworzyć paski postępu Bootstrap 5?

Problem ze zmianą wysokości polega na tym, że używane etykiety nie będą prawidłowo wyrównane. Ponownie powinieneś użyć dodatkowych stylów ręcznie, aby wyrównać etykiety w pionie do środka.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów