Source

Proprjetà tal-wiri

Aqleb malajr u b'mod reattiv il-valur tal-wiri tal-komponenti u aktar mal-utilitajiet tal-wiri tagħna. Jinkludi appoġġ għal uħud mill-valuri l-aktar komuni, kif ukoll xi affarijiet żejda għall-kontroll tal-wiri waqt l-istampar.

Kif taħdem

Ibdel il-valur tal- displayproprjetà bil-klassijiet ta 'utilità tal-wiri li jirrispondu tagħna. Aħna apposta nappoġġjaw biss subsett tal-valuri kollha possibbli għal display. Il-klassijiet jistgħu jingħaqdu għal diversi effetti kif għandek bżonn.

Notazzjoni

Uri klassijiet ta' utilità li japplikaw għall- punti ta' waqfien kollha , minn xssa xl, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0;u 'l fuq, u għalhekk mhumiex marbuta b'interrogazzjoni tal-midja. Il-punti ta' waqfien li jifdal, madankollu, jinkludu abbrevjazzjoni ta' breakpoint.

Bħala tali, il-klassijiet huma msemmija bl-użu tal-format:

  • .d-{value}għalxs
  • .d-{breakpoint}-{value}għal sm, md, lg, u xl.

Fejn il- valur huwa wieħed minn:

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

Il-mistoqsijiet tal-midja jeffettwaw il-wisa' tal-iskrin bil-punt ta' waqfien mogħti jew akbar . Per eżempju, .d-lg-nonesettijiet display: none;fuq it-tnejn lgu l- xliskrins.

Eżempji

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

Ħabi ta 'elementi

Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża klassijiet tal-wiri li jirrispondu biex turi u taħbi elementi skont it-tagħmir. Evita li toħloq verżjonijiet kompletament differenti tal-istess sit, minflok aħbi l-element b'mod reattiv għal kull daqs tal-iskrin.

Biex taħbi l-elementi sempliċement uża l- .d-noneklassi jew waħda mill- .d-{sm,md,lg,xl}-noneklassijiet għal kwalunkwe varjazzjoni tal-iskrin li tirreaġixxi.

Biex turi element biss fuq intervall partikolari ta 'daqsijiet tal-iskrin tista' tgħaqqad .d-*-noneklassi waħda ma ' .d-*-*klassi, pereżempju .d-none .d-md-block .d-xl-nonese taħbi l-element għad-daqsijiet tal-iskrin kollha ħlief fuq apparati medji u kbar.

Daqs tal-Iskrin Klassi
Moħbi fuq kollox .d-none
Moħbi biss fuq xs .d-none .d-sm-block
Moħbi biss fuq sm .d-sm-none .d-md-block
Moħbi biss fuq md .d-md-none .d-lg-block
Moħbi biss fuq lg .d-lg-none .d-xl-block
Moħbi biss fuq xl .d-xl-none
Viżibbli fuq kulħadd .d-block
Viżibbli biss fuq xs .d-block .d-sm-none
Viżibbli biss fuq sm .d-none .d-sm-block .d-md-none
Viżibbli biss fuq md .d-none .d-md-block .d-lg-none
Viżibbli biss fuq lg .d-none .d-lg-block .d-xl-none
Viżibbli biss fuq xl .d-none .d-xl-block
hide on screens wider than lg
jinħbew fuq skrins iżgħar minn lg 
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Wiri stampat

Ibdel il- displayvalur tal-elementi meta tipprintja bil-klassijiet tal-utilità tal-wiri tal-istampar tagħna. Jinkludi appoġġ għall-istess displayvaluri bħall- .d-*utilitajiet reattivi tagħna.

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

Il-klassijiet tal-istampar u tal-wiri jistgħu jingħaqdu.

Skrin biss (Aħbi fuq l-istampar biss)
Print Only (Hide on screen only)
Aħbi sa kbar fuq l-iskrin, imma dejjem uri fuq l-istampar 
<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>