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.
Hogyan működik
Változtassa meg az display
ingatlan é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
ésxxl
.
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 $displays
vá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-none
beállítja display: none;
a lg
, xl
a és a xxl
képernyőket.
Példák
<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>
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-none
osztályt vagy az egyik .d-{sm,md,lg,xl,xxl}-none
osztá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-*-none
osztályt egy .d-*-*
osztállyal, például .d-none .d-md-block .d-xl-none .d-xxl-none
elrejti 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 |
<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 display
elemek é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.
<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
),