Eiddo arddangos

Toglo gwerth arddangos cydrannau a mwy yn gyflym ac yn ymatebol gyda'n cyfleustodau arddangos. Yn cynnwys cefnogaeth ar gyfer rhai o'r gwerthoedd mwy cyffredin, yn ogystal â rhai pethau ychwanegol ar gyfer rheoli arddangos wrth argraffu.

Ar y dudalen hon

Sut mae'n gweithio

Newidiwch werth yr displayeiddo gyda'n dosbarthiadau cyfleustodau arddangos ymatebol. Dim ond is-set o'r holl werthoedd posibl ar gyfer display. Gellir cyfuno dosbarthiadau ar gyfer effeithiau amrywiol yn ôl yr angen.

Nodiant

Arddangos dosbarthiadau cyfleustodau sy'n berthnasol i bob torbwynt , o xsi xxl, heb dalfyriad torbwynt ynddynt. Mae hyn oherwydd bod y dosbarthiadau hynny'n cael eu cymhwyso o min-width: 0;ac i fyny, ac felly nid ydynt yn rhwym wrth ymholiad cyfryngau. Mae'r torbwyntiau sy'n weddill, fodd bynnag, yn cynnwys talfyriad torbwynt.

O'r herwydd, mae'r dosbarthiadau'n cael eu henwi gan ddefnyddio'r fformat:

.d-{value}canysxs
.d-{breakpoint}-{value}ar gyfer sm, md, lg, xl, a xxl.

Lle mae gwerth yn un o:

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

Gellir newid y gwerthoedd arddangos trwy newid y $displaysnewidyn ac ail-grynhoi'r SCSS.

Mae'r ymholiadau cyfryngau yn effeithio ar led sgrin gyda'r torbwynt a roddir neu fwy . Er enghraifft, .d-lg-nonesetiau display: none;ar lg, xl, a xxlsgriniau.

Enghreifftiau

d-lein

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

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

Elfennau cuddio

Ar gyfer datblygiad cyflymach cyfeillgar i ffonau symudol, defnyddiwch ddosbarthiadau arddangos ymatebol ar gyfer dangos a chuddio elfennau fesul dyfais. Osgowch greu fersiynau hollol wahanol o'r un wefan, yn lle hynny cuddiwch elfennau yn ymatebol ar gyfer pob maint sgrin.

I guddio elfennau, defnyddiwch y .d-nonedosbarth neu un o'r .d-{sm,md,lg,xl,xxl}-nonedosbarthiadau ar gyfer unrhyw amrywiad sgrin ymatebol.

I ddangos elfen yn unig ar gyfwng penodol o feintiau sgrin gallwch gyfuno un .d-*-nonedosbarth gyda .d-*-*dosbarth, er enghraifft .d-none .d-md-block .d-xl-none .d-xxl-nonebydd yn cuddio'r elfen ar gyfer pob maint sgrin ac eithrio ar ddyfeisiau canolig a mawr.

Maint sgrin	Dosbarth
Cudd ar y cyfan	`.d-none`
Wedi'i guddio ar xs yn unig	`.d-none .d-sm-block`
Cudd yn unig ar sm	`.d-sm-none .d-md-block`
Cudd yn unig ar md	`.d-md-none .d-lg-block`
Cudd yn unig ar lg	`.d-lg-none .d-xl-block`
Cudd yn unig ar xl	`.d-xl-none .d-xxl-block`
Cudd yn unig ar xxl	`.d-xxl-none`
Gweladwy ar y cyfan	`.d-block`
Gweladwy ar xs yn unig	`.d-block .d-sm-none`
Gweladwy ar sm	`.d-none .d-sm-block .d-md-none`
Gweladwy ar md yn unig	`.d-none .d-md-block .d-lg-none`
Gweladwy ar lg yn unig	`.d-none .d-lg-block .d-xl-none`
Gweladwy ar xl yn unig	`.d-none .d-xl-block .d-xxl-none`
Gweladwy ar xxl yn unig	`.d-none .d-xxl-block`

hide on lg and wider screens

cuddio ar sgriniau llai na 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>

Arddangos mewn print

Newidiwch displaywerth elfennau wrth argraffu gyda'n dosbarthiadau cyfleustodau arddangos print. Yn cynnwys cefnogaeth ar gyfer yr un displaygwerthoedd â'n .d-*cyfleustodau ymatebol.

.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

Gellir cyfuno'r dosbarthiadau argraffu ac arddangos.

Sgrin yn Unig (Cuddio ar brint yn unig)

Print Only (Hide on screen only)

Cuddiwch hyd at y sgrin fawr, ond dangoswch ar brint bob amser

<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

Mae cyfleustodau arddangos yn cael eu datgan yn ein API cyfleustodau yn scss/_utilities.scss. Dysgwch sut i ddefnyddio'r API cyfleustodau.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),