خاسلىقنى كۆرسىتىش

زاپچاسلىرىمىزنىڭ كۆرسىتىش قىممىتىنى تېز ۋە ئىنكاسچان ھالدا كۆرسىتىش ئۈسكۈنىلىرىمىز بىلەن ئالماشتۇرۇڭ. كۆپ ئۇچرايدىغان بىر قىسىم قىممەتلەرنى قوللاش ، شۇنداقلا بېسىپ چىقارغاندا ئېكراننى كونترول قىلىش ئۈچۈن قوشۇمچە ماتېرىياللارنى ئۆز ئىچىگە ئالىدۇ.

بۇ بەتتە

قانداق ئىشلەيدۇ

بىزنىڭ ئىنكاسچان كۆرسىتىش دەرسلىكلىرىمىز بىلەن displayمۈلۈكنىڭ قىممىتىنى ئۆزگەرتىڭ . بىز پەقەت بارلىق مۇمكىن بولغان قىممەتلەرنىڭ بىر قىسمىنىلا مەقسەتلىك قوللايمىز display. ئېھتىياجغا ئاساسەن ھەر خىل ئۈنۈملەر ئۈچۈن دەرسلەرنى بىرلەشتۈرگىلى بولىدۇ.

ئىزاھات

بارلىق بۆسۈش نۇقتىلىرىغاxs ماس كېلىدىغان پايدىلىق دەرسلەرنى كۆرسىتىش ، xxlئۇلاردا ئۈزۈلۈپ قېلىش قىسقارتىلمىسى يوق. چۈنكى ئۇ دەرسلەر يۇقىرى-تۆۋەن قوللىنىلىدۇ min-width: 0;، شۇڭا تاراتقۇلارنىڭ سوئالى بىلەن باغلانمايدۇ. قالغان بۆسۈش نۇقتىلىرى بۆسۈش قىسقارتىلمىسىنى ئۆز ئىچىگە ئالىدۇ.

مۇشۇنىڭغا ئوخشاش ، دەرسلەر فورماتى ئارقىلىق ئاتالغان:

.d-{value}forxs
.d-{breakpoint}-{value}ئۈچۈن sm، md، lg، xlۋە xxl.

قەيەردە قىممەت بولسا:

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

كۆرسىتىش قىممىتىنى SCSS displayدا ئېنىقلانغان قىممەتنى ئۆزگەرتىش ۋە ئۆزگەرتىش ئارقىلىق ئۆزگەرتىشكە بولىدۇ .$utilities

مېدىيا سوئاللىرى بېرىلگەن بۆسۈش ياكى چوڭراق ئېكران كەڭلىكىگە تەسىر كۆرسىتىدۇ . مەسىلەن ، .d-lg-noneتەڭشەش ۋە display: none;ئېكران .lgxlxxl

مىساللار

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>

ئېلېمېنتلارنى يوشۇرۇش

كۆچمە قولايلىق تەرەققىيات ئۈچۈن ، ئۈسكۈنىلەرنى كۆرسىتىش ۋە يوشۇرۇش ئۈچۈن ئىنكاسچان كۆرسىتىش دەرسلىرىنى ئىشلىتىڭ. ئوخشاش بىر تور بېكەتنىڭ پۈتۈنلەي ئوخشىمايدىغان نەشرىنى قۇرۇشتىن ساقلىنىڭ ، ئەكسىچە ھەر بىر ئېكران چوڭلۇقىغا قارىتا ئېلېمېنتلارنى يوشۇرۇپ قويۇڭ.

ئېلېمېنتلارنى يوشۇرۇش ئۈچۈن ھەر قانداق ئىنكاسچان ئېكراننىڭ ئۆزگىرىشى ئۈچۈن .d-noneسىنىپ ياكى بىر سىنىپنى ئىشلىتىڭ..d-{sm,md,lg,xl,xxl}-none

پەقەت ئېكران چوڭلۇقىنىڭ مەلۇم ئارىلىقىدا ئېلېمېنتنى كۆرسىتىش ئۈچۈن سىز بىر .d-*-noneسىنىپ بىلەن بىر .d-*-*سىنىپنى بىرلەشتۈرەلەيسىز ، مەسىلەن .d-none .d-md-block .d-xl-none .d-xxl-noneئوتتۇرا ۋە چوڭ ئۈسكۈنىلەردىن باشقا بارلىق ئېكران چوڭلۇقىدىكى ئېلېمېنتنى يوشۇرىدۇ.

ئېكران چوڭلۇقى	سىنىپ
ھەممىگە يوشۇرۇنغان	`.d-none`
پەقەت xs غا يوشۇرۇنغان	`.d-none .d-sm-block`
پەقەت sm غا يوشۇرۇنغان	`.d-sm-none .d-md-block`
پەقەت md غا يوشۇرۇنغان	`.d-md-none .d-lg-block`
پەقەت lg غا يوشۇرۇنغان	`.d-lg-none .d-xl-block`
پەقەت xl غا يوشۇرۇنغان	`.d-xl-none`
پەقەت xxl غا يوشۇرۇنغان	`.d-xxl-none .d-xxl-block`
ھەممىنى كۆرگىلى بولىدۇ	`.d-block`
پەقەت xs دا كۆرگىلى بولىدۇ	`.d-block .d-sm-none`
پەقەت sm	`.d-none .d-sm-block .d-md-none`
پەقەت md دا كۆرگىلى بولىدۇ	`.d-none .d-md-block .d-lg-none`
پەقەت lg دا كۆرگىلى بولىدۇ	`.d-none .d-lg-block .d-xl-none`
پەقەت xl دا كۆرگىلى بولىدۇ	`.d-none .d-xl-block .d-xxl-none`
پەقەت xxl دا كۆرگىلى بولىدۇ	`.d-none .d-xxl-block`

lg ۋە تېخىمۇ كەڭ ئېكرانلارغا يوشۇرۇنۇڭ

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>

بېسىپ چىقىرىش

displayباسما كۆرسىتىش قوراللىرى بىلەن بېسىپ چىقارغاندا ئېلېمېنتلارنىڭ قىممىتىنى ئۆزگەرتىڭ . displayبىزنىڭ ئىنكاسچان مۇلازىمەتلىرىمىز بىلەن ئوخشاش قىممەتنى قوللاشنى ئۆز ئىچىگە ئالىدۇ .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

بېسىپ چىقىرىش ۋە كۆرسىتىش دەرسلىرىنى بىرلەشتۈرگىلى بولىدۇ.

پەقەت ئېكرانلا (پەقەت بېسىپ چىقىرىشنىلا يوشۇرۇش)

پەقەت بېسىش (پەقەت ئېكراندا يوشۇرۇش)

ئېكراندا چوڭغىچە يوشۇرۇڭ ، ئەمما ھەمىشە بېسىپ چىقىرىڭ

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

كۆرسىتىش قورالى بىزنىڭ API دىكى ئېلان قىلىنغان scss/_utilities.scss. 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
    ),