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.
display
Muuta kiinteistön arvoa responsiivisten näyttöjen hyödyllisyysluokillamme. Tuemme tarkoituksella vain osaa kaikista mahdollisista arvoista display
. Tunteja voidaan yhdistää erilaisiin tehosteisiin tarpeen mukaan.
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
,lg
jaxl
.
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-none
sarjat display: none;
molemmille lg
ja xl
näytöille.
<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>
<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>
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-none
luokkaa tai jotakin .d-{sm,md,lg,xl}-none
luokista mille tahansa reagoivalle näyttömuunnelmalle.
Jos haluat näyttää elementin vain tietyllä näyttökokovälillä, voit yhdistää yhden .d-*-none
luokan .d-*-*
luokkaan, esimerkiksi .d-none .d-md-block .d-xl-none
piilottaa 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 |
<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>
Muuta display
elementtien arvoa tulostettaessa tulostusnäytön hyödyllisyysluokillamme. Sisältää tuen samoille display
arvoille 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ää.
<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>