Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Architect_Programmer_Code Jordbruksnätverket»Arkitekt › Frontend-design och webb › Framändarram › Hur man visar och döljer element med Bootstrap4
Utsikt: 12583|Svar: 0

[Bootstrap] Hur man visar och döljer element med Bootstrap4

[Kopiera länk]
Publicerad på 2019-04-04 10:46:25 | | | |
Hur man visar och döljer element med Bootstrap4

För snabbare utveckling av mobila enheter, använd responsiva visningsklasser för att visa och dölja element per enhet. Undvik att skapa helt olika versioner av samma sida, men göm element för varje skärmstorlek därefter.

För att dölja element, använd helt enkelt.d-ingenklass eller någon av dem.d-{sm,md,lg,xl}-ingenklass för att göra eventuella responsiva skärmändringar.

För att visa element endast vid ett givet skärmintervall kan du ställa in ett sådant.d-*-ingenKlass och en.d-*-*Klasser grupperas tillsammans, till exempel,.d-none .d-md-block .d-xl-noneElement i alla skärmstorlekar kommer att vara dolda, förutom medelstora och stora enheter.

Renderingar:



Visa/göm för brytpunkt och ner:

  • dolda-xs-ner (dolda-xs) = d-ingen d-sm-block
  • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-ingen d-lg-block
  • hidden-lg-down = d-ingen d-xl-block
  • hidden-xl-down (n/a 3.x) = d-none (samma som hidden)


Visa/göm för brytpunkt och uppåt:

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


Visa/göm endast för en enda brytpunkt:

  • hidden-xs (endast) = d-ingen d-sm-block (samma som hidden-xs-down)
  • hidden-sm (endast) = d-block d-sm-none d-md-block
  • hidden-md (endast) = d-block d-md-ingen d-lg-block
  • hidden-lg (endast) = d-block d-lg-none d-xl-block
  • hidden-xl (ej/n 3.x) = d-block d-xl-none
  • synlig-xs (endast) = d-block d-sm-none
  • visible-sm (endast) = d-ingen d-sm-block d-md-none
  • visible-md (endast) = d-ingen d-md-block d-lg-none
  • visible-lg (endast) = d-ingen d-lg-block d-xl-none
  • Visible-XL (N/A 3.x) = D-Ingen D-XL-Block


Visualisering:



Referenslänkar:https://getbootstrap.com/docs/4.0/utilities/display/





Föregående:Vilka egenskaper bör en mjukvaruarkitekt ha?
Nästa:Kan inte injicera @Autowired i Listener

Relaterade inlägg
Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.
Mail To:help@itsvse.com