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.

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 xl, 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, lgir xl.

Kai vertė yra viena iš:

  • none
  • inline
  • inline-block
  • block
  • 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, rinkiniai .d-lg-noneir display: none;ekranuose .lgxl

Pavyzdžiai

d-inline
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}-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, 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
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
paslėpti LG ir platesniuose ekranuose
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-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 
<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>