Asehoy ny fananana

Ampifamadiho haingana sy mamaly ny sandan'ny fampiratiana ny singa sy ny maro hafa miaraka amin'ny fitaovana fampirantianay. Ahitana fanohanana ny sasany amin'ireo soatoavina mahazatra kokoa, ary koa ny fanampiny sasany amin'ny fanaraha-maso ny fampisehoana rehefa manonta.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Ovay ny sandan'ny displayfananana miaraka amin'ireo kilasin'ny fitaovana fampirantiana mandray andraikitra. Ny ampahany kely amin'ny sanda rehetra azo atao ho an'ny display. Ny kilasy dia azo atambatra ho an'ny vokatra isan-karazany araka izay ilainao.

tarehimarika

Asehoy ireo kilasy fampiasa izay mihatra amin'ny teboka fiatoana rehetra , manomboka xsamin'ny xxl, tsy misy fanafohezan-tohatra tapaka ao aminy. Izany dia satria ireo kilasy ireo dia ampiharina avy any min-width: 0;ambony, ary noho izany dia tsy voafatotry ny fangatahana media. Ny teboka sisa tavela anefa dia misy fanafohezan-teny.

Noho izany, nomena anarana ireo kilasy amin'ny alàlan'ny format:

.d-{value}HO AN'NYxs
.d-{breakpoint}-{value}ho an'ny sm, md, lg, xlary xxl.

Ny sanda dia iray amin'ireo:

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

Ny soatoavina aseho dia azo ovaina amin'ny alalan'ny fanovana ny displaysoatoavina voafaritra ao amin'ny $utilitiessy ny famerenana indray ny SCSS.

Misy fiantraikany amin'ny sakan'ny efijery amin'ny teboka fiatoana nomena na lehibe kokoa ny fanontaniana media . Ohatra, .d-lg-nonenapetraka display: none;amin'ny lg, xl, ary xxlefijery.

OHATRA

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Manafina singa

Mba hampivoarana haingana kokoa ho an'ny finday, ampiasao ny kilasin'ny fampisehoana mandray andraikitra hanehoana sy hanafenana singa amin'ny fitaovana. Fadio ny mamorona dikan-teny hafa tanteraka amin'ny tranokala iray ihany, fa afeno tsara ny singa isaky ny haben'ny efijery.

Mba hanafenana singa dia ampiasao fotsiny ny .d-nonekilasy na ny iray amin'ireo .d-{sm,md,lg,xl,xxl}-nonekilasy ho an'ny fiovaovan'ny efijery mamaly.

Mba hampisehoana singa iray ihany amin'ny elanelana misy ny haben'ny efijery dia azonao atao ny manambatra .d-*-nonekilasy iray amin'ny .d-*-*kilasy iray, ohatra .d-none .d-md-block .d-xl-none .d-xxl-nonedia hanafina ny singa ho an'ny habe rehetra afa-tsy amin'ny fitaovana antonony sy lehibe.

Haben'ny efijery	KILASY
Miafina amin'ny rehetra	`.d-none`
Afenina amin'ny xs ihany	`.d-none .d-sm-block`
Afenina ao amin'ny sm	`.d-sm-none .d-md-block`
Miafina ao amin'ny md	`.d-md-none .d-lg-block`
Afenina ao amin'ny lg ihany	`.d-lg-none .d-xl-block`
Afenina amin'ny xl ihany	`.d-xl-none`
Afenina ao amin'ny xxl ihany	`.d-xxl-none .d-xxl-block`
Hita amin'ny rehetra	`.d-block`
Tsy hita afa-tsy amin'ny xs	`.d-block .d-sm-none`
Tsy hita afa-tsy amin'ny sm	`.d-none .d-sm-block .d-md-none`
Tsy hita afa-tsy amin'ny md	`.d-none .d-md-block .d-lg-none`
Tsy hita afa-tsy amin'ny lg	`.d-none .d-lg-block .d-xl-none`
Tsy hita afa-tsy amin'ny xl	`.d-none .d-xl-block .d-xxl-none`
Tsy hita afa-tsy amin'ny xxl	`.d-none .d-xxl-block`

afeno amin'ny ecran lg sy midadasika kokoa

afeno amin'ny écran kely kokoa noho ny lg

html

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

Asehoy amin'ny printy

Ovay ny displaysandan'ny singa rehefa manao pirinty miaraka amin'ireo kilasin'ny fitaovana fampirantiana fanontana. Ahitana fanohanana ireo displaysoatoavina mitovy amin'ny .d-*fampiasantsika mandray andraikitra.

.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

Ny kilasy fanontana sy fampisehoana dia azo atambatra.

Ecran Ihany (Afeno amin'ny printy ihany)

Print Only (Afeno eo amin'ny efijery ihany)

Afeno hatramin'ny lehibe eo amin'ny efijery, fa aseho amin'ny printy foana

html

<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

Utilities API

Ny fitaovana fampirantiana dia nambara ao amin'ny API fampiasanay ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility API.

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