Wyświetl właściwość
Szybko i responsywnie przełączaj wartości wyświetlania komponentów i nie tylko dzięki naszym narzędziom do wyświetlania. Obejmuje obsługę niektórych z bardziej popularnych wartości, a także kilka dodatków do sterowania wyświetlaniem podczas drukowania.
Jak to działa
Zmień wartość display
właściwości za pomocą naszych responsywnych klas narzędzi do wyświetlania. Celowo obsługujemy tylko podzbiór wszystkich możliwych wartości dla display
. Zajęcia można łączyć, aby uzyskać różne efekty, zgodnie z potrzebami.
Notacja
Wyświetlaj klasy narzędziowe, które mają zastosowanie do wszystkich punktów przerwania , od xs
do xxl
, nie mają w nich skrótu punktu przerwania. Dzieje się tak, ponieważ te klasy są stosowane od min-width: 0;
i do góry, a zatem nie są związane z zapytaniem o media. Jednak pozostałe punkty przerwania zawierają skrót punktu przerwania.
W związku z tym klasy są nazywane przy użyciu formatu:
.d-{value}
dlaxs
.d-{breakpoint}-{value}
dlasm
,md
,lg
,xl
, ixxl
.
Gdzie wartość jest jedną z:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Wyświetlane wartości można zmienić, zmieniając $displays
zmienną i ponownie kompilując SCSS.
Zapytania o media wpływają na szerokość ekranu przy podanym lub większym punkcie przerwania . Na przykład .d-lg-none
ustawia display: none;
na ekranach lg
, xl
i .xxl
Przykłady
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Ukrywanie elementów
Aby przyspieszyć rozwój przyjazny dla urządzeń mobilnych, użyj responsywnych klas wyświetlania do pokazywania i ukrywania elementów według urządzenia. Unikaj tworzenia zupełnie różnych wersji tej samej witryny, zamiast tego ukryj elementy responsywne dla każdego rozmiaru ekranu.
Aby ukryć elementy, po prostu użyj .d-none
klasy lub jednej z .d-{sm,md,lg,xl,xxl}-none
klas dla dowolnej responsywnej odmiany ekranu.
Aby pokazać element tylko w określonym przedziale rozmiarów ekranu, możesz połączyć jedną .d-*-none
klasę z .d-*-*
klasą, na przykład .d-none .d-md-block .d-xl-none .d-xxl-none
ukryje element dla wszystkich rozmiarów ekranu z wyjątkiem średnich i dużych urządzeń.
Rozmiar ekranu | Klasa |
---|---|
Ukryty na wszystkich | .d-none |
Ukryty tylko na xs | .d-none .d-sm-block |
Ukryty tylko na sm | .d-sm-none .d-md-block |
Ukryty tylko na md | .d-md-none .d-lg-block |
Ukryty tylko na LG | .d-lg-none .d-xl-block |
Ukryty tylko na xl | .d-xl-none .d-xxl-block |
Ukryty tylko na xxl | .d-xxl-none |
Widoczne na wszystkich | .d-block |
Widoczne tylko na xs | .d-block .d-sm-none |
Widoczne tylko na sm | .d-none .d-sm-block .d-md-none |
Widoczne tylko na md | .d-none .d-md-block .d-lg-none |
Widoczne tylko na LG | .d-none .d-lg-block .d-xl-none |
Widoczne tylko na xl | .d-none .d-xl-block .d-xxl-none |
Widoczne tylko na xxl | .d-none .d-xxl-block |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Wyświetl w druku
Zmień display
wartość elementów podczas drukowania za pomocą naszych klas narzędziowych do wyświetlania wydruku. Obejmuje obsługę tych samych display
wartości, co nasze responsywne .d-*
narzędzia.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Klasy druku i ekspozycji można łączyć.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Sass
Narzędzia API
Narzędzia wyświetlania są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss
. Dowiedz się, jak korzystać z interfejsu API narzędzi.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),