Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

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.

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 $displaysmuuttujaa ja kääntämällä SCSS 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
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-lohko d-lohko
<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>

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 .d-xxl-block
Piilotettu vain xxl:ssä .d-xxl-none
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
hide on lg and wider screens
piiloutua näytöille, jotka ovat pienempiä kuin 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>

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)
Print Only (Hide on screen only)
Piilota suureksi näytölle, mutta näytä aina tulostettaessa
<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
    ),