Näytä ominaisuus

Vaihda komponenttien näyttöarvoa ja muuta nopeasti ja reagoivasti näyttöapuohjelmiemme avulla. Sisältää tuen joillekin yleisimmille arvoille sekä joitain lisäominaisuuksia näytön ohjaamiseen tulostuksen aikana.

Tällä sivulla

Kuinka se toimii

displayMuuta kiinteistön arvoa responsiivisten näyttöjen hyödyllisyysluokillamme. Tuemme tarkoituksella vain osaa kaikista mahdollisista arvoista display. Tunteja voidaan yhdistää erilaisiin tehosteisiin tarpeen mukaan.

Merkintä

Näytä hyödyllisyysluokat, jotka koskevat kaikkia keskeytyskohtia alkaen xs- xxl, niissä ei ole keskeytyspistelyhennettä. Tämä johtuu siitä, että näitä luokkia sovelletaan alkaen min-width: 0;ja ylöspäin, joten mediakysely ei sido niitä. Loput keskeytyspisteet sisältävät kuitenkin keskeytyspisteen lyhenteen.

Sellaisenaan luokat on nimetty muodossa:

.d-{value}vartenxs
.d-{breakpoint}-{value}, sm, md, lg, xlja xxl.

Jos arvo on jokin seuraavista:

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

Näyttöarvoja voidaan muuttaa muuttamalla SCSS:ssä displaymääritettyjä arvoja $utilitiesja kääntämällä uudelleen.

Mediakyselyt vaikuttavat näytön leveyksiin annetulla tai suuremmalla keskeytyspisteellä . Esimerkiksi .d-lg-noneasetetaan display: none;, lg, xlja xxlnäytöt.

Esimerkkejä

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-lohko d-lohko

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Elementtien piilottaminen

Mobiiliystävällisen kehityksen nopeuttamiseksi käytä responsiivisia näyttöluokkia elementtien näyttämiseen ja piilottamiseen laitteittain. Vältä täysin erilaisten versioiden luomista samasta sivustosta, vaan piilota elementit responsiivisesti kunkin näyttökoon mukaan.

Jos haluat piilottaa elementtejä, käytä .d-noneluokkaa tai jotakin .d-{sm,md,lg,xl,xxl}-noneluokista mille tahansa reagoivalle näyttömuunnelmalle.

Jos haluat näyttää elementin vain tietyllä näyttökokovälillä, voit yhdistää yhden .d-*-noneluokan .d-*-*luokkaan, esimerkiksi .d-none .d-md-block .d-xl-none .d-xxl-nonepiilottaa elementin kaikille näyttökokoille paitsi keskikokoisille ja suurille laitteille.

Näytön koko	Luokka
Kaiken päälle piilossa	`.d-none`
Piilotettu vain xs:ssä	`.d-none .d-sm-block`
Piilotettu vain sm	`.d-sm-none .d-md-block`
Piilotettu vain md:ssä	`.d-md-none .d-lg-block`
Piilotettu vain lg:ssä	`.d-lg-none .d-xl-block`
Piilotettu vain xl:llä	`.d-xl-none`
Piilotettu vain xxl:ssä	`.d-xxl-none .d-xxl-block`
Näkyy kaikissa	`.d-block`
Näkyy vain xs:llä	`.d-block .d-sm-none`
Näkyy vain sm	`.d-none .d-sm-block .d-md-none`
Näkyy vain md:llä	`.d-none .d-md-block .d-lg-none`
Näkyy vain lg:ssä	`.d-none .d-lg-block .d-xl-none`
Näkyy vain xl:llä	`.d-none .d-xl-block .d-xxl-none`
Näkyy vain xxl:ssä	`.d-none .d-xxl-block`

Piilota LG:lle ja laajemmille näytöille

piiloutua näytöille, jotka ovat pienempiä kuin lg

html

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

Näyttö painettuna

Muuta displayelementtien arvoa tulostettaessa tulostusnäytön hyödyllisyysluokillamme. Sisältää tuen samoille displayarvoille kuin reagoivat .d-*apuohjelmamme.

.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

Tulostus- ja näyttöluokat voidaan yhdistää.

Vain näyttö (Piilota vain tulostettaessa)

Vain tulostus (Piilota vain näytöllä)

Piilota suureksi näytölle, mutta näytä aina tulostettaessa

html

<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

Näyttöapuohjelmat on ilmoitettu apuohjelmien API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),