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.

Na tej stronie

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 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}dla sm, md, lg, xl, i xxl.

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ć poprzez zmianę displaywartości zdefiniowanych w $utilitiesSCSS i ponowną kompilację.

Zapytania o media wpływają na szerokość ekranu przy podanym lub większym punkcie przerwania . Na przykład .d-lg-noneustawia display: none;na ekranach lg, xli .xxl

Przykłady

d-w linii

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-blok d-blok

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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 responsywnie dla każdego rozmiaru ekranu.

Aby ukryć elementy, po prostu użyj .d-noneklasy lub jednej z .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-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`
Ukryty tylko na xxl	`.d-xxl-none .d-xxl-block`
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`

ukryj się na lg i szerszych ekranach

ukryj się na ekranach mniejszych niż lg

html

<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ń 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-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ć.

Tylko ekran (Ukryj tylko na wydruku)

Tylko drukowanie (Ukryj tylko na ekranie)

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

html

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