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

Jos arvo on jokin seuraavista:

  • none
  • inline
  • inline-block
  • block
  • 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-nonesarjat display: none;molemmille lgja xlnäytöille.

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}-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-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
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
Piilota LG:lle ja laajemmille näytöille
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-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 
<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>