Aus dem Kurs: Bootstrap 5 Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

RWD und Bootstrap Breakpoints

RWD und Bootstrap Breakpoints – Tutorial zu Bootstrap

Aus dem Kurs: Bootstrap 5 Grundkurs

Gratismonat starten Für Ihr Team erwerben

RWD und Bootstrap Breakpoints

“

Heute sollen Webseiten responsive sein, d. h., sie sollen sich anpassen an die verschiedenen Viewports. Sehen wir uns an, was das technisch bedeutet und welche Breakpoints es in Bootstrap gibt. Der Artikel, den ich gerade hier aufgerufen habe, stammt von Ethan Marcotte, der hat den Begriff »responsive web design« begründet. Und Sie sehen, dieser Artikel ist auch ein ganz schönes Beispiel dafür, wie sich Inhalte an verschiedene Viewports anpassen können. Responsive Webdesign bedeutet, dass Sie eine HTML-Basis haben und unterschiedliche Präsentationen bei verschiedenen Viewports. Technisch brauchen Sie eine Meta-Angabe im HTML-Code, die ist standardmäßig schon beim Bootstrap-Template dabei, und die ist ganz wichtig, damit Smartphones nicht die Seite kleinskalieren. Und die eigentlichen Anpassungen werden dann über CSS durchgeführt an die verschiedenen Viewports und oft werden dafür Media Queries verwendet. Und so kann das dann bspw. aussehen: Sie sehen hier Media Queries, "@media", bei…

Inhalt