Gozgalmaýan emläk görkeziň

Ekranyň kömekçi enjamlary bilen komponentleriň displeý bahasyny we has çalt çalşyň. Has giňden ýaýran gymmatlyklaryň käbirini, şeýle hem çap edilende ekrany dolandyrmak üçin käbir goşmaçalary öz içine alýar.

Bu sahypada

Bu nähili işleýär

Duýgur displeý peýdaly synplarymyz bilen displayemlägiň bahasyny üýtgediň . Bilgeşleýin ähli mümkin bolan gymmatlyklaryň diňe bir bölegini goldaýarys display. Sapaklar zerur bolanda dürli effektler üçin birleşdirilip bilner.

Bellik

Breakhli nokatlara degişli peýdaly synplary görkeziň , olardan xsbaşlap xxl, nokatlaryň gysgaldylyşy ýok. Sebäbi bu synplar min-width: 0;ýokary we ýokary derejede ulanylýar we şeýlelik bilen media soragy bilen baglanyşykly däl. Galan bölekler bolsa, nokat gysgaltmasyny öz içine alýar.

Şeýle bolansoň, synplar formaty ulanyp atlandyrylýar:

.d-{value}üçinxs
.d-{breakpoint}-{value}üçin sm,,, we . md_ lg_xlxxl

Gymmatlyklaryň biri :

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

Ekranyň bahalary , SCSS display-de kesgitlenen bahalary üýtgetmek we üýtgetmek arkaly üýtgedilip bilner.$utilities

Mediýa talaplary, berlen nokat ýa-da has uly ekran giňligine täsir edýär . Mysal üçin , .d-lg-noneekranlar we display: none;ekranlar .lgxlxxl

Mysallar

d-setir

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

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>

Elementleri gizlemek

Öýjükli dostlugy has çalt ösdürmek üçin elementleri enjam arkaly görkezmek we gizlemek üçin täsirli displeý sapaklaryny ulanyň. Bir sahypanyň düýbünden başga wersiýalaryny döretmekden gaça duruň, ýerine her ekranyň ululygy üçin elementleri jogap beriň.

Elementleri gizlemek üçin, islendik ekranyň üýtgemegi üçin .d-nonesynpy ýa-da synplaryň birini ulanyň..d-{sm,md,lg,xl,xxl}-none

Ekranyň ululyklarynyň belli bir aralygynda bir elementi görkezmek üçin bir .d-*-nonesynpy synp bilen birleşdirip bilersiňiz .d-*-*, mysal üçin .d-none .d-md-block .d-xl-none .d-xxl-noneelementi orta we uly enjamlardan başga ähli ekran ululyklary üçin gizlär.

Ekranyň ululygy	Synp
Hemmesine gizlenen	`.d-none`
Diňe xs-da gizlenýär	`.d-none .d-sm-block`
Diňe sm-de gizlenýär	`.d-sm-none .d-md-block`
Diňe md-de gizlenýär	`.d-md-none .d-lg-block`
Diňe lg-da gizlenýär	`.d-lg-none .d-xl-block`
Diňe xl-da gizlenýär	`.d-xl-none`
Diňe xxl-de gizlenýär	`.d-xxl-none .d-xxl-block`
Hemmesine görünýär	`.d-block`
Diňe xs-da görünýär	`.d-block .d-sm-none`
Diňe sm-de görünýär	`.d-none .d-sm-block .d-md-none`
Diňe md-de görünýär	`.d-none .d-md-block .d-lg-none`
Diňe lg-da görünýär	`.d-none .d-lg-block .d-xl-none`
Diňe xl-de görünýär	`.d-none .d-xl-block .d-xxl-none`
Diňe xxl-de görünýär	`.d-none .d-xxl-block`

lg we has giň ekranlarda gizläň

lg-dan kiçi ekranlarda gizläň

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>

Çapda görkez

displayÇap ediş peýdaly synplarymyz bilen çap edilende elementleriň bahasyny üýtgediň . Jogapkärçilikli hyzmatlarymyz bilen deň displaybahalary goldaýar..d-*

.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

Çap etmek we görkezmek synplary birleşdirilip bilner.

Diňe ekran (Diňe çap etmekde gizläň)

Diňe çap et (Diňe ekranda gizle)

Ekranda uly derejede gizläň, ýöne elmydama çapda görkeziň

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

Ekranyň kömekçi hyzmatlary API-de görkezilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

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