Bootstrap tutorial logo

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%

35%
20%
10%

No i stronka z przykładem:

Strona z przykładami
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (2 głosów, średnia: 5,00 na 5)
Loading...

Ł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?

Odpowiedz
    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