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.

Fuula kana irratti

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 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, xlfi xxl.

Bakka gatiin keessaa tokko ta’etti:

none
inline
inline-block
block
grid
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, , , fi iskiriinii irratti .d-lg-nonesaaga .display: none;lgxlxxl

Fakkeenyaaf

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,xxl}-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-none .d-xxl-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 .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`

hide on lg and wider screens

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

Iskiriinii Qofa (Maxxansaa qofa irratti dhoksi) .

Print Only (Hide on screen only)

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>

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