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

Wyświetlane wartości można zmienić, zmieniając $displayszmienną i ponownie kompilując SCSS.

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