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

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