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 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 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ć, zmieniając $displayszmienną 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-noneustawia display: none;na ekranach lg, xli .xxl

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 elementy responsywne 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 .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`

hide on lg and wider screens

ukryj się na ekranach mniejszych niż lg

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

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>

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