Taybetmendiyê nîşan bide

Bi karûbarên pêşandana me re bi lez û bez nirxa pêşandana pêkhateyan û bêtir biguhezînin. Piştgiriyek ji bo hin nirxên gelemperî, û her weha hin pêvekên ji bo kontrolkirina dîmenderê dema çapkirinê vedihewîne.

Li ser vê rûpelê

Çawa dixebite

Bi dersên meya karûbarê nîşana bersivdar nirxa displayxanî biguhezînin. Em bi mebest tenê beşek ji hemî nirxên gengaz ji bo piştgirî dikin display. Ders dikarin ji bo bandorên cihêreng ên ku hûn hewce ne bêne hev kirin.

Notation

Nîşana çînên bikêrhatî yên ku ji bo hemî xalên veqetînê , ji xsber xxl, di wan de kurtenivîsa xala veqetînê tune. Ev ji ber ku ew ders ji min-width: 0;û jor têne sepandin, û bi vî rengî bi pirsek medyayê ve girêdayî ne. Lêbelê, xalên veqetandinê yên mayî, kurtenivîsek xala veqetînê vedihewînin.

Bi vî rengî, çîn bi karanîna formê têne nav kirin:

.d-{value}boxs
.d-{breakpoint}-{value}ji bo sm, md, lg, xl, û xxl.

Ku nirx yek ji wan e:

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

Nirxên xuyangê dikarin bi guheztina displaynirxên ku di SCSS-ê de hatine destnîşan kirin $utilitiesû ji nû ve berhevkirina SCSS-ê werin guheztin.

Pirsên medyayê bi xala veqetînê ya diyarkirî an mezintir bandorê li firehiyên ekranê dikin . Mînakî, li ser , , û ekranan saz dike .d-lg-none.display: none;lgxlxxl

Examples

d-inline

html

<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 d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Hêmanên veşartî

Ji bo pêşkeftina heval-mobîl zûtir, dersên dîmendera bersivdar bikar bînin da ku hêmanên ji hêla cîhazê ve nîşan û veşêrin. Ji afirandina guhertoyên bi tevahî cihêreng ên heman malperê dûr bisekinin, li şûna wê ji bo her mezinahiya ekranê hêmanan bi bersiv veşêrin.

Ji bo veşartina hêmanan, tenê ji bo her guhertoya ekrana bersivdar .d-nonepolê an yek ji çînan bikar bînin..d-{sm,md,lg,xl,xxl}-none

Ji bo ku hêmanek tenê li ser navberek diyarkirî ya mezinahiyên ekranê nîşan bidin, hûn dikarin yek .d-*-nonepolê bi polê re bikin yek .d-*-*, mînakî .d-none .d-md-block .d-xl-none .d-xxl-nonedê hêmanê ji bo hemî pîvanên ekranê ji bilî cîhazên navîn û mezin veşêrin.

Mezinahiya ekranê	Sinif
Li ser her tiştî veşartî	`.d-none`
Tenê li ser xs veşartî	`.d-none .d-sm-block`
Tenê li ser sm veşartî	`.d-sm-none .d-md-block`
Tenê li ser md veşartî	`.d-md-none .d-lg-block`
Tenê li ser lg veşartî	`.d-lg-none .d-xl-block`
Tenê li ser xl veşartî	`.d-xl-none`
Tenê li ser xxl veşartî	`.d-xxl-none .d-xxl-block`
Li ser hemûyan xuya dibe	`.d-block`
Tenê li ser xs xuya dibe	`.d-block .d-sm-none`
Tenê li ser sm xuya dibe	`.d-none .d-sm-block .d-md-none`
Tenê li ser md xuya dibe	`.d-none .d-md-block .d-lg-none`
Tenê li ser lg xuya dibe	`.d-none .d-lg-block .d-xl-none`
Tenê li ser xl xuya dibe	`.d-none .d-xl-block .d-xxl-none`
Tenê li ser xxl xuya dibe	`.d-none .d-xxl-block`

li ser ekranên lg û berfireh veşêrin

li ser ekranên ji lg piçûktir veşêrin

html

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

Di çapê de nîşan bide

displayDema çapkirinê bi dersên meya karûbarê nîşana çapê re nirxa hêmanan biguhezînin . Piştgiriya ji bo heman displaynirxan wekî karûbarên me yên bersivdar .d-*vedihewîne.

.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

Dersên çap û pêşandanê dikarin bêne hev kirin.

Tenê ekran (tenê li ser çapê veşêre)

Tenê çap bike (Tenê li ser ekranê veşêre)

Li ser ekranê heya mezin veşêrin, lê her gav li ser çapê nîşan bidin

html

<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

Utilities API

Karûbarên pêşandanê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

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