Ipakita ang ari-arian

Mabilis at tumutugon na i-toggle ang display value ng mga bahagi at higit pa sa aming mga utility sa display. May kasamang suporta para sa ilan sa mga mas karaniwang halaga, pati na rin ang ilang mga dagdag para sa pagkontrol ng display kapag nagpi-print.

Sa pahinang ito

Paano ito gumagana

Baguhin ang halaga ng displayproperty gamit ang aming mga tumutugon na display utility classes. Sinadya naming sinusuportahan lamang ang isang subset ng lahat ng posibleng halaga para sa display. Maaaring pagsamahin ang mga klase para sa iba't ibang epekto ayon sa kailangan mo.

Notasyon

Ipakita ang mga klase ng utility na nalalapat sa lahat ng mga breakpoint , mula xshanggang xxl, ay walang pagdadaglat ng breakpoint sa mga ito. Ito ay dahil ang mga klase na iyon ay inilapat mula min-width: 0;at pataas, at sa gayon ay hindi nakatali sa isang query sa media. Ang natitirang mga breakpoint, gayunpaman, ay may kasamang breakpoint abbreviation.

Dahil dito, pinangalanan ang mga klase gamit ang format:

.d-{value}para saxs
.d-{breakpoint}-{value}para sa sm, md, lg, xl, at xxl.

Kung saan ang halaga ay isa sa:

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

Ang mga halaga ng display ay maaaring baguhin sa pamamagitan ng pagbabago ng mga displayhalaga na tinukoy sa $utilitiesat muling pagsasama-sama ng SCSS.

Ang mga query sa media ay nakakaapekto sa mga lapad ng screen na may ibinigay na breakpoint o mas malaki . Halimbawa, .d-lg-noneitinakda display: none;sa lg, xl, at xxlmga screen.

Mga halimbawa

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

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>

Pagtatago ng mga elemento

Para sa mas mabilis na pag-develop sa mobile, gumamit ng mga tumutugon na klase ng display para sa pagpapakita at pagtatago ng mga elemento ayon sa device. Iwasang gumawa ng ganap na magkakaibang mga bersyon ng parehong site, sa halip ay itago ang mga elemento nang tumutugon para sa bawat laki ng screen.

Upang itago ang mga elemento, gamitin lang ang .d-noneklase o isa sa mga .d-{sm,md,lg,xl,xxl}-noneklase para sa anumang tumutugon na pagkakaiba-iba ng screen.

Upang magpakita lamang ng isang elemento sa isang partikular na pagitan ng mga laki ng screen maaari mong pagsamahin ang isang .d-*-noneklase sa isang .d-*-*klase, halimbawa .d-none .d-md-block .d-xl-none .d-xxl-noneay itatago ang elemento para sa lahat ng laki ng screen maliban sa katamtaman at malalaking device.

Laki ng screen	Klase
Nakatago sa lahat	`.d-none`
Nakatago lang sa xs	`.d-none .d-sm-block`
Nakatago lang sa sm	`.d-sm-none .d-md-block`
Nakatago lang sa md	`.d-md-none .d-lg-block`
Nakatago lang sa lg	`.d-lg-none .d-xl-block`
Nakatago lang sa xl	`.d-xl-none`
Nakatago lang sa xxl	`.d-xxl-none .d-xxl-block`
Nakikita sa lahat	`.d-block`
Nakikita lang sa xs	`.d-block .d-sm-none`
Nakikita lang sa sm	`.d-none .d-sm-block .d-md-none`
Nakikita lang sa md	`.d-none .d-md-block .d-lg-none`
Sa lg lang makikita	`.d-none .d-lg-block .d-xl-none`
Nakikita lang sa xl	`.d-none .d-xl-block .d-xxl-none`
Nakikita lamang sa xxl	`.d-none .d-xxl-block`

itago sa lg at mas malawak na screen

itago sa mga screen na mas maliit kaysa sa 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>

Ipakita sa print

Baguhin ang displayhalaga ng mga elemento kapag nagpi-print gamit ang aming mga klase sa print display utility. May kasamang suporta para sa parehong mga displayhalaga tulad ng aming tumutugon na mga .d-*utility.

.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

Maaaring pagsamahin ang mga klase sa pag-print at pagpapakita.

Screen Lang (Itago sa print lang)

Print Only (Itago sa screen lang)

Itago hanggang malaki sa screen, ngunit palaging ipakita sa print

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>

Sass

Utilities API

Ang mga display utilities ay ipinahayag sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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
    ),