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

17 547 2

We wpisie o siatce Bootstrapa opisywałem klasy kolumn, które odpowiadają za ich wyświetlanie na różnych rozdzielczościach ekranu. Tak w ramach przypomnienia:

  • Klasa .col-* spowoduje wyświetlanie się kolumn obok siebie zawsze.
  • Klasa .col-sm-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 544px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-md-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 768px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-lg-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 992px, poniżej będą się wyświetlały pod sobą.
  • Klasa .col-xl-* spowoduje wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 1200px, poniżej będą się wyświetlały pod sobą.

Ale przecież tworzenie czy to zgodnie z zasadami „mobile first” czy „desktop first” polega na wyświetlaniu bądź ukrywaniu różnych elementów w zależności od rozdzielczości. Idąc w „górę” czyli stosując mobile first szkoda nie wykorzystać dodatkowego miejsca, które uzyskujemy na większych ekranach. Natomiast idąc „w dół” czyli desktop first, nie musimy na siłę upychać całej zawartości a możemy coś ukryć na tablecie czy smartfonie.

Takie możliwości dają nam Media Queries czyli specjalne reguły CSSa, która uruchamia zapisane wewnątrz niej selektory dopiero gdy rozdzielczość okna naszej przeglądarki spełni zapisany w media query warunek. Jeśli nie spotkaliście się wcześniej z pojęciem „media queries” to uzupełnijcie swoją wiedzę, bo bez nich nie istnieje responsive web design.

Podstawowe media queries wyglądają mniej więcej tak:

  • @media screen and (min-width: 768px) { ... tutaj nasze selektory i właściwości ... } – zapis ten oznacza – „jeśli strona wyświetla się na ekranie (a nie na przykład ma być wydrukowana) i jej szerokość JEST WIĘKSZA od 768px to użyj właściwości wewnątrz tej reguły.”
  • @media screen and (max-width: 480px) { ... tutaj nasze selektory i właściwości ... } – ten zapis oznacza – „jeśli strona wyświetla się na ekranie i jej szerokość NIE JEST WIĘKSZA niż 480px to użyj właściwości wewnątrz tej reguły.”
  • @media screen and (min-width: 480px) and (max-width: 768px) { ... tutaj nasze selektory i właściwości ... } – zapis ten oznacza – „jeśli strona wyświetla się na ekranie i jej szerokość JEST WIĘKSZA od 480px oraz NIE JEST WIĘKSZA niż 768px to użyj właściwości wewnątrz tej reguły.

W Bootstrapie 4 zrezygnowano z klas .hidden-*-down czy .hidden-*-up i zastąpiono je poniższymi klasami:

  • .d-none – ta klasa całkowicie ukrywa element w którym jest zastosowana
  • .d-block – ta klasa nadaje właściwość display:block
  • .d-*-none – ta klasa w połączeniu z breakpointami xs, sm, md, lg, xl ukrywa element o podanej rozdzielczości i wyższej.
  • .d-*-block – ta klasa w połączeniu z breakpointami xs, sm, md, lg, xl wyświetla element o podanej rozdzielczości i wyższej.

Inne podejście na początku może wydawać się bardziej skomplikowane, ale gdy się z nim zapoznamy to korzystanie z niego będzie równie intuicyjne jak z poprzedniego sposobu.
Poniżej kilka przykładów zastosowania nowych klas:

  • .d-none .d-sm-block – najpierw klasa .d-none całkowicie ukrywa dany element a następnie klasa .d-sm-block wyświetla go dla breakpointa sm i wyżej. Zatem ukrywamy element tylko dla breakpointa xs czyli dla smartfona ( rozdzielczość poniżej 576px )
  • .d-md-none .d-lg-block – najpierw klasa .d-md-none ukrywa nam element dla breakpointa md i wyższych rozdzielczości a następnie klasa .d-lg-block wyświetla nam element dla breakpointa lg i wyższych. Co za tym idzie ukryjemy element tylko dla breakpointa md ( rozdzielczość od 768px do 991px )
  • .d-block .d-sm-none – najpierw klasa .d-block wyświetla nam element dla wszystkich rozdzielczości a następnie klasa .d-sm-none ukrywa go dla breakpointa sm i wyższych. Mamy więc odwrotność pierwszego punktu i pokazujemy nasz element tylko na smartfonie.
  • .d-none .d-md-block .d-lg-none
  • – najpierw klasa .d-none całkowicie ukrywa element, następnie klasa .d-md-block wyświetla go dla breakpointa md i na koniec klasa .d-lg-none ukrywa go dla breakpointa lg i wyższych. Tym sposobem wyświetlamy element tylko w rozdzielczościach od 768px do 991px.

Te przykładowe podane wyżej rozdzielczości to tak zwane „break point” czyli rozdzielczości podczas których jest uruchamiania dana reguła media query. Dlatego przykładowo kolumna z klasą .col-md-* zaczyna się układać pod sobą poniżej 768px bo tak ma zapisane w @media (min-width: 768px) { ... } .

Bootstrap korzysta z następujących media queries:

Kod

Kod

Tabela responsywności

Przygotowałem dla Was tabelę ze wszystkimi możliwymi kombinacjami wyświetlania czy ukrywania elementów w Bootstrap 4. Możecie na niej zobaczyć jak połączenie poszczególnych klas wpływa na wyświetlanie elementów.

Przykład

Extra small devices
Portrait phones (<544px)
Small devices
Landscape phones (≥544px – <768px)
Medium devices
Tablets (≥768px – <992px)
Large devices
Desktops (≥992px – <1200px)
Extra large devices
Desktops (≥1200px)
.d-none
.d-sm-block
VisibleVisibleVisibleVisible
.d-none
.d-md-block
VisibleVisibleVisible
.d-none
.d-lg-block
VisibleVisible
.d-none
.d-xl-block
Visible
.d-none
.d-sm-noneVisible
.d-md-noneVisibleVisible
.d-lg-noneVisibleVisibleVisible
.d-xl-noneVisibleVisibleVisibleVisible
.d-none
d-sm-block
VisibleVisibleVisibleVisible
.d-block
.d-sm-none
.d-md-block
VisibleVisibleVisibleVisible
.d-block
.d-md-none
.d-lg-block
VisibleVisibleVisibleVisible
.d-block
.d-lg-none
.d-xl-block
VisibleVisibleVisibleVisible
.d-block
.d-xl-none
VisibleVisibleVisibleVisible
.d-block
.d-sm-none
Visible
.d-none
.d-sm-block
.d-md-none
Visible
.d-none
.d-md-block
.d-lg-none
Visible
.d-none
.d-lg-block
.d-xl-none
Visible
.d-none
.d-xl-block
Visible

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (38 głosów, średnia: 4,87 na 5)
Loading...

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

pawel

Czy ja dobrze doczytałem że to już zostało usunięte w BS4?

    Robert Autor

    Klasy .hidden-*-up oraz .hidden-*-down zostały zastąpione kombinacjami klas .d-none, .d-block, d-*-none oraz d-*-block.
    Wszystkie możliwe kombinacje znajdziesz w tabelce na stronie:)

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*