Taybetmendiyê nîşan bide
Bi karûbarên pêşandana me re bi lez û bez nirxa pêşandana pêkhateyan û bêtir biguhezînin. Piştgiriyek ji bo hin nirxên gelemperî, û her weha hin pêvekên ji bo kontrolkirina dîmenderê dema çapkirinê vedihewîne.
Çawa dixebite
Bi dersên meya karûbarê nîşana bersivdar nirxa display
xanî biguhezînin. Em bi mebest tenê beşek ji hemî nirxên gengaz ji bo piştgirî dikin display
. Ders dikarin ji bo bandorên cihêreng ên ku hûn hewce ne bêne hev kirin.
Notation
Nîşana çînên bikêrhatî yên ku ji bo hemî xalên veqetînê , ji xs
ber xxl
, di wan de kurtenivîsa xala veqetînê tune. Ev ji ber ku ew ders ji min-width: 0;
û jor têne sepandin, û bi vî rengî bi pirsek medyayê ve girêdayî ne. Lêbelê, xalên veqetandinê yên mayî, kurtenivîsek xala veqetînê vedihewînin.
Bi vî rengî, çîn bi karanîna formê têne nav kirin:
.d-{value}
boxs
.d-{breakpoint}-{value}
ji bosm
,md
,lg
,xl
, ûxxl
.
Ku nirx yek ji wan e:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Nirxên $displays
xuyangê dikarin bi guheztina guhêrbar û ji nû ve berhevkirina SCSS-ê werin guheztin.
Pirsên medyayê bi xala veqetînê ya diyarkirî an mezintir bandorê li firehiyên ekranê dikin . Mînakî, li ser , , û ekranan saz dike .d-lg-none
.display: none;
lg
xl
xxl
Examples
<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>
Hêmanên veşartî
Ji bo pêşkeftina heval-mobîl zûtir, dersên dîmendera bersivdar bikar bînin da ku hêmanên ji hêla cîhazê ve nîşan û veşêrin. Ji afirandina guhertoyên bi tevahî cihêreng ên heman malperê dûr bisekinin, li şûna wê ji bo her mezinahiya ekranê hêmanan bi bersiv veşêrin.
Ji bo veşartina hêmanan, tenê ji bo her guhertoya ekrana bersivdar .d-none
polê an yek ji çînan bikar bînin..d-{sm,md,lg,xl,xxl}-none
Ji bo ku hêmanek tenê li ser navberek diyarkirî ya mezinahiyên ekranê nîşan bidin, hûn dikarin yek .d-*-none
polê bi polê re bikin yek .d-*-*
, mînakî .d-none .d-md-block .d-xl-none .d-xxl-none
dê hêmanê ji bo hemî pîvanên ekranê ji bilî cîhazên navîn û mezin veşêrin.
Mezinahiya ekranê | Sinif |
---|---|
Li ser her tiştî veşartî | .d-none |
Tenê li ser xs veşartî | .d-none .d-sm-block |
Tenê li ser sm veşartî | .d-sm-none .d-md-block |
Tenê li ser md veşartî | .d-md-none .d-lg-block |
Tenê li ser lg veşartî | .d-lg-none .d-xl-block |
Tenê li ser xl veşartî | .d-xl-none .d-xxl-block |
Tenê li ser xxl veşartî | .d-xxl-none |
Li ser hemûyan xuya dibe | .d-block |
Tenê li ser xs xuya dibe | .d-block .d-sm-none |
Tenê li ser sm xuya dibe | .d-none .d-sm-block .d-md-none |
Tenê li ser md xuya dibe | .d-none .d-md-block .d-lg-none |
Tenê li ser lg xuya dibe | .d-none .d-lg-block .d-xl-none |
Tenê li ser xl xuya dibe | .d-none .d-xl-block .d-xxl-none |
Tenê li ser xxl xuya dibe | .d-none .d-xxl-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>
Di çapê de nîşan bide
display
Dema çapkirinê bi dersên meya karûbarê nîşana çapê re nirxa hêmanan biguhezînin . Piştgiriya ji bo heman display
nirxan wekî karûbarên me yên bersivdar .d-*
vedihewîne.
.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
Dersên çap û pêşandanê dikarin bêne hev kirin.
<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
Karûbarên pêşandanê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss
. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),