Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

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