in English

Rodyti nuosavybę

Greitai ir reaguodami perjunkite komponentų rodymo reikšmę ir dar daugiau naudodami mūsų ekrano priemones. Apima kai kurių įprastų verčių palaikymą, taip pat kai kuriuos priedus, skirtus valdyti ekraną spausdinant.

Šiame puslapyje

Kaip tai veikia

Pakeiskite displaynuosavybės vertę naudodami mūsų interaktyvias vaizdo naudingumo klases. Sąmoningai palaikome tik visų galimų reikšmių poaibį display. Klasės gali būti derinamos įvairiems efektams pagal poreikį.

Žymėjimas

Rodyti naudingumo klases, kurios taikomos visiems lūžio taškams nuo xsiki xxl, jose nėra lūžio taško santrumpos. Taip yra todėl, kad šios klasės taikomos nuo min-width: 0;pradžios iki galo ir todėl nėra susietos su medijos užklausa. Tačiau likusiuose lūžio taškuose yra lūžio taško santrumpa.

Taigi klasės pavadintos tokiu formatu:

.d-{value}dėlxs
.d-{breakpoint}-{value}, sm, md, ir . lg_xlxxl

Kai vertė yra viena iš:

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

Ekrano reikšmes galima pakeisti keičiant nustatytas displayreikšmes $utilitiesir iš naujo sukompiliuojant SCSS.

Medijos užklausos turi įtakos ekrano pločiui su nurodyta ar didesniu lūžio tašku . Pavyzdžiui, .d-lg-nonerinkiniai display: none;, lg, xlir xxlekranuose.

Pavyzdžiai

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

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>

Slėpti elementai

Norėdami greičiau kurti mobiliesiems pritaikytą kūrimą, naudokite reaguojančias rodymo klases elementams pagal įrenginį rodyti ir slėpti. Stenkitės nekurti visiškai skirtingų tos pačios svetainės versijų, o slėpti elementus pagal kiekvieną ekrano dydį.

Norėdami paslėpti elementus, tiesiog naudokite .d-noneklasę arba vieną iš .d-{sm,md,lg,xl,xxl}-noneklasių bet kokiam reaguojančiam ekrano variantui.

Norėdami rodyti elementą tik tam tikru ekrano dydžių intervalu, galite sujungti vieną .d-*-noneklasę su .d-*-*klase, pavyzdžiui .d-none .d-md-block .d-xl-none .d-xxl-none, elementas bus paslėptas visų dydžių ekranuose, išskyrus vidutinius ir didelius įrenginius.

Ekrano dydis	Klasė
Paslėpta ant visų	`.d-none`
Paslėpta tik ant xs	`.d-none .d-sm-block`
Paslėpta tik ant sm	`.d-sm-none .d-md-block`
Paslėpta tik md	`.d-md-none .d-lg-block`
Paslėpta tik lg	`.d-lg-none .d-xl-block`
Paslėpta tik xl	`.d-xl-none`
Paslėpta tik xxl	`.d-xxl-none .d-xxl-block`
Matoma ant visų	`.d-block`
Matoma tik ant xs	`.d-block .d-sm-none`
Matoma tik sm	`.d-none .d-sm-block .d-md-none`
Matoma tik md	`.d-none .d-md-block .d-lg-none`
Matoma tik lg	`.d-none .d-lg-block .d-xl-none`
Matoma tik ant xl	`.d-none .d-xl-block .d-xxl-none`
Matoma tik xxl	`.d-none .d-xxl-block`

paslėpti LG ir platesniuose ekranuose

pasislėpti mažesniuose nei lg ekranuose

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>

Rodyti spaudoje

Pakeiskite displayelementų vertę spausdindami naudodami mūsų spausdinimo rodymo naudingumo klases. Apima palaikymą toms pačioms displayvertybėms kaip ir mūsų reaguojančios .d-*komunalinės paslaugos.

.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

Spausdinimo ir demonstravimo klases galima derinti.

Tik ekranas (slėpti tik spausdinant)

Tik spausdinimas (Slėpti tik ekrane)

Slėpti iki didelio ekrane, bet visada rodyti spausdinant

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

Ekrano paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų API.

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