Onetsani katundu

Sinthani mwachangu komanso moyenera mawonekedwe azinthu ndi zina ndi zida zathu zowonetsera. Zimaphatikizansopo zina mwazinthu zodziwika bwino, komanso zina zowonjezera pakuwongolera mawonedwe posindikiza.

Patsamba ili

Momwe zimagwirira ntchito

Sinthani mtengo displaywanyumbayo ndi makalasi athu ogwiritsa ntchito omvera. Timathandizira dala gulu laling'ono lazinthu zonse zomwe zingatheke display. Makalasi amatha kuphatikizidwa pazotsatira zosiyanasiyana momwe mungafunire.

Kuzindikira

Onetsani makalasi ofunikira omwe amagwira ntchito ku breakpoints zonse , kuyambira xsmpaka xxl, alibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0;ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.

Chifukwa chake, makalasi amatchulidwa pogwiritsa ntchito mawonekedwe:

.d-{value}zaxs
.d-{breakpoint}-{value}za sm, md, lg, xlndi xxl.

Pomwe mtengo ndi umodzi mwa:

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

Mawonekedwe owonetsera amatha kusinthidwa mwa kusintha displayzikhalidwe zomwe zafotokozedwa $utilitiesndikubwezeretsanso SCSS.

Mafunso atolankhani amakhudza kukula kwa chinsalu ndi choduka chomwe mwapatsidwa kapena chokulirapo . Mwachitsanzo, .d-lg-noneyambitsani , , ndi display: none;zowonetsera .lgxlxxl

Zitsanzo

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>

Kubisa zinthu

Kuti muzitha kugwiritsa ntchito mafoni mwachangu, gwiritsani ntchito makalasi omvera kuti muwonetse ndi kubisa zinthu pazida. Pewani kupanga mitundu yosiyana kwambiri ya tsamba lomwelo, m'malo mwake bisani zinthu moyenera pa saizi iliyonse ya sikirini.

Kuti mubise zinthu, ingogwiritsani ntchito .d-nonekalasi kapena gulu limodzi .d-{sm,md,lg,xl,xxl}-nonepazosintha zilizonse zomvera.

Kuti muwonetse chinthu pakanthawi kochepa ka makulidwe a sikirini mutha kuphatikiza .d-*-nonekalasi imodzi ndi .d-*-*kalasi, mwachitsanzo .d-none .d-md-block .d-xl-none .d-xxl-none, mutha kubisa chinthucho pamasaizi onse a zenera kupatula pazida zapakati ndi zazikulu.

Kukula kwazenera	Kalasi
Zobisika zonse	`.d-none`
Zobisika pa xs zokha	`.d-none .d-sm-block`
Zobisika pa sm yokha	`.d-sm-none .d-md-block`
Zobisika pa md	`.d-md-none .d-lg-block`
Zobisika pa lg	`.d-lg-none .d-xl-block`
Zobisika pa xl zokha	`.d-xl-none`
Zobisika pa xxl zokha	`.d-xxl-none .d-xxl-block`
Zowoneka kwa onse	`.d-block`
Zimawoneka pa xs zokha	`.d-block .d-sm-none`
Zowoneka pa sm yokha	`.d-none .d-sm-block .d-md-none`
Zowoneka pa md	`.d-none .d-md-block .d-lg-none`
Zimangowoneka pa lg	`.d-none .d-lg-block .d-xl-none`
Zimawoneka pa xl pokha	`.d-none .d-xl-block .d-xxl-none`
Zimangowoneka pa xxl	`.d-none .d-xxl-block`

bisani pa lg ndi zowonera zazikulu

bisani pazithunzi zazing'ono kuposa 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>

Kuwonetsa mosindikiza

Sinthani displaymtengo wazinthu posindikiza ndi makalasi athu osindikizira ogwiritsira ntchito. Kuphatikizirapo chithandizo cha zinthu zomwezo displaymonga zida zathu .d-*zoyankhira.

.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

Makalasi osindikizira ndi owonetsera akhoza kuphatikizidwa.

Screen Only (Bisani pazosindikiza zokha)

Sindikizani Pokha (Bisani pa zenera lokha)

Bisani mpaka zazikulu pazenera, koma nthawi zonse ziwonetseni pazosindikiza

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

Zowonetsera zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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
    ),