Source

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 xl, 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, lgun xl.

Kur vērtība ir viena no:

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

Multivides vaicājumi ietekmē ekrāna platumus ar doto pārtraukuma punktu vai lielāku . Piemēram, .d-lg-nonekomplekti display: none;gan uz lgekrāniem xl, gan.

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. Neveidojiet pilnīgi dažādas vienas vietnes versijas, tā vietā paslēpiet elementu 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}-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, 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
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
hide on screens wider than lg
slēpties uz ekrāniem, kas mazāki par lg
<div class="d-lg-none">hide on screens wider than lg</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-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>