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.
Ibdel il-valur tal- display
proprjetà 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.
Uri klassijiet ta' utilità li japplikaw għall- punti ta' waqfien kollha , minn xs
sa 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ħalsm
,md
,lg
, uxl
.
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-none
settijiet display: none;
fuq it-tnejn lg
u l- xl
iskrins.
<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>
<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>
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 l-apparat. 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-none
klassi jew waħda mill- .d-{sm,md,lg,xl}-none
klassijiet għal kwalunkwe varjazzjoni tal-iskrin li tirrispondi.
Biex turi element biss fuq intervall partikolari ta 'daqsijiet tal-iskrin tista' tgħaqqad .d-*-none
klassi waħda ma ' .d-*-*
klassi, pereżempju .d-none .d-md-block .d-xl-none
se 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 |
<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>
Ibdel il- display
valur tal-elementi meta tipprintja bil-klassijiet tal-utilità tal-wiri tal-istampar tagħna. Jinkludi appoġġ għall-istess display
valuri 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.
<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>