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

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

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

Мысалдар

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,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 .d-xxl-block`
Тек xxl-де жасырылған	`.d-xxl-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 .d-xxl-none`
Тек xxl форматында көрінеді	`.d-none .d-xxl-block`

hide on lg and wider screens

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

Сасс

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