in English

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

Valorile afișate pot fi modificate prin schimbarea $displaysvariabilei și recompilarea SCSS.

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
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 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}-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
ascunde pe ecrane LG și mai late
ascunde pe ecrane mai mici decât 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>

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)
Doar imprimare (Ascunde doar pe ecran)
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>