Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
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.

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 displaywɔakyerɛkyerɛ mu wɔ $utilitiesSCSS no mu na wɔasan 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
d-inline no
html na ɛwɔ hɔ
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-block a wɔde hyɛ mu d-block a wɔde hyɛ mu
html na ɛwɔ hɔ
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
Wɔde asie wɔ xxl nkutoo so .d-xxl-none .d-xxl-block
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 wɔ lg ne screen ahorow a ɛtrɛw so
sie wɔ screen ahorow a ɛyɛ nketewa sen lg so
html na ɛwɔ hɔ
<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 Nkutoo (Hide on screen nkutoo) .
Fa sie kosi kɛse wɔ screen so, nanso kyerɛ bere nyinaa wɔ print so
html na ɛwɔ hɔ
<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
    ),