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 nähili işleýär
Duýgur displeý peýdaly synplarymyz bilen display
emlä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 xs
başlap xl
, 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}
üçinsm
,,, we .md
_lg
xl
Gymmatlyklaryň biri :
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
$displays
Ekranyň bahalaryny üýtgeýjini üýtgetmek we SCSS-i täzeden düzmek arkaly üýtgedip bolýar .
Mediýa talaplary, berlen nokat ýa-da has uly ekran giňligine täsir edýär . Mysal üçin, .d-lg-none
ikisinde display: none;
-de lg
, xl
ekranlarda-da goýulýar.
Mysallar
<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>
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 jogap elementlerini gizläň.
Elementleri gizlemek üçin, islendik ekranyň üýtgemegi üçin .d-none
synpy ýa-da synplaryň birini ulanyň..d-{sm,md,lg,xl}-none
Ekranyň ululyklarynyň belli bir aralygynda bir elementi görkezmek üçin bir .d-*-none
synpy synp bilen birleşdirip bilersiňiz .d-*-*
, mysal üçin .d-none .d-md-block .d-xl-none
orta we uly enjamlardan başga ähli ululykdaky elementi 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 |
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 |
<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ň display
bahalary goldaýar..d-*
.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
Çap etmek we görkezmek synplary birleşdirilip bilner.
<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>