Gird – wprowadzenie
Na moim blogu wspominałem już o gridzie Bootstrapa, ale pewnie nie do końca wszystko zrozumiałeś jak to działa. Framework ma swój wyróżniający się zapis blokowy. Zapoznaj się z poniższymi klasami responsywności:
- col-xs-* – odpowiada za rozdzielczość mobilną (maksymalnie 768px),
- col-sm-* – odpowiada za rozdzielczość tabletu (minimalnie 768px a maksymalnie 992px),
- col-md-* – odpowiada za rozdzelczość desktopową (minimalnie 992px a maksymalnie 1200px),
- col-lg-* – odpowiada za rozdzelczość w HD na desktopie (minimalnie 1200px).
Powyższe klasy dodaję się do elementów div, jednak jeżeli mamy zamiar podzielić stronę na bloki to musimy przed każdym pełnym (12 kolumn) blokiem dodać element z klasą row.
Taki układ stosuje się na wszystkich nowoczesnych stronach www. Bez tego sposobu, budowanie stron byłoby niemożliwe. Dodatkowo w łatwy sposób można wykorzystać klasy responsywności do utworzenia prostej strony na różne urządzenia, tzn. telefony, tablety, desktopy.
Przeanalizuj poniższy przykład.
Układ responsywny
W tym rozdziale zobaczysz jak stworzyć kolejny układ strony z podziałem na różne rozdzielczości.
Należy tak projektować układ, głównie ze względu na standardy jakie są zachowane od kilku lat. Nasza strona musi wyglądać dobrze zarówno na komórce, jak i tablecie czy desktopie. Nasz framework umożliwia dodanie odpowiednich klas responsywności, aby stworzyć układ blokowy.
Zobacz na poniższym przykładzie, jak prosto stworzyć taki układ dzięki bootstrapowymi klasami:
“Responsywność w pigułce” – tak mógłbym określić powyższy materiał. Myślę, że dzięki przykładom nie warto się tu więcej rozpisywać. Dzięki Bootstrapowi, łatwo zaprojektować responsywny układ strony, i to na każdy rodzaj urządzenia.
W następnym środowym materiale, udostępnię ćwiczenie dla Was, w celu podsumowania dotychczasowej wiedzy na temat Bootstrapa. Z góry serdecznie zapraszam!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA