in English

Намоиши моликият

Бо ёрии утилитаҳои дисплейи мо арзиши намоиши ҷузъҳо ва ғайраро зуд ва зуд иваз кунед. Дастгирии баъзе арзишҳои маъмултарин ва инчунин баъзе изофаҳоро барои назорати намоиш ҳангоми чоп дар бар мегирад.

Он чӣ гуна кор мекунад

Бо синфҳои хидматрасонии намоишии мо арзиши displayамволро тағир диҳед. Мо қасдан танҳо як зермаҷмӯи ҳамаи арзишҳои имконпазирро барои display. Синфҳоро барои эффектҳои гуногун, ки ба шумо лозим аст, муттаҳид кардан мумкин аст.

Нота

Намоиши синфҳои утилитаҳое, ки ба ҳама нуқтаҳои қатъшавӣ , аз xsто xl, дахл доранд, дар онҳо ихтисораи нуқтаи қатъкунӣ надоранд. Сабаб дар он аст, ки ин синфҳо аз min-width: 0;ва боло татбиқ карда мешаванд ва аз ин рӯ бо дархости медиа баста намешаванд. Бо вуҷуди ин, нуқтаҳои қатъшавии боқимонда ихтисораи нуқтаи қатъиро дар бар мегиранд.

Ҳамин тариқ, синфҳо бо истифода аз формат номгузорӣ мешаванд:

  • .d-{value}бароиxs
  • .d-{breakpoint}-{value}барои sm, md, lg, ва xl.

Дар куҷо арзиш яке аз:

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

Қиматҳои намоишро тавассути тағир додани $displaysтағирёбанда ва аз нав тартиб додани SCSS тағир додан мумкин аст.

Дархостҳои медиавӣ ба паҳнои экран бо нуқтаи қатъии додашуда ё калонтар таъсир мерасонанд . Масалан, .d-lg-noneмаҷмӯаҳо display: none;дар ҳарду lgва xlэкранҳо.

Мисолхо

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-блок d-блок
<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
Танҳо дар см намоён аст .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
дар экранҳои lg ва васеътар пинҳон кунед
дар экранҳои хурдтар аз lg пинҳон кунед
<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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Синфҳои чоп ва намоишро якҷоя кардан мумкин аст.

Танҳо экран (танҳо дар чоп пинҳон мешавад)
Танҳо чоп (танҳо дар экран пинҳон мешавад)
Дар экран то калон пинҳон кунед, аммо ҳамеша дар чоп нишон диҳед
<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>