Tulajdonság megjelenítése

Gyorsan és érzékenyen átkapcsolhatja az összetevők megjelenítési értékét és még sok mást megjelenítő segédprogramjainkkal. Tartalmazza néhány általánosabb érték támogatását, valamint néhány extrát a megjelenítés vezérléséhez nyomtatáskor.

Ezen az oldalon

Hogyan működik

Változtassa meg az displayingatlan értékét reszponzív megjelenítési hasznossági osztályainkkal. Szándékosan az összes lehetséges értéknek csak egy részét támogatjuk display. Az osztályok szükség szerint kombinálhatók különféle effektusok eléréséhez.

Jelölés

Azon segédprogramosztályok megjelenítése, amelyek minden töréspontra vonatkoznak , tól xs-ig xxl, nem tartalmaznak töréspont-rövidítést. Ennek az az oka, hogy ezeket az osztályokat a rendszer elölről min-width: 0;és felfelé alkalmazza, és így nem köti őket médialekérdezés. A fennmaradó töréspontok azonban tartalmaznak egy töréspont-rövidítést.

Ennek megfelelően az osztályokat a következő formátumban nevezik el:

.d-{value}számáraxs
.d-{breakpoint}-{value}, sm, md, lg, xlés xxl.

Ahol az érték a következők egyike:

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

A megjelenített értékek a $displaysváltozó megváltoztatásával és az SCSS újrafordításával módosíthatók.

A médialekérdezések az adott vagy annál nagyobb törésponttal befolyásolják a képernyő szélességét . Például .d-lg-nonebeállítja display: none;a lg, xla és a xxlképernyőket.

Példák

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

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

Elemek elrejtése

A gyorsabb mobilbarát fejlesztés érdekében használjon reszponzív megjelenítési osztályokat az elemek eszközönkénti megjelenítéséhez és elrejtéséhez. Kerülje el, hogy ugyanannak a webhelynek teljesen különböző verzióit hozzon létre, hanem rejtse el az elemeket az egyes képernyőméretekhez megfelelően.

Az elemek elrejtéséhez egyszerűen használja az .d-noneosztályt vagy az egyik .d-{sm,md,lg,xl,xxl}-noneosztályt bármely reszponzív képernyőváltozathoz.

Ha egy elemet csak a képernyőméretek adott intervallumán szeretne megjeleníteni, kombinálhat egy .d-*-noneosztályt egy .d-*-*osztállyal, például .d-none .d-md-block .d-xl-none .d-xxl-noneelrejti az elemet minden képernyőméretnél, kivéve a közepes és nagy eszközöket.

Kijelzo méret	Osztály
Mindenre elrejtve	`.d-none`
Csak xs-en van elrejtve	`.d-none .d-sm-block`
Csak sm-en rejtve	`.d-sm-none .d-md-block`
Csak az md-n rejtve	`.d-md-none .d-lg-block`
Csak lg-n rejtve	`.d-lg-none .d-xl-block`
Csak xl-en rejtve	`.d-xl-none .d-xxl-block`
Csak xxl-en rejtve	`.d-xxl-none`
Mindenen látható	`.d-block`
Csak xs-en látható	`.d-block .d-sm-none`
Csak sm-en látható	`.d-none .d-sm-block .d-md-none`
Csak az md-n látható	`.d-none .d-md-block .d-lg-none`
Csak lg-en látható	`.d-none .d-lg-block .d-xl-none`
Csak xl-en látható	`.d-none .d-xl-block .d-xxl-none`
Csak xxl-en látható	`.d-none .d-xxl-block`

hide on lg and wider screens

elrejteni az lg-nél kisebb képernyőkön

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

Megjelenítés nyomtatásban

Módosítsa az displayelemek értékét a nyomtatási megjelenítési segédprogramokkal történő nyomtatáskor. Tartalmazza ugyanazon displayértékek támogatását, mint a mi reszponzív .d-*segédprogramjaink.

.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

A nyomtatási és megjelenítési osztályok kombinálhatók.

Csak képernyő (csak nyomtatáskor elrejtés)

Print Only (Hide on screen only)

Elrejteni akár nagy méretig a képernyőn, de mindig megjelenik a nyomtatáson

<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

A megjelenítési segédprogramok a segédprogramok API-ban vannak deklarálva scss/_utilities.scss. Ismerje meg a segédprogramok API használatát.

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