Kuinka näyttää ja piilottaa elementtejä Bootstrap4:llä

Pikku roisto · Julkaistu 4.4.2019 10.46.25

Kuinka näyttää ja piilottaa elementtejä Bootstrap4:llä

Nopeampaa mobiililaitteiden kehitystä varten käytä responsiivisia näyttöluokkia elementtien näyttämiseen ja piilottamiseen laitteittain. Vältä täysin erilaisten versioiden luomista samasta sivustosta, mutta piilota elementit kunkin näytön koon mukaan.

Elementtien piilottamiseen käytä yksinkertaisesti.d-eiluokka tai jokin niistä.d-{sm,md,lg,xl}-ei oleluokkaa tehdäkseen mahdolliset reagoivat näytön muutokset.

Voit näyttää elementtejä vain tietyllä näytön kokovälillä, jolloin voit asettaa yhden.d-*-eiLuokka ja yksi.d-*-*luokat ryhmitellään yhteen, esimerkiksi,.d-ei .d-md-blokki .d-xl-eiKaiken näytön kokoiset elementit piilotetaan, paitsi keskikokoiset ja suuret laitteet.

Rappaukset:

Näytä/piilota katkaisupiste ja alas:

hidden-xs-down (hidden-xs) = d-ei d-sm-block
hidden-sm-alas (hidden-sm hidden-xs) = d-ei d-md-blokki
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-ei d-lg-block
hidden-lg-down = d-ei d-xl-block
hidden-xl-down (n/a 3.x) = d-ei (sama kuin hidden)

Näytä/piilota breakpointista ylöspäin:

hidden-xs-up = d-ei (sama kuin hidden)
hidden-sm-up = d-sm-ei
hidden-md-up = d-md-ei
hidden-lg-up = d-lg-ei
hidden-xl-up (n/a 3.x) = d-xl-ei

Näytä/piilota vain yhdellä katkaisupisteellä:

hidden-xs (vain) = d-none d-sm-block (sama kuin hidden-xs-down)
hidden-sm (vain) = d-block d-sm-none d-md-block
hidden-md (vain) = d-lohko d-md-ei d-lg-blokki
hidden-lg (vain) = d-lohko d-lg-ei d-xl-blokki
hidden-xl (n/a 3.x) = d-lohko d-xl-ei
visible-xs (vain) = d-lohko d-sm-ei
visible-sm (vain) = d-ei d-sm-block d-md-ei ei
visible-MD (vain) = d-ei d-md-lohko d-lg-ei
visible-lg (vain) = d-ei d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-ei d-xl-lohko

Visualisointi:

Viitelinkit:https://getbootstrap.com/docs/4.0/utilities/display/

[Bootstrap] Kuinka näyttää ja piilottaa elementtejä Bootstrap4:llä

Aiheeseen liittyvät julkaisut

Katsotut osuudet