Näytä ominaisuus

Vaihda komponenttien näyttöarvoa ja paljon 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ä. Muut 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

Mediakyselyt vaikuttavat näytön leveyksiin annetulla tai suuremmalla keskeytyspisteellä . Esimerkiksi .d-lg-nonesarjat display: none;molemmille lgja xlnäytöille.

Esimerkkejä

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 elementti responsiivisesti kunkin näytön 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`

hide on screens wider than lg

piiloutua näytöille, jotka ovat pienempiä kuin 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>

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)

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>