#49. Responsywność strony

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. 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

friendly-lovelace-zfd3c

friendly-lovelace-zfd3c danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

blue-shape-fd0nc

blue-shape-fd0nc danielminschinski

“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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!