Widoczność elementów na różnych urządzeniach / Responsive utilities

Widoczność elementów na różnych urządzeniach / Responsive utilities
autor: Robert

27 sierpnia 2014

Ten wpis powinien pojawić się na początku kursu ale jakoś mi umknął więc będzie teraz:)

Gdy tworzymy responsywną stronę internetową to normalne jest, że ukrywamy niektóre elementy na różnych urządzeniach, przykładowo slider jest praktycznie nieczytelny na smartfonach więc nie musimy go wyświetlać. Albo w drugą stronę, przykładowo robimy stronę dla pomocy drogowej, fajnie by było gdyby po wejściu na naszą stronę poprzez smartfona głównym elementem był duży czerwony przycisk, który po wciśnięciu przeniesie nas do aplikacji telefonu i pozwoli ową pomoc drogową wezwać. Element ten nie ma sensu na desktopowej wersji ale mobilnej jak najbardziej.

Uruchomienie aplikacji telefonu z poziomu strony internetowej możemy uzyskać za pomocą znacznika <a href="tel:+48600600600">Wezwij pomoc!</a>

Ale do rzeczy, poniżej znajduje się tabelka z klasami oraz informacjami na jakich urządzeniach będą widoczne elementy którym owe klasy nadamy

	Bardzo małe ekrany Telefony (<768px)	Małe ekrany Tablety (≥768px)	Średnie ekrany Laptopy / Netbooki (≥992px)	Duże ekrany Laptopy / Monitory (≥1200px)
`.visible-xs-*`	Widoczne	Ukryte	Ukryte	Ukryte
`.visible-sm-*`	Ukryte	Widoczne	Ukryte	Ukryte
`.visible-md-*`	Ukryte	Ukryte	Widoczne	Ukryte
`.visible-lg-*`	Ukryte	Ukryte	Ukryte	Widoczne
`.hidden-xs`	Ukryte	Widoczne	Widoczne	Widoczne
`.hidden-sm`	Widoczne	Ukryte	Widoczne	Widoczne
`.hidden-md`	Widoczne	Widoczne	Ukryte	Widoczne
`.hidden-lg`	Widoczne	Widoczne	Widoczne	Ukryte

Więc jeśli chcemy by nasz div był widoczny jedynie na smartfonie nadajemy mu klasę .visible-xs-block a gdy ma być widoczny wszędzie prócz ekranów z dużymi rozdzielczościami nadajemy klasę .hidden-lg

Dodatkowo w BS3.2.0 pojawiła się możliwość definiowania w jaki sposób wyświetlany element ma się zachowywać, czy ma być elementem liniowym, blokowym lub liniowo-blokowym. Przykłady pokazuje poniższa tabela