Source

Сипатты көрсету

Біздің дисплей утилиталары арқылы құрамдастардың дисплей мәнін және т.б. жылдам және жауапты ауыстырыңыз. Кейбір кең таралған мәндерді қолдауды, сондай-ақ басып шығару кезінде дисплейді басқаруға арналған кейбір қосымшаларды қамтиды.

Бұл қалай жұмыс істейді

Біздің жауап беретін дисплей утилитасы сыныптары арқылы 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

Мультимедиа сұраулары берілген тоқтау нүктесі немесе одан үлкенірек экран еніне әсер етеді . Мысалы, екеуінде де , экрандарда да .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-блок 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
Тек см-де жасырылған .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
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>