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, nexl.
Baabi a bo a ɛsom yɛ biako wɔ:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-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-nonesets display: none;wɔ abien no nyinaa lgne xlscreens so.
Nhwɛso ahorow
<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><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 |
<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.
<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>