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
| Grupa klas | Wartość CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Strona wizualizująca pojawianie się elementów w zależności od rozdzielczości:
Post się przydał? Oceń go proszę.
(11 głosów, średnia: 4,82 na 5)
Loading...