Bei der Anpassung Ihrer Joomla 3 Webseite für Desktop Computer, Tablets und Smartphones ist es manchmal notwendig, Inhalte auf bestimmten Geräten zu verstecken bzw. zu veröffentlichen, um die Darstellung zu optimieren. In diesem Fall kann können Ihnen die Klassen aus der Bootstrap-Bibliothek helfen, die Steuerung der Inhalte zu übernehmen.

Responsive Utility-Klassen

Inhalte können ein- oder ausgeblendet werden, abhängig vom Gerät, indem Sie folgende Klassen berücksichtigen:

  • visible-phone - sichtbar für Bildschirme kleiner als 767px
  • visible-tablet - sichtbar für Bildschirme ab 767px bis 967px
  • visible-desktop - sichtbar für Bildschirme mit 980px und größer
  • hidden-phone - versteckt für Bildschirme kleiner als 767px
  • hidden-tablet - verteckt für Bildschirme ab 767px bis 967px
  • hidden-desktop - versteckt für Bildschirme mit 980px und größer

Wie funktioniert das?

Wenn Sie Inhalte, z.B. Module auf bestimmten Geräten ein- bzw. ausblenden möchten, dann nutzen Sie einfach ein Modul-Suffix, um die Anzeige zu steuern:

In einigen Fällen, wenn ein Modul keine Suffixe unterstützt, ist es notwendig, das Suffix an eine Html-Klasse anzuhängen: