Displeja īpašums
Ātri un atsaucīgi pārslēdziet komponentu un citu displeja vērtību, izmantojot mūsu displeja utilītas. Ietver atbalstu dažām biežāk lietotajām vērtībām, kā arī dažas papildu funkcijas displeja vadīšanai drukāšanas laikā.
Kā tas strādā
Mainiet īpašuma vērtību, display
izmantojot mūsu adaptīvās displeja lietderības klases. Mēs apzināti atbalstām tikai visu iespējamo vērtību apakškopu display
. Nodarbības var kombinēt dažādiem efektiem pēc vajadzības.
Apzīmējums
Parādīt lietderības klases, kas attiecas uz visiem pārtraukuma punktiem , no xs
līdz xxl
, tajās nav pārtraukuma punktu saīsinājuma. Tas ir tāpēc, ka šīs klases tiek lietotas no min-width: 0;
un uz augšu, un tādējādi tās nav saistītas ar multivides vaicājumu. Tomēr atlikušajos pārtraukuma punktos ir ietverts pārtraukuma punkta saīsinājums.
Tādējādi klases tiek nosauktas, izmantojot formātu:
.d-{value}
priekšxs
.d-{breakpoint}-{value}
,sm
,md
,lg
,xl
unxxl
.
Kur vērtība ir viena no:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Displeja vērtības var mainīt, mainot $displays
mainīgo un pārkompilējot SCSS.
Multivides vaicājumi ietekmē ekrāna platumu ar doto pārtraukuma punktu vai lielāku . Piemēram, .d-lg-none
iestata display: none;
uz lg
, xl
un xxl
ekrāniem.
Piemēri
<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>
Slēptie elementi
Ātrākai mobilajām ierīcēm draudzīgai izstrādei izmantojiet adaptīvās displeja klases elementu rādīšanai un slēpšanai pēc ierīces. Izvairieties izveidot pilnīgi dažādas vienas vietnes versijas, tā vietā paslēpiet elementus atbilstoši katram ekrāna izmēram.
Lai paslēptu elementus, vienkārši izmantojiet .d-none
klasi vai kādu no .d-{sm,md,lg,xl,xxl}-none
klasēm jebkuram adaptīvam ekrāna variantam.
Lai elementu rādītu tikai noteiktā ekrāna izmēru intervālā, varat apvienot vienu .d-*-none
klasi ar .d-*-*
klasi, piemēram .d-none .d-md-block .d-xl-none .d-xxl-none
, elements tiks paslēpts visiem ekrāna izmēriem, izņemot vidējas un lielas ierīces.
Ekrāna izmērs | Klase |
---|---|
Paslēpts uz visiem | .d-none |
Paslēpts tikai uz xs | .d-none .d-sm-block |
Slēpts tikai uz sm | .d-sm-none .d-md-block |
Paslēpts tikai uz md | .d-md-none .d-lg-block |
Slēpts tikai uz lg | .d-lg-none .d-xl-block |
Paslēpts tikai uz xl | .d-xl-none .d-xxl-block |
Paslēpts tikai xxl | .d-xxl-none |
Redzams uz visiem | .d-block |
Redzams tikai uz xs | .d-block .d-sm-none |
Redzams tikai uz sm | .d-none .d-sm-block .d-md-none |
Redzams tikai uz md | .d-none .d-md-block .d-lg-none |
Redzams tikai uz lg | .d-none .d-lg-block .d-xl-none |
Redzams tikai uz xl | .d-none .d-xl-block .d-xxl-none |
Redzams tikai xxl | .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>
Parādīt drukātā veidā
Mainiet display
elementu vērtību, drukājot ar mūsu drukas displeja lietderības klasēm. Ietver atbalstu tām pašām display
vērtībām kā mūsu atsaucīgās .d-*
utilītas.
.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
Drukas un displeja klases var apvienot.
<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
Displeja utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss
. Uzziniet, kā izmantot utilītu 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
),