in English

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 de 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 media 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ɛsakra no $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 koraa, mmom sie nneɛma ahorow a ɛyɛ mmuae ma screen kɛse biara.

Sɛ wode element ahorow besie a, fa .d-noneadesuakuw no anaa .d-{sm,md,lg,xl,xxl}-noneadesua ahorow no mu biako di dwuma ara kwa ma 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 no 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
    ),