Source

Tulajdonság megjelenítése

Gyorsan és érzékenyen átkapcsolhatja az összetevők megjelenítési értékét és még sok mást megjelenítő segédprogramjainkkal. Tartalmazza néhány általánosabb érték támogatását, valamint néhány extrát a megjelenítés vezérléséhez nyomtatáskor.

Hogyan működik

Változtassa meg az displayingatlan értékét reszponzív megjelenítési hasznossági osztályainkkal. Szándékosan az összes lehetséges értéknek csak egy részét támogatjuk display. Az osztályok szükség szerint kombinálhatók különféle effektusok eléréséhez.

Jelölés

Azon segédprogramosztályok megjelenítése, amelyek minden töréspontra vonatkoznak , tól xs-ig xl, nem tartalmaznak töréspont-rövidítést. Ennek az az oka, hogy ezeket az osztályokat a rendszer elölről min-width: 0;és felfelé alkalmazza, és így nem köti őket médialekérdezés. A fennmaradó töréspontok azonban tartalmaznak egy töréspont-rövidítést.

Ennek megfelelően az osztályokat a következő formátumban nevezik el:

  • .d-{value}számáraxs
  • .d-{breakpoint}-{value}, sm, md, lgés xl.

Ahol az érték a következők egyike:

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

A médialekérdezések a képernyő szélességét az adott vagy annál nagyobb törésponttal befolyásolják . Például .d-lg-nonebeállítja display: none;mindkettőt lgés a xlképernyőket.

Példák

d-inline
d-inline
<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-blokk d-blokk
<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>

Elemek elrejtése

A gyorsabb mobilbarát fejlesztés érdekében használjon reszponzív megjelenítési osztályokat az elemek eszközönkénti megjelenítéséhez és elrejtéséhez. Kerülje el, hogy ugyanannak a webhelynek teljesen különböző verzióit hozzon létre, hanem rejtse el az elemeket az egyes képernyőméretekhez megfelelően.

Az elemek elrejtéséhez egyszerűen használja az .d-noneosztályt vagy az egyik .d-{sm,md,lg,xl}-noneosztályt bármely reszponzív képernyőváltozathoz.

Ha egy elemet csak a képernyőméretek adott intervallumán szeretne megjeleníteni, kombinálhat egy .d-*-noneosztályt egy .d-*-*osztállyal, például .d-none .d-md-block .d-xl-noneelrejti az elemet minden képernyőméretnél, kivéve a közepes és nagy eszközöket.

Kijelzo méret Osztály
Mindenre elrejtve .d-none
Csak xs-en van elrejtve .d-none .d-sm-block
Csak sm-en rejtve .d-sm-none .d-md-block
Csak az md-n rejtve .d-md-none .d-lg-block
Csak lg-n rejtve .d-lg-none .d-xl-block
Csak xl-en rejtve .d-xl-none
Mindenen látható .d-block
Csak xs-en látható .d-block .d-sm-none
Csak sm-en látható .d-none .d-sm-block .d-md-none
Csak az md-n látható .d-none .d-md-block .d-lg-none
Csak lg-en látható .d-none .d-lg-block .d-xl-none
Csak xl-en látható .d-none .d-xl-block
hide on screens wider than lg
elrejteni az lg-nél kisebb képernyőkön
<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>

Megjelenítés nyomtatásban

Módosítsa az displayelemek értékét a nyomtatási megjelenítési segédprogramokkal történő nyomtatáskor. Tartalmazza ugyanazon displayértékek támogatását, mint a mi reszponzív .d-*segédprogramjaink.

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

A nyomtatási és megjelenítési osztályok kombinálhatók.

Csak képernyő (csak nyomtatáskor elrejtés)
Print Only (Hide on screen only)
Elrejteni akár nagy méretig a képernyőn, de mindig megjelenik a nyomtatáson
<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>