Benutzeroberfläche und Interaktionsarchitektur

Laden Sie Bootstrap herunter

Enthaltene Dateien

Verwendung von Bootstrap in Webseiten

Layout

Verschachteltes Layout und fließendes Layout

Responsives Layout

Konvertieren Sie das vorhandene Layout mit fester Breite in ein responsives Layout

Utility-Klassen für responsive Layouts

Gängige Tags und Stile

Liste

Code

Google Prettify

Blatt

bilden

Präfixe und Suffixe von Textfeldern

Optionsfeld

Kontrollkästchen

Liste auswählen

Formularlayout

Taste

Schaltflächengruppe

Schaltfläche mit Dropdown-Menü

Navigationsmenü

Dropdown-Menü im Navigationsmenü

Responsives Design des Navigationsmenüs

Tab Nr. 1

Tab Nr. 2

Navigationspfade und Paginatoren

Schnelle Nachricht

Miniaturansicht

Dialogfeld

Tooltip

Inhalt reduzieren

Karussell

Kurseinführung

Beispiele aus der Praxis für Responsive Design

Ansichtsfenster - Ansichtsfenster

Ansichtsfenster manuell konfigurieren

Pixeldichte

So wenden Sie Medienabfragen an

Medientyp Medientyp

Meida-Funktion Medienfunktion

Seitenverhältnis der Breite des Sichtfensters zur Höhe

Seitenverhältnis Das Verhältnis der Breite zur Höhe des Geräts

Ausrichtung Die Verwendungsrichtung des Geräts

height (visuelle Fensterhöhe) und device-height (Gerätehöhe)

width (Breite des visuellen Fensters) und device-width (Gerätebreite)

Auflösung Pixeldichte

Betreiber - und

Verknüpfen Sie mehrere durch Kommas getrennte Medienabfragen

Betreiber - nicht

Responsives Layout Nr. 1

Responsives Layout Nr. 2

Responsives Layout Nr. 3

Responsive Navigation

HTML für Navigationsmenü

CSS für Navigationsmenü

Schaltflächenstil umschalten

Responsive Navigationsmenüstile

Responsive Bilder

Responsive Hintergrundbilder

Unterschiedliche Gerätegrößen verwenden unterschiedliche Bilder

Verwenden Sie unterschiedliche Hintergrundbilder für Geräte unterschiedlicher Größe

Wechseln Sie je nach Bildschirmdichte zwischen verschiedenen Hintergrundbildern

Bildfüllung

Responsive Diashow

Schieberegler

Stil der Schieberegler-Taste

Beheben Sie das Problem, dass Folien überschrieben werden

Abschluss