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.
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 xl, 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 sasm,md,lg, atxl.
Kung saan ang halaga ay isa sa:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Ang mga halaga ng display ay maaaring baguhin sa pamamagitan ng pagbabago ng $displaysvariable at muling pagsasama-sama ng SCSS.
Ang mga query ng media ay nakakaapekto sa mga lapad ng screen na may ibinigay na breakpoint o mas malaki . Halimbawa, ang mga .d-lg-noneset display: none;sa pareho lgat mga xlscreen.
Mga halimbawa
<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>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}-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-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 |
| 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 |
<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-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.
<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>