Seminare
Seminare
  • Seminare
  • Anbieter
  • 5 km
  • 10 km
  • 25 km
  • 50 km
  • 100 km
  • 150 km
  • 200 km
  • 300 km

Einführung in Bootstrap 5

Seminar - GFU Cyrus AG

Nach diesem Seminar können Sie responsive Layouts mit dem Bootstrap-5-Grid und Utilities umsetzen. Sie integrieren Navigationen, Formulare und ausgewählte interaktive Komponenten und konfigurieren diese über data-Attribute oder einfache JavaScript-Aufrufe ohne jQuery.

Sie nehmen erste Anpassungen mit CSS-Variablen vor und berücksichtigen wesentliche Anforderungen an Semantik, Fokus, Tastaturbedienung und Kontraste. Sie prüfen Ihre Oberfläche bei unterschiedlichen Bildschirmbreiten und können den Alpha-Status sowie wichtige Konzeptänderungen von Bootstrap 6 einordnen.
Termin Ort Preis*
firmenintern auf Anfrage auf Anfrage
*Alle Preise verstehen sich inkl. MwSt.

Detaillierte Informationen zum Seminar

Inhalte:

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

  • Tag 1: Einstieg und responsive Gestaltung
  • Einstieg in Bootstrap 5.3
    • Praxisprojekt und angestrebte Ergebnisse vorstellen
    • Offizielle Dokumentation und versionsgerechte Beispiele nutzen
    • Bootstrap lokal oder über ein CDN einbinden
    • CSS, JavaScript-Bundle und Bootstrap Icons unterscheiden
    • Browserunterstützung und Versionswahl einordnen

  • Responsive Layouts mit dem Grid-System
    • Mobile-first, Container, Rows und Columns
    • Breakpoints einschließlich xxl
    • Automatische Spaltenbreiten und row-cols-*
    • Gutters, Verschachtelung, Ausrichtung und Reihenfolge
    • Bootstrap-Flexbox-Raster von nativem CSS Grid unterscheiden

  • Utilities, Typografie und Medien
    • Abstände, Display, Flexbox, Rahmen und Schatten
    • Textausrichtung sowie logische Richtungen start und end
    • Responsive Bilder, Seitenverhältnisse und Bildanpassung
    • Icons sinnvoll einsetzen und beschriften

  • Praxis: responsives Grundlayout
    • Seitenstruktur mit Inhaltsraster und Card-Übersicht erstellen
    • Darstellung bei mehreren Bildschirmbreiten prüfen
    • Semantische Struktur und sinnvolle Lesereihenfolge berücksichtigen

  • Tag 2: Komponenten, Formulare und Interaktion
  • Navigationen und Inhaltskomponenten
    • Responsive Navbar und Offcanvas-Navigation
    • Dropdowns, Breadcrumbs und Tabs im Überblick
    • Cards, Buttons, Badges, Alerts und Listen
    • Hero-Bereiche mit Utilities statt einer Jumbotron-Komponente

  • Formulare und Tabellen
    • Labels, Eingabefelder, Selects, Checkboxen und Switches
    • Input Groups und Floating Labels
    • Formularlayout und verständliche Validierungsrückmeldungen
    • Grenzen rein visueller Validierungsanzeigen
    • Responsive Tabellen und sinnvolle Tabellenstruktur

  • Interaktive Komponenten und Statusanzeigen
    • Modal, Collapse und Accordion
    • Toasts, Spinners und Placeholders
    • Tooltips und Popovers: Einsatzgrenzen und Initialisierung
    • Pagination und Progress von Anwendungslogik unterscheiden

  • JavaScript-Grundlagen für Bootstrap
    • Komponenten über data-bs-* konfigurieren
    • Einfache programmgesteuerte Initialisierung ohne jQuery
    • Abhängigkeiten und typische Einbindungsfehler erkennen

  • Erste Anpassungen und Zugänglichkeit
    • CSS-Variablen und eigenes Ergänzungsstylesheet
    • Light/Dark Mode mit data-bs-theme
    • Tastaturbedienung, Fokus, Kontraste und reduzierte Bewegung
    • .visually-hidden und zugängliche Beschriftungen

  • Praxisabschluss und Bootstrap-6-Überblick
    • Praxisoberfläche mit Navigation, Formular und Dialog vervollständigen
    • Grundlegende Qualitätsprüfung und Ergebnissicherung
    • Alpha-Status, neue Browseranforderungen und wichtige Konzeptänderungen von Bootstrap 6 einordnen
    • Ergebnis der Einführung: Eine responsive Bootstrap-5-Oberfläche mit Navigation, Formular und ausgewählten interaktiven Komponenten.

Zielgruppe:
Das Seminar richtet sich an Webdesigner, Frontend-Entwickler sowie Interface- und UX-Designer, die Benutzeroberflächen praktisch mit HTML und CSS umsetzen oder deren Umsetzung begleiten.

Teilnahmevoraussetzungen


Sie benötigen Grundkenntnisse in HTML und CSS, insbesondere zu Selektoren, Box-Modell und grundlegendem Seitenaufbau.

Grundlegende JavaScript-Kenntnisse sind hilfreich.
Seminarkennung:
S2075
Nach unten
Nach oben
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern. Diese Cookies werden nicht automatisiert gesetzt. Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren. Weitere Informationen finden Sie hier.
Akzeptieren Nicht akzeptieren









Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha



Bei der Verarbeitung Ihrer personenbezogenen Daten im Zusammenhang mit der Kontaktfunktion beachten wir die gesetzlichen Bestimmungen. Unsere ausführlichen Datenschutzinformationen finden Sie hier. Bei der Kontakt-Funktion erhobene Daten werden nur an den jeweiligen Anbieter weitergeleitet und sind nötig, damit der Anbieter auf Ihr Anliegen reagieren kann.







Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha