Source

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

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

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

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

ئىزاھات

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

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

  • .d-{value}forxs
  • .d-{breakpoint}-{value}for sm,,, ۋە . md_lgxl

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

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

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

مىساللار

d-inline
d-inline
<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 d-block
<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>

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

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

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

پەقەت ئېكران چوڭلۇقىنىڭ مەلۇم ئارىلىقىدا ئېلېمېنتنى كۆرسىتىش ئۈچۈن سىز بىر .d-*-noneسىنىپ بىلەن بىر .d-*-*سىنىپنى بىرلەشتۈرەلەيسىز ، مەسىلەن .d-none .d-md-block .d-xl-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
ھەممىنى كۆرگىلى بولىدۇ .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
hide on screens wider than lg
lg دىن كىچىك ئېكرانلارغا يوشۇرۇنۇڭ
<div class="d-lg-none">hide on screens wider than lg</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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

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

پەقەت ئېكرانلا (پەقەت بېسىپ چىقىرىشنىلا يوشۇرۇش)
Print Only (Hide on screen only)
ئېكراندا چوڭغىچە يوشۇرۇڭ ، ئەمما ھەمىشە بېسىپ چىقىرىڭ
<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>