Прикажи својство
Брзо и брзо мењајте вредност приказа компоненти и још много тога помоћу наших услужних програма за приказ. Укључује подршку за неке од уобичајених вредности, као и неке додатке за контролу приказа приликом штампања.
Како то ради
Промените вредност 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
променљиве и поновним компајлирањем СЦСС-а.
Медијски упити утичу на ширину екрана са датом тачком прекида или већом . На пример, .d-lg-none
поставља display: none;
на lg
, xl
, и xxl
екране.
Примери
<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>
<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 |
Скривен само на кс | .d-none .d-sm-block |
Скривен само на см | .d-sm-none .d-md-block |
Скривен само на мд | .d-md-none .d-lg-block |
Скривен само на лг | .d-lg-none .d-xl-block |
Скривен само на кл | .d-xl-none .d-xxl-block |
Скривен само на ккл | .d-xxl-none |
Видљиво на свима | .d-block |
Видљиво само на кс | .d-block .d-sm-none |
Видљиво само на см | .d-none .d-sm-block .d-md-none |
Видљиво само на мд | .d-none .d-md-block .d-lg-none |
Видљиво само на лг | .d-none .d-lg-block .d-xl-none |
Видљиво само на кл | .d-none .d-xl-block .d-xxl-none |
Видљиво само на ккл | .d-none .d-xxl-block |
<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
Класе штампања и приказа могу се комбиновати.
<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>
Сасс
Утилитиес АПИ
Услужни програми за приказ су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss
. Научите како да користите услужни АПИ.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),