Qabeentaa agarsiisi
Faayidaa agarsiisaa keenyaan gatii agarsiisaa qaamolee fi kanneen biroo saffisaa fi deebii kennuudhaan jijjiiri. Deeggarsa gatiiwwan baay'ee beekamoo ta'an tokko tokkoof, akkasumas dabalataa tokko tokko agarsiisa yeroo maxxansuu to'achuuf of keessatti qabata.
Akkaataa itti hojjetu
display
Gatii qabeentaa gitaalee faayidaa agarsiisa deebii kennuu keenyaan jijjiiri . Kaayyoodhaan tuuta xiqqaa gatiiwwan ta'uu danda'an hunda qofa deeggarra display
. Kutaawwan akka barbaachisummaa keessaniitti bu’aa adda addaatiif walitti makuun ni danda’ama.
Nootashinii
Gitoota faayidaa agarsiisi kanneen tuqaawwan cabsuu hunda irratti raawwatiinsa qaban , irraa xs
gara xxl
, gabaabduu tuqaa ciccitaa isaan keessaa hin qaban. Sababni isaas, gitawwan sun irraa min-width: 0;
fi ol hojii irra waan oolan, kanaaf gaaffii miidiyaatiin waan hin hidhamneef. Qabxiileen cabbii hafan garuu gabaabduu qabxii cabbii of keessatti qabatu.
Akka kanaan, kutaaleen bifa fayyadamuun moggaafamu:
.d-{value}
-fxs
.d-{breakpoint}-{value}
,sm
,md
,lg
,xl
fixxl
.
Bakka gatiin keessaa tokko ta’etti:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Gatiiwwan agarsiisaa jijjiiramaa jijjiiruu $displays
fi SCSS irra deebi'anii qindeessuudhaan jijjiiramuu danda'u.
Gaaffiiwwan miidiyaa bal'ina iskiriinii tuqaa cabbii kennamee ykn guddaa ta'een dhiibbaa . Fakkeenyaaf, , , fi iskiriinii irratti .d-lg-none
saaga .display: none;
lg
xl
xxl
Fakkeenyaaf
<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>
Qaamolee dhoksuu
Misooma saffisaa mobaayilaaf mijaawaa ta'eef, elementoota meeshaadhaan agarsiisuu fi dhoksuuf gita agarsiisa deebii kennu fayyadami. Guutummaatti gosoota adda addaa saayitii walfakkaataa uumuu irraa fagaadhu, kanaa mannaa tokkoon tokkoo hammangaa iskiriiniidhaaf qaamolee deebii kennuudhaan dhoksi.
Qaamolee dhoksuuf salphaatti .d-none
gita ykn gita keessaa tokko .d-{sm,md,lg,xl,xxl}-none
jijjiirama iskiriinii deebii kennuu kamiifuu fayyadami.
.d-*-none
Qaama tokko gidduugaleessa hammangaa iskiriinii kenname qofa irratti agarsiisuuf gita tokko gita waliin walitti makuu dandeessa .d-*-*
, fakkeenyaaf .d-none .d-md-block .d-xl-none .d-xxl-none
elementii hammangaa iskiriinii hundaaf meeshaalee giddugaleessaa fi gurguddoo irratti malee ni dhoksa.
Guddina iskiriinii | Kutaa |
---|---|
Hundaa irratti dhokatee jira | .d-none |
xs qofa irratti dhokatee jira | .d-none .d-sm-block |
Dhokfame qofa irratti sm | .d-sm-none .d-md-block |
md qofa irratti dhokatee jira | .d-md-none .d-lg-block |
lg qofa irratti dhokatee jira | .d-lg-none .d-xl-block |
xl qofa irratti dhokatee jira | .d-xl-none .d-xxl-block |
xxl qofa irratti dhokatee jira | .d-xxl-none |
Hundaa irratti mul'ata | .d-block |
xs qofa irratti mul'ata | .d-block .d-sm-none |
sm qofa irratti mul'ata | .d-none .d-sm-block .d-md-none |
md qofa irratti mul'ata | .d-none .d-md-block .d-lg-none |
lg qofa irratti mul'ata | .d-none .d-lg-block .d-xl-none |
xl qofa irratti mul'ata | .d-none .d-xl-block .d-xxl-none |
xxl qofa irratti mul'ata | .d-none .d-xxl-block |
<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>
Maxxansa keessatti agarsiisi
display
Gatii elementoota yeroo gitaalee faayidaa agarsiisa maxxansaa keenyaan maxxansitu jijjiiri . Deeggarsa display
gatiiwwan walfakkaatan kan .d-*
faayidaa deebii kennan keenyaa of keessatti qabata.
.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
Gitoota maxxansaa fi agarsiisaa walitti makuun ni danda'ama.
<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 jedhama
API faayidaa
Faayidaaleen agarsiisaa API faayidaa keenya keessatti labsamu bara scss/_utilities.scss
. Akkaataa API faayilii itti fayyadamtu baradhu.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),