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 pakeitus $displayskintamąjį ir iš naujo kompiliuojant 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

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

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

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 .d-xxl-block`
Paslėpta tik xxl	`.d-xxl-none`
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`

hide on lg and wider screens

pasislėpti mažesniuose nei lg ekranuose

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

Print Only (Hide on screen only)

Slėpti iki didelio ekrane, bet visada rodyti spausdinant

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