Einführung in Bootstrap 5

Diese Agenda ist auch Bestandteil (1.-2. Tag) des Kurses

• Einstieg in Bootstrap 5
  • Ressourcen und Download
  • Quellen für Themes
  • Browser-Kompatibilität
  • Layout mit CSS Klassen
  • Erweiterungen und Plugins

• Umgang mit dem Grid-System
  • Gestaltungsprinzipien und 12er-Raster
  • Zwischenräume
  • Automatisches Layout
  • Responsive Klassen
  • Ausrichtung und Sortierung
  • Verschachtelte Darstellungen
  • Flexbox horizontal und vertikal
  • Suchmaschinen optimierter HTML-Code

• Typografie
  • Größen einstellen
  • Farbschemata anwenden
  • Abstände
  • Textausrichtung
  • Schatten und Rahmen
  • Sichtbarkeit und Textersetzung

• Bootstrap Icons
  • Download der Icon-Dateien
  • Verwenden der Icons 
  • Styling anwenden

• Typische Inhalte verwenden
  • Texte und Überschriften 
  • Bilder und Medien-Elemente
  • Formulare und Tabellen

• Navigationen erstellen
  • Responsive Navbars 
  • Menüpunkte als Dropdown
  • Tabbed Navigation

• Komponenten verwenden
  • Alerts, Badges und Buttons
  • Listen
  • Cards und Jumbotron

• Interaktive Komponenten
  • Pagination
  • Progress
  • Scroll Spy
  • Modal Boxen, Popup-Fenster
  • Karussell, Slider
  • Akkordeon
  • Tool-Tipps

• Bootstrap und JavaScript
  • Bootstrap ohne jQuery verwenden
  • Data Attribute, data-toggle
  • Methoden der Komponenten

• Theming
  • Überschreiben der CSS-Klassen
  • Eigenes Bootstrap-CSS erstellen mit Online-Tools

LernzieleNach diesem Seminar können Sie ein Layout mit Bootstrap 5 umsetzen. Sie kennen Klassen und Komponenten und können responsive Webseiten und Web Apps gestalten. ZielgruppenWebdesigner, Interface-Designer und UX-Designer mit Vorkenntnissen in HTML und CSS.