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

Sprawdź najnowszą wersję responsive utilities zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

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.