Jak wyświetlać i ukrywać elementy za pomocą Bootstrap4
Aby przyspieszyć rozwój urządzeń mobilnych, używaj responsywnych klas wyświetlania i ukrywania elementów według urządzeń. Unikaj tworzenia zupełnie różnych wersji tej samej strony, ale ukryj elementy dla każdego rozmiaru ekranu odpowiednio.
Aby ukryć elementy, wystarczy użyć.d-noneklasa albo któraś z nich.d-{sm,md,lg,xl}-noneklasie, by wprowadzać wszelkie responsywne zmiany ekranu.
Aby wyświetlać elementy tylko w określonym przedziale wielkości ekranu, możesz ustawić jeden.d-*-noneKlasa i jeden.d-*-*klasy są grupowane razem, na przykład,.d-none .d-md-block .d-xl-noneElementy o wszystkich rozmiarach ekranów będą ukryte, z wyjątkiem urządzeń średnich i dużych.
Renderingi:
Pokaż/ukryj na punkt przerwania i w dół:
- 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 (tak samo jak hidden)
Pokaż/ukryj dla breakpointu i wyżej:
- hidden-xs-up = d-none (tak samo jak 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
Pokaż/ukryj tylko dla jednego punktu przerwania:
- hidden-xs (tylko) = d-brak d-sm-block (tak samo jak hidden-xs-down)
- hidden-sm (tylko) = d-blok d-sm-none d-md-block
- hidden-md (tylko) = d-blok d-md-none d-lg-block
- hidden-lg (tylko) = d-blok d-lg-none d-xl-block
- hidden-xl (n/a 3.x) = d-blok d-xl-none
- visible-xs (tylko) = d-blok d-sm-none
- visible-sm (tylko) = d-none d-sm-block d-md-none
- visible-md (tylko) = d-none d-md-block d-lg-none
- visible-lg (tylko) = d-none d-lg-block d-xl-none
- visible-xl (n/a 3.x) = d-brak d-xl-blok
Wizualizacja:
Linki referencyjne:https://getbootstrap.com/docs/4.0/utilities/display/
|
Opublikowano 04.04.2019 10:46:25
|
|
|
|
