in English

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

displayGatii 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 xsgara 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, lgfi xl.

Bakka gatiin keessaa tokko ta’etti:

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

Gatiiwwan agarsiisaa jijjiiramaa jijjiiruu $displaysfi SCSS irra deebi'anii qindeessuudhaan jijjiiramuu danda'u.

Gaaffiiwwan miidiyaa bal'ina iskiriinii tuqaa cabbii kennamee ykn guddaa ta'een dhiibbaa . Fakkeenyaaf, lamaan isaanii fi iskiriinii irratti .d-lg-nonesaaga .display: none;lgxl

Fakkeenyaaf

d-sarara keessaa
d-sarara keessaa 
<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-block jedhu d-block jedhu 
<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-nonegita ykn gita keessaa tokko .d-{sm,md,lg,xl}-nonejijjiirama iskiriinii deebii kennuu kamiifuu fayyadami.

.d-*-noneQaama tokko gidduugaleessa hammangaa iskiriinii kenname qofa irratti agarsiisuuf gita tokko gita waliin walitti makuu dandeessa .d-*-*, fakkeenyaaf .d-none .d-md-block .d-xl-noneelementii 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
lg fi iskiriinii bal’aa irratti dhoksuu
iskiriinii lg caalaa xiqqaa ta’e irratti dhoksuu 
<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

displayGatii elementoota yeroo gitaalee faayidaa agarsiisa maxxansaa keenyaan maxxansitu jijjiiri . Deeggarsa displaygatiiwwan 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.

Iskiriinii Qofa (Maxxansaa qofa irratti dhoksi) .
Maxxansa Qofa (Iskiriinii qofa irratti dhoksi) .
Iskiriinii irratti hanga guddaatti dhoksi, garuu yeroo hunda maxxansaa irratti agarsiisi 
<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>