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

Šajā lapā

Kā tas strādā

Mainiet īpašuma vērtību, displayizmantojot 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 xslī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, xlun xxl.

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 $displaysmainī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-noneiestata display: none;uz lg, xlun xxlekrāniem.

Piemēri

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

<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-noneklasi vai kādu no .d-{sm,md,lg,xl,xxl}-noneklasēm jebkuram adaptīvam ekrāna variantam.

Lai elementu rādītu tikai noteiktā ekrāna izmēru intervālā, varat apvienot vienu .d-*-noneklasi 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`

hide on lg and wider screens

slēpties uz ekrāniem, kas mazāki par 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>

Parādīt drukātā veidā

Mainiet displayelementu vērtību, drukājot ar mūsu drukas displeja lietderības klasēm. Ietver atbalstu tām pašām displayvē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.

Tikai ekrāns (Paslēpt tikai drukā)

Print Only (Hide on screen only)

Paslēpt līdz pat lielam ekrānā, bet vienmēr rādīt drukā

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