Proprietate de afișare

Comutați rapid și receptiv valoarea de afișare a componentelor și multe altele cu utilitățile noastre de afișare. Include suport pentru unele dintre cele mai comune valori, precum și unele extra pentru controlul afișajului la imprimare.

Pe aceasta pagina

Cum functioneaza

Schimbați valoarea displayproprietății cu clasele noastre de utilitate de afișare receptive. Acceptăm în mod intenționat doar un subset al tuturor valorilor posibile pentru display. Clasele pot fi combinate pentru diferite efecte după cum aveți nevoie.

Notaţie

Afișați clasele de utilitate care se aplică tuturor punctelor de întrerupere , de la xspână la xxl, nu au nicio abreviere a punctului de întrerupere. Acest lucru se datorează faptului că acele clase sunt aplicate de la min-width: 0;și în sus și, prin urmare, nu sunt legate de o interogare media. Punctele de întrerupere rămase, totuși, includ o abreviere a punctului de întrerupere.

Ca atare, clasele sunt denumite folosind formatul:

.d-{value}pentruxs
.d-{breakpoint}-{value}pentru sm, md, lg, xl, și xxl.

Unde valoarea este una dintre:

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

Valorile afișate pot fi modificate prin modificarea displayvalorilor definite în $utilitiesși recompilând SCSS.

Interogările media afectează lățimile ecranului cu punctul de întrerupere dat sau mai mare . De exemplu, .d-lg-nonesetează display: none;pe ecrane lg, xl, și .xxl

Exemple

d-inline

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

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>

Ascunderea elementelor

Pentru o dezvoltare mai rapidă pentru dispozitive mobile, utilizați clase de afișare receptivă pentru afișarea și ascunderea elementelor în funcție de dispozitiv. Evitați să creați versiuni complet diferite ale aceluiași site, în schimb ascundeți elementele în mod receptiv pentru fiecare dimensiune de ecran.

Pentru a ascunde elemente pur și simplu utilizați .d-noneclasa sau una dintre .d-{sm,md,lg,xl,xxl}-noneclase pentru orice variație de ecran receptivă.

Pentru a afișa un element numai pe un interval dat de dimensiuni de ecran, puteți combina o .d-*-noneclasă cu o .d-*-*clasă, de exemplu, .d-none .d-md-block .d-xl-none .d-xxl-noneva ascunde elementul pentru toate dimensiunile ecranului, cu excepția dispozitivelor medii și mari.

Marimea ecranului	Clasă
Ascuns pe toate	`.d-none`
Ascuns doar pe xs	`.d-none .d-sm-block`
Ascuns doar pe sm	`.d-sm-none .d-md-block`
Ascuns doar pe md	`.d-md-none .d-lg-block`
Ascuns doar pe lg	`.d-lg-none .d-xl-block`
Ascuns doar pe xl	`.d-xl-none`
Ascuns doar pe xxl	`.d-xxl-none .d-xxl-block`
Vizibil pe toți	`.d-block`
Vizibil doar pe xs	`.d-block .d-sm-none`
Vizibil doar pe sm	`.d-none .d-sm-block .d-md-none`
Vizibil doar pe md	`.d-none .d-md-block .d-lg-none`
Vizibil doar pe lg	`.d-none .d-lg-block .d-xl-none`
Vizibil doar pe xl	`.d-none .d-xl-block .d-xxl-none`
Vizibil doar pe xxl	`.d-none .d-xxl-block`

ascunde pe ecrane LG și mai late

ascunde pe ecrane mai mici decât 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>

Afișare în imprimare

Schimbați displayvaloarea elementelor atunci când imprimați cu clasele noastre de utilitate de afișare a imprimării. Include suport pentru aceleași displayvalori ca și .d-*utilitățile noastre receptive.

.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

Clasele de imprimare și afișare pot fi combinate.

Numai ecran (Ascunde doar la imprimare)

Doar imprimare (Ascunde doar pe ecran)

Ascundeți până la mare pe ecran, dar afișați întotdeauna pe tipărire

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

Utilities API

Utilitățile de afișare sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),