Kursbeschreibung
Lernen Sie mit Bootstrap 5 moderne und responsible Web-Anwendungen und -Seiten zu erstellen. Bootstrap 5 ist wegen seiner einfachheit und unzähligen Möglichkeiten eines der beliebtesten CSS Frameworks, unsere Webseite benutzt auch Bootstrap 5.
Nach dem Kurs können Sie…
- mit dem Bootstrap 5 Grid responsive Webseiten mit Wow-Effekt erstellen.
- die Bootstrap Klassen, Helfer und Utilities richtig nutzen.
- optisch ansprechende Formulare mit Bootstrap 5 erstellen.
- Farben, Schatten, Rundungen Bootstrap weit an die eigenen Wünsche anzupassen.
Die wichtigsten Themen im Überblick
- Schritt für Schritt zum Bootstrap 5 Profi
- Responsive Websites richtig erstellen
- Von erfahrenen Web-EntwicklerInnen lernen
Zielgruppe
- Webmaster und Content Ersteller
- Web EntwicklerInnen
- Anwender von Web-Applikationen die Bootstrap verwenden (z.B. Joomla!)
Voraussetzung für die Schulung
HTML5 und CSS3 Kenntnisse.
Kursinhalte
Übersicht und Architektur
- Warum Bootstrap?
- Bootstrap Versionsgeschichte.
- Vor- und Nachteile
- Bestandteile
- Wo wird JavaScript und jQuery benötigt
- Sass
Bootstrap 5 Grid
- Flexbox
- CSS Grid
- Möglichkeiten und Probleme
- Der Container
- Anpassen an verschiedene Bildschirmgrößen
- Inhalte auf mobilen Geräten oder Desktops verstecken
- Gutters (Abstand zwischen Spalten)
- Hilfs-Tools
Bootstrap Komponenten
- Alerts
- Buttons
- Cards
- Tabs
- Accordion
- Modals
- Progress Bars
- Carousels
- uvm.
Bootstrap und Formulare
- HTML5 Input Elemente
- Form Layouts (Horizontal, Vertikal etc.)
- Input Gruppen
- Ranges
- Validierung
Bootstrap Utilities und Helfer
- Margin und Padding
- Borders
- Rundungen
- Farben
- Sichtbarkeit
- Position
- Schatten
- Text
- uvm.
Bootstrap 5 an das eigene Corporate Layout anpassen
- Node und npm
- package.json
- Default Farben, Rundungen und Schatten anpassen (Sass overwrite)
- Eigene CSS Variablen
- Bootstrap 5 erweitern.
Weitere Themen
- Performance Optimierung
- CSS und JavaScript Größe optimieren
- Tipps und Tricks