Beschreibung
Bootstrap 5 komplett - Einführung und Anpassung
In diesem Seminar lernen Sie, Bootstrap 5 anzuwenden und individuell für Ihre Zielsetzung anzupassen. In einem ersten Teil des Seminars erhalten Teilnehmer mit HTML-Kenntnissen das nötige Handwerkszeug um Layouts schnell in Bootstrap umsetzen zu können. Sie lernen das CSS-Grid kennen und können anschließend Layouts umsetzen. Der zweite Teil erweitert Ihren Kenntnisstand in der Verwendung von Bootstrap. Im Arbeitsalltag von Agenturen und in der Applikations-Entwicklung muss Bootstrap um individuelle Anpassungen ergänzt werden. Bestehende Komponenten müssen erweitert und neue entwickelt werden. Das Corporate Design muss übernommen, Schriftarten, Abstände und Rasteraufteilungen geändert werden. Mit dem CSS Präprozessor SASS kann diese Aufgabe effizient umgesetzt werden. Ihre Designs werden damit wiederverwendbar.Kommende Starttermine
Inhalte / Module
- 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
- 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
Zielgruppe / Voraussetzungen
Hinweis: Dieser Kurs richtet sich an Mitarbeitende aus Unternehmen und Institutionen.
Für Privatpersonen ist dieser Kurs leider nicht geeignet.
Bitte beachten Sie: Bildungsgutscheine der Agentur für Arbeit werden für diesen Kurs NICHT anerkannt.
Abschlussqualifikation / Zertifikat
Infos anfordern
GFU Cyrus AG
Erweitern Sie Ihre IT-Skills mit einem offenen IT-Training oder ganz nach Ihren Bedürfnissen durch eine individuelle IT-Schulung. Programmiersprachen (C#, Python, Java, …), Microsoft Office 365, Anforderungsmanagement, Projektmanagement, Business Intelligence, Data Science, Künstliche Intelligenz, IT-Sicherheit , Administration & Datenbanken, Softwareentwicklung, Testmanagement...
Erfahren Sie mehr über GFU Cyrus AG und weitere Kurse des Anbieters.