Bootstrap tutorial logo

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
.visible-sm-* Widoczne
.visible-md-* Widoczne
.visible-lg-* Widoczne
.hidden-xs Widoczne Widoczne Widoczne
.hidden-sm Widoczne Widoczne Widoczne
.hidden-md Widoczne Widoczne Widoczne
.hidden-lg Widoczne Widoczne Widoczne

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:

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (9 głosów, średnia: 4,78 na 5)
Loading...

Komentarze: Bądź pierwszy!