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.
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.
Gitoota faayidaa agarsiisi kanneen tuqaawwan cabsuu hunda irratti raawwatiinsa qaban , irraa xs
gara xl
, 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
fixl
.
Bakka gatiin keessaa tokko ta’etti:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Gaaffiiwwan miidiyaa bal'ina iskiriinii qabxii cabbii kennamee ykn guddaa ta'een bu'aa . Fakkeenyaaf, lamaan isaanii fi iskiriinii irratti .d-lg-none
saaga .display: none;
lg
xl
<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>
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 iskiriiniif deebii kennuudhaan elementii dhoksi.
Qaamolee dhoksuuf salphaatti .d-none
gita ykn gita keessaa tokko .d-{sm,md,lg,xl}-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
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 |
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 |
<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>
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-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>