Source

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ść displaywłaściwości za pomocą naszych responsywnych klas narzędzi 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świetl klasy narzędziowe, które mają zastosowanie do wszystkich punktów przerwania , od xsdo xl, 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}dla sm, md, lg, i xl.

Gdzie wartość jest jedną z:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

Zapytania o media wpływają na szerokości ekranu z podanym lub większym punktem przerwania . Na przykład .d-lg-nonezestawy display: none;na obu lgi xlekranach.

Przykłady

d-w linii

<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>

d-blok d-blok

<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 element responsywny dla każdego rozmiaru ekranu.

Aby ukryć elementy, po prostu użyj .d-noneklasy lub jednej z .d-{sm,md,lg,xl}-noneklas dla dowolnej responsywnej odmiany ekranu.

Aby pokazać element tylko w określonym przedziale rozmiarów ekranu, możesz połączyć jedną .d-*-noneklasę z .d-*-*klasą, na przykład .d-none .d-md-block .d-xl-noneukryje 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`
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`

hide on screens wider than lg

ukryj się na ekranach mniejszych niż lg

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Wyświetl w druku

Zmień displaywartość elementów podczas drukowania za pomocą naszych klas narzędziowych do wyświetlania wydruku. Obejmuje obsługę tych samych displaywartości, co nasze responsywne .d-*narzędzia.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.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ć.

Tylko ekran (Ukryj tylko na wydruku)

Print Only (Hide on screen only)

Ukrywaj się do dużego rozmiaru na ekranie, ale zawsze pokazuj na wydruku

<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>