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.

Wɔ kratafa yi so

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 xxl, 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, xl, ne xxl.

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

none
inline
inline-block
block
grid
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 nya screen widths a wɔde ama no breakpoint anaa nea ɛsõ sen saa no so nkɛntɛnso . Sɛ nhwɛso no, .d-lg-noneɛde display: none;si lg, xl, ne xxlscreen ahorow so.

Nhwɛso ahorow

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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Wɔde asie wɔ xxl nkutoo so	`.d-xxl-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 .d-xxl-none`
Wohu wɔ xxl nkutoo so	`.d-none .d-xxl-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-grid
.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>

Sass

Nneɛma a wɔde di dwuma API

Wɔabɔ display utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.

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