Source

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.

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 xl, 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, și xl.

Unde valoarea este una dintre:

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

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

Exemple

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

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

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 elementul î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}-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-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`
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`

hide on screens wider than lg

ascunde pe ecrane mai mici decât lg

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

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

Print Only (Hide on screen only)

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

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