autor: Robert
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
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ć.
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
Tutaj prócz dodania klasy .progress-striped
dodajemy także klasę .active
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ładamiNapisał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?
OdpowiedzDlaczego 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.
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? :)
OdpowiedzNie 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.
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