Jak zobrazit a skrýt prvky pomocí Bootstrap4

Malý hajzl · Zveřejněno 04.04.2019 10:46:25

Jak zobrazit a skrýt prvky pomocí Bootstrap4

Pro rychlejší vývoj mobilních zařízení použijte responzivní zobrazovací třídy pro zobrazení a skrývání prvků podle zařízení. Vyhněte se vytváření zcela odlišných verzí stejného webu, ale schovávejte prvky pro každou velikost obrazovky podle toho.

Pro skrytí prvků jednoduše použijte.d-nonetřída nebo jedna z nich.d-{sm,md,lg,xl}-nonetřída pro jakékoli responzivní změny na obrazovce.

Pro zobrazení prvků pouze v daném intervalu velikosti obrazovky můžete nastavit jeden.d-*-noneTřída a jedna.d-*-*třídy jsou například seskupeny dohromady,.d-none .d-md-block .d-xl-nonePrvky všech velikostí obrazovek budou skryté, kromě středních a velkých zařízení.

Omítky:

Ukázat/skryt pro breakpoint a dolů:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none (stejné jako hidden)

Ukázat/skryt pro breakpoint a výš:

hidden-xs-up = d-none (stejné jako hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none

Ukázat/skryt pouze pro jeden bod zlomu:

hidden-xs (jen) = d-žádný d-sm-block (stejný jako hidden-xs-down)
hidden-sm (jen) = d-blok d-sm-none d-md-blok
hidden-md (jen) = d-blok d-md-none d-lg-blok
hidden-lg (jen) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-blok d-xl-none
visible-xs (jen) = d-blok d-sm-none
visible-sm (jen) = d-žádný d-sm-blok d-md-žádný
visible-md (jen) = d-none d-md-block d-lg-none
visible-lg (jen) = d-žádný d-lg-blok d-xl-žádný
visible-xl (n/a 3.x) = d-none d-xl-block

Vizualizace:

Referenční odkazy:https://getbootstrap.com/docs/4.0/utilities/display/

[Bootstrap] Jak zobrazit a skrýt prvky pomocí Bootstrap4

Související příspěvky

Prohlížené sekce