Bootstrap 5 komplett - Einführung und Anpassung

Seminarziel

Nach 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.

Inhalt

1.-2. Tag: Auch separat buchbar als Einführung in Bootstrap 5

• 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 Bootstrap 5 individuell anpassen und erweitern

• 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