Paski postępu / Progress bars

autor: Robert

15 marca 2014

Niejednokrotnie przesyłając coś na serwer bądź wypełniając kolejne etapy formularzy można zobaczyć paski postępu. Kolejnym przykładem jest chwalenie się na swoim potrfolio w jakiej ilości zna się jakąś technologię. Na upartego możecie nawet zastosować te paski jako alternatywę dla <hr> :). Paski mają „standardowe kolory” bootstrapa nadawane poprzez klasy (info, warning, success itd.), mogą być „paskowane” jakkolwiek to brzmi „paskowane paski” a nawet animowane. Ale przykłady poniżej

Standardowe paski

Aby stworzyć zwykły pasek tworzymy div z klasą .progress, wewnątrz którego zamieszczamy kolejny div z klasami progress-bar progress-bar-success (pamiętajmy, że success można zamienić na warning, info, danger) oraz dodajemy styl css style="width: 40%" gdzie % to ilość wypełnienia paska. Co prawda dodawanie styli wewnątrz dokumentu jest niezalecane, niewydajne i zaciemnia kod, ale skoro twórcy Bootstrapa tak to rozwiązali to nie będziemy polemizować.

„Paskowane paski”

Jak widać poniżej, paski te mają inny wygląd. Tworzymy je dodając klasę .progress-striped do naszego głównego diva wyświetlającego pasek czyli tego z klasą .progress

Animowane paski

Tutaj prócz dodania klasy .progress-striped dodajemy także klasę .active

Połączone paski

W tym przypadku możemy zastosować kilka kolorów paska postępu jako jeden pasek. Wtedy wewnątrz głównego diva tworzącego pasek czyli <div class="progress> tworzymy kilka divow z klasami <div class="progress-bar progress-bar-kolor> oraz każdemu nadajemy odpowiednią szerokość poprzez style="width: X%" pamiętając aby nie przekroczyć 100%

No i stronka z przykładem:

Strona z przykładami

---

Post się przydał? Oceń go proszę.

(2 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Ostrzeżenia i powiadomienia / Alerts
Nowszy post →
Sprawdź responsywność strony

Robert 23 marca 2014 o 12:46

Dlaczego dodanie klasy jest bez sensu? Należy oddzielać strukturę dokumentu od sposobu prezentacji aby kod był czytelny. Stąd zaleca się trzymanie CSSów w oddzielnych plikach.
Ja, nawet gdy trzeba ostylować 1 diva tworzę sobie klasę, bo prędzej czy później wykorzystam ją ponownie.

Odpowiedz

Łukasz 23 marca 2014 o 12:56

No ok, ale kopiujesz wtedy cały kod CSS z klasy, która jest w Bootstrapie i dodajesz to co potrzebne? Jak ma się do tego media-queries? Trzeba dodawać klasy do media aby utrzymać responsywność? To tak w sumie tworzenie swojego frameworku zamiast korzystanie z gotowego. Czy coś źle rozumiem? :)

Odpowiedz

Robert 23 marca 2014 o 13:04

Nie musisz kopiować nic z bootstrapa. Robie sobie diva z klasą np. „col-md-6”. Jak chcę zadać mu stałą wysokość to tworzę sobie klasę „.minimum-height” i dopisuję ją do diva (<div class="col-md-6 minimum-height">).
Co do media queries – jeśli nie zależy ci na zmianie wartości klasy w zależności od rozdzielczości to dopisujesz pod odpowiednim query. Jeśli div ma mieć tą przykładową wysokość niezależnie od rozdzielczości to nie musisz kombinować z media-queries.

Odpowiedz

Łukasz 23 marca 2014 o 13:17

O! I o to mi chodziło :) W sumie to takie logiczne, a nie pomyślałem o tym :) Zazwyczaj tworzyłem strony od zera tworząc własne szablony (i proste frameworki), ale kiedy powstały frameworki typu Bootstrap – wszystko staje się prostsze, ale trzeba się najpierw nauczyć z nimi pracować. Na szczęście akurat Boostrap ma dobrą i jasno napisaną dokumentację.
Pozdrawiam