in English

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

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

Бұл бетте

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

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

Белгілеу

Барлық тоқтау нүктелеріне (ден бастап) xsдейін қолданылатын қызметтік сыныптарда xxlтоқтау нүктесінің аббревиатурасы жоқ. Себебі, бұл сыныптар бастап min-width: 0;және жоғары қолданылады және осылайша медиа сұрауына байланысты емес. Дегенмен, қалған тоқтау нүктелері тоқтау нүктесінің аббревиатурасын қамтиды.

Осылайша, сыныптар келесі пішім арқылы аталады:

.d-{value}үшінxs
.d-{breakpoint}-{value}, sm, md, lgжәне xlүшін xxl.

Мұндағы мән мыналардың бірі болып табылады:

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

Дисплей мәндерін SCSS displayішінде анықталған мәндерді өзгерту және қайта құрастыру арқылы өзгертуге болады .$utilities

Мультимедиа сұраулары берілген тоқтау нүктесі немесе одан үлкенірек экран еніне әсер етеді . Мысалы, , , және экрандарға орнатылады .d-lg-none.display: none;lgxlxxl

Мысалдар

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-блок d-блок

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Элементтерді жасыру

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

Элементтерді жасыру үшін кез келген жауап беретін экран нұсқасы үшін .d-noneклассты немесе сыныптардың бірін пайдаланыңыз..d-{sm,md,lg,xl,xxl}-none

Элементті экран өлшемдерінің берілген интервалында ғана көрсету үшін бір .d-*-noneсыныпты сыныппен біріктіруге болады .d-*-*, мысалы .d-none .d-md-block .d-xl-none .d-xxl-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`
Тек xxl-де жасырылған	`.d-xxl-none .d-xxl-block`
Барлығына көрінеді	`.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 .d-xxl-none`
Тек xxl форматында көрінеді	`.d-none .d-xxl-block`

lg және кеңірек экрандарда жасыру

lg қарағанда кішірек экрандарда жасыру

html

<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-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Басып шығару және көрсету сыныптарын біріктіруге болады.

Тек экран (тек басып шығаруда жасыру)

Тек басып шығару (тек экранда жасыру)

Экранда үлкенге дейін жасырыңыз, бірақ әрқашан басып шығаруда көрсетіңіз

html

<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>

Сасс

Utilities API

Көрсету утилиталары біздің API утилиталарында жарияланған scss/_utilities.scss. API утилиталарын қалай пайдалану керектігін біліңіз.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),