Source

Kyerɛ agyapade

Ntɛm na ɛyɛ mmuae toggle display value of components ne nea ɛkeka ho ne yɛn display utilities. Nea ɛka ho ne mmoa a wɔde ma wɔ gyinapɛn ahorow a wɔtaa de di dwuma no bi ho, ne nneɛma foforo bi a wɔde di dwuma a wɔde di ɔyɛkyerɛ so bere a woretintim no.

Sɛnea ɛyɛ adwuma

Sesa displayagyapade no bo a ɛsom ne yɛn mmuae display utility classes. Yɛhyɛ da boa gyinapɛn ahorow a ebetumi aba nyinaa mu kakraa bi pɛ ma display. Wobetumi aka adesua ahorow abom ama nsunsuanso ahorow sɛnea wuhia.

Nkyerɛwde a wɔde kyerɛw nsɛm

Kyerɛ utility adesua ahorow a ɛfa breakpoints nyinaa ho , efi xskosi xl, nni breakpoint abbreviation biara wɔ mu. Eyi te saa efisɛ wɔde saa adesua ahorow no di dwuma fi min-width: 0;ne soro, na ɛnam saa kwan yi so no, wɔmfa nsɛm ho amanneɛbɔfo asɛmmisa nkyekyere wɔn. Nanso, breakpoints a aka no, breakpoint a wɔatwa no tiawa ka ho.

Sɛnea ɛte no, wɔde ɔkwan a wɔfa so yɛ no na ɛto adesuakuw ahorow no din:

  • .d-{value}maxs
  • .d-{breakpoint}-{value}efisɛ sm, md, lg, ne xl.

Baabi a bo a ɛsom yɛ biako wɔ:

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

Wobetumi asesa nkyerɛkyerɛmu botae ahorow no denam nsakrae a wɔbɛsesa $displaysne SCSS no a wɔbɛsan aboaboa ano no so.

Media nsɛmmisa no nkɛntɛnso screen widths ne breakpoint a wɔde ama anaa nea ɛsõ sen saa . Sɛ nhwɛso no, .d-lg-nonesets display: none;wɔ abien no nyinaa lgne xlscreens so.

Nhwɛso ahorow

d-inline no
d-inline no
<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-block a wɔde hyɛ mu d-block a wɔde hyɛ mu
<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>

Nneɛma a wɔde sie

Sɛ wopɛ sɛ wonya nkɔso a ɛyɛ ntɛm a ɛyɛ mobile-friendly a, fa responsive display classes di dwuma de kyerɛ na wode nneɛma sie denam mfiri so. Kwati sɛ wobɛbɔ sait koro no ara nkyerɛase ahorow a ɛsono emu biara koraa, mmom sie nneɛma ahorow a ɛyɛ mmuae ma screen kɛse biara.

Sɛ wode elements besie a, fa .d-noneadesuakuw no anaa adesuakuw no mu biako di dwuma ara kwa .d-{sm,md,lg,xl}-nonema screen nsakrae biara a ɛyɛ mmuae.

Sɛ wopɛ sɛ wokyerɛ element bi wɔ screen sizes ntamgyinafoɔ bi a wɔde ama nkutoo so a wobɛtumi de class baako .d-*-nonene class bi abɔ .d-*-*mu, sɛ nhwɛsoɔ .d-none .d-md-block .d-xl-noneno wode element no bɛsie ama screen sizes nyinaa gye sɛ mfiri a ɛwɔ mfimfini ne akɛseɛ so.

Screen no Kɛse Klaase
Wɔde asie obiara so .d-none
Wɔde ahintaw wɔ xs nkutoo so .d-none .d-sm-block
Wɔde asie wɔ sm nkutoo so .d-sm-none .d-md-block
Wɔde asie md nkutoo so .d-md-none .d-lg-block
Wɔde asie lg nkutoo so .d-lg-none .d-xl-block
Wɔde asie wɔ xl nkutoo so .d-xl-none
Wohu wɔ obiara so .d-block
Wotumi hu wɔ xs nkutoo so .d-block .d-sm-none
Wohu no wɔ sm nkutoo so .d-none .d-sm-block .d-md-none
Wohu no wɔ md nkutoo so .d-none .d-md-block .d-lg-none
Wohu no wɔ lg nkutoo so .d-none .d-lg-block .d-xl-none
Wotumi hu wɔ xl nkutoo so .d-none .d-xl-block
hide on lg and wider screens
sie wɔ screen ahorow a ɛyɛ nketewa sen lg so
<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>

Yi adi wɔ nhoma a wɔatintim mu

Sesa displayelements bo a ɛsom bere a wode yɛn print display utility classes retintim no. Nea ɛka ho ne mmoa a wɔde ma displaygyinapɛn koro no ara a yɛn .d-*utilities a ɛyɛ mmuae no te.

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

Wobetumi de adesua ahorow a wɔde tintim ne nea wɔde kyerɛ no abom.

Screen Nkutoo (Hide wɔ print nkutoo so) .
Print Only (Hide on screen only)
Fa sie kosi kɛse wɔ screen so, nanso kyerɛ bere nyinaa wɔ print so
<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>