Ako zobraziť a skryť prvky pomocou Bootstrap4

Malý · Zverejnené 4. 4. 2019 10:46:25

Ako zobraziť a skryť prvky pomocou Bootstrap4

Pre rýchlejší vývoj mobilných zariadení používajte responzívne zobrazovacie triedy na zobrazenie a skrytie prvkov podľa zariadenia. Vyhnite sa vytváraniu úplne odlišných verzií tej istej stránky, ale skryjte prvky pre každú veľkosť obrazovky podľa toho.

Na skrytie prvkov jednoducho použite.d-nonetrieda alebo jedna z nich.d-{sm,md,lg,xl}-nonetriede na akékoľvek responzívne zmeny na obrazovke.

Na zobrazenie prvkov len v danom intervale veľkosti obrazovky si môžete nastaviť jeden.d-*-noneTrieda a jedna.d-*-*triedy sú napríklad zoskupené spolu,.d-none .d-md-block .d-xl-nonePrvky všetkých veľkostí obrazoviek budú skryté, okrem stredných a veľkých zariadení.

Stvárnenie:

Ukázať/skryť pre bod prerušenia a dole:

hidden-xs-down (hidden-xs) = d-žiadny d-sm-blok
hidden-sm-down (hidden-sm, hidden-xs) = d-žiadny d-md-blok
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 (to isté ako hidden)

Ukázať/skryť pre breakpoint a vyššie:

hidden-xs-up = d-none (to isté ako 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ázať/skryť len pre jeden bod zlomu:

hidden-xs (len) = d-žiadny d-sm-blok (rovnaký ako hidden-xs-down)
hidden-sm (len) = d-blok d-sm-žiadny d-md-blok
hidden-md (len) = d-block d-md-none d-lg-block
hidden-lg (len) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs (len) = d-blok d-sm-none
visible-sm (len) = d-žiadny d-sm-blok d-md-žiadny
visible-md (len) = d-none d-md-block d-lg-none
visible-lg (len) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-žiadny d-xl-blok

Vizualizácia:

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

[Bootstrap] Ako zobraziť a skryť prvky pomocou Bootstrap4

Súvisiace príspevky

Zobrazené sekcie