Denne artikkelen er en speilartikkel om maskinoversettelse, vennligst klikk her for å hoppe til originalartikkelen.

Architect_Programmer_Code Landbruksnettverket»Arkitekt › Front-end design og web › Frontramme › Hvordan vise og skjule elementer ved hjelp av Bootstrap4
Utsikt: 12583|Svare: 0

[Bootstrap] Hvordan vise og skjule elementer ved hjelp av Bootstrap4

[Kopier lenke]
Publisert på 04.04.2019 10:46:25 | | | |
Hvordan vise og skjule elementer ved hjelp av Bootstrap4

For raskere utvikling av mobile enheter, bruk responsive visningsklasser for å vise og skjule elementer etter enhet. Unngå å lage helt forskjellige versjoner av samme nettsted, men skjul elementer for hver skjermstørrelse deretter.

For å skjule elementer, bruk bare.d-ingenklasse eller en av dem.d-{sm,md,lg,xl}-ingenklasse for å gjøre eventuelle responsive skjermendringer.

For å vise elementer kun på et gitt skjermstørrelsesintervall, kan du sette ett.d-*-ingenKlasse og én.d-*-*Klasser grupperes sammen, for eksempel,.d-none .d-md-block .d-xl-noneElementer i alle skjermstørrelser vil være skjult, bortsett fra mellomstore og store enheter.

Gjengivelser:



Vis/skjul for breakpoint og ned:

  • skjult-xs-ned (skjult-xs) = d-ingen d-sm-blokk
  • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
  • hidden-lg-down = d-ingen d-xl-blokk
  • Hidden-XL-Down (N/A 3.x) = D-None (samme som Hidden)


Vis/skjul for breakpoint og oppover:

  • skjult-xs-opp = d-ingen (samme som skjult)
  • hidden-sm-up = d-sm-none
  • hidden-md-up = d-md-none
  • hidden-lg-up = d-lg-none
  • skjult-xl-opp (n/a 3.x) = d-xl-ingen


Vis/skjul kun for ett enkelt brytepunkt:

  • skjult-xs (kun) = d-ingen d-sm-blokk (samme som skjult-xs-ned)
  • hidden-sm (kun) = d-blokk d-sm-ingen d-md-blokk
  • hidden-md (kun) = d-blokk d-md-ingen d-lg-blokk
  • skjult-lg (kun) = d-blokk d-lg-ingen d-xl-blokk
  • hidden-xl (n/a 3.x) = d-blokk d-xl-ingen
  • synlig-xs (kun) = d-blokk d-sm-ingen
  • visible-sm (kun) = d-ingen d-sm-blokk d-md-ingen
  • visible-md (only) = d-none d-md-block d-lg-none
  • visible-lg (only) = d-none d-lg-block d-xl-none
  • visible-xl (n/a 3.x) = d-ingen d-xl-blokk


Visualisering:



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





Foregående:Hvilke egenskaper bør en programvarearkitekt ha?
Neste:Kan ikke injisere @Autowired i Listener

Relaterte innlegg
Ansvarsfraskrivelse:
All programvare, programmeringsmateriell eller artikler publisert av Code Farmer Network er kun for lærings- og forskningsformål; Innholdet ovenfor skal ikke brukes til kommersielle eller ulovlige formål, ellers skal brukerne bære alle konsekvenser. Informasjonen på dette nettstedet kommer fra Internett, og opphavsrettstvister har ingenting med dette nettstedet å gjøre. Du må fullstendig slette innholdet ovenfor fra datamaskinen din innen 24 timer etter nedlasting. Hvis du liker programmet, vennligst støtt ekte programvare, kjøp registrering, og få bedre ekte tjenester. Hvis det foreligger noen krenkelse, vennligst kontakt oss på e-post.
Mail To:help@itsvse.com