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.

Fuq din il-paġna

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 xxl, 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, xl, u xxl.

Fejn il- valur huwa wieħed minn:

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

Il-valuri tal-wiri jistgħu jinbidlu billi tinbidel il- $displaysvarjabbli u terġa 'tikkompila l-SCSS.

Il-mistoqsijiet tal-midja jaffettwaw il-wisa' tal-iskrin bil-punt ta' waqfien mogħti jew akbar . Per eżempju, .d-lg-nonesettijiet display: none;fuq lg, xl, u xxlskrins.

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-elementi 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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Moħbi biss fuq xxl	`.d-xxl-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 .d-xxl-none`
Viżibbli biss fuq xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

jinħbew fuq skrins iżgħar minn lg

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

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

Sass

Utilitajiet API

L-utilitajiet tal-wiri huma ddikjarati fl-API tal-utilitajiet tagħna f' scss/_utilities.scss. Tgħallem kif tuża l-API tal-utilitajiet.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),