Onetsani katundu

Sinthani mwachangu komanso moyenera kuchuluka kwa 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

Makhalidwe owonetsera amatha kusinthidwa mwa kusintha $displayskusintha ndi kubwezeretsanso 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

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

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

Kubisa zinthu

Kuti chitukuko chikhale chosavuta kugwiritsa ntchito mafoni, gwiritsani ntchito makalasi omvera powonetsa ndi kubisa zinthu ndi chipangizo. 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 .d-xxl-block`
Zobisika pa xxl zokha	`.d-xxl-none`
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`

hide on lg and wider screens

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

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)

Print Only (Hide on screen only)

Bisani mpaka zazikulu pazenera, koma nthawi zonse ziwonetseni pazosindikiza

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