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ładamiPost się przydał? Oceń go proszę.
(2 głosów, średnia: 5,00 na 5)
Loading...Komentarze: 5 komentarzy
Łukasz 22 marca 2014 o 22:15
Napisałeś, że dodawanie styli wewnątrz jest niezalecane. Przygotowuję sobie teraz stronę pod WordPressa i zastanawiam się jak zrobić, żeby div miał odpowiednią wysokość. Oczywiście ostylować go znacznikime min-height, ale… Robić to przy każdym divie jest męczące, a dodawanie tego w cssie do klasy nie ma sensu. Jak rozwiązujesz taki problem?
OdpowiedzRobert 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.
Ł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? :)
OdpowiedzRobert 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.
Ł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