Bootstrap 5 komplett - Einführung und Anpassung

1.-2. Tag: Auch separat buchbar als

• 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

3.-4. Tag: Auch separat buchbar als

• Einführung
  • Übersicht über die Projektstruktur 
  • npm Befehle einsetzen
  • Einen eigenen Build erstellen
  • Dateigrößen optimieren
  • Jasmine Unit-Tests ausführen

• SCSS Einführung
  • Umwandlung von SCSS in CSS
  • Verwendung von Variablen
  • Verschachtelte Klassen
  • Stile auslagern und importieren
  • Mixins erstellen
  • Erweitern und erben von Eigenschaften
  • Operatoren anwenden
  • @Rules und Direktiven
  • Bedingte Stile
  • Maps und Schleifen

• Bootstrap und SCSS
  • Variablen für Farben und Grautöne
  • Variablen für Media Queries
  • Wichtige SCSS Funktionen
  • Bootstrap Optionen ändern

• Anwendungsfälle
  • Eigene Farben verwenden
  • Default Variablen überschreiben
  • Spaltenanzahl und Abstände im Grid ändern
  • Media Queries ändern

LernzieleNach diesem Seminar können Sie ein Layout mit Bootstrap 4 umsetzen. Sie kennen die Klassen und Komponenten und können mit dem Grid-System responsive Webseiten gestalten und in Ihrem Corporate Design umsetzen.ZielgruppenWebdesigner, Interface-Designer und UX-Designer mit Vorkenntnissen in HTML und CSS.