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

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

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

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

Мысалдар

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`

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>