HTML/CSS: Templates; Bootstrap-Ressourcen

Hier finden Sie einige wichtige Ressourcen, die wir im Unterricht regelmäßig verwenden.

Templates

Die meisten kostenlosen (und kostenpflichtigen) Templates, die wir im Web finden, sind sehr aufgebläht und haben viele Funktionen, die uns als Anfänger/innen das Leben schwer machen. Deshalb arbeiten wir mit ganz einfachen (natürlich kostenlosen) Vorlagen von der Website Start Bootstrap. Alle Templates sind responsiv.

• »Bare« - Bootstrap 5 Starter Template - A complete project boilerplate built with Bootstrap - Hat im Wesentlichen nur eine Navigation und kein Styling.
• Simple Sidebar - Ebenfalls von startbootstrap.com, nicht ganz so spartanisch, hat zwei Navigationsbereiche.
• Start Bootstrap - General Templates - Einige sehr einfache (und damit: sehr einfach anzupassende) Templates auf Bootstrap-Basis. Wer eine etwas umfangreichere Website bauen will, kann dieses hier benutzen.

Formular-Elemente

Hilfreiche Formularschnippsel zum Rauskopieren finden Sie unten im Bereich "Bootstrap". Dort sind aber nicht alle verfügbaren Formularelemente zu finden.

• Gute Übersicht/Einführung in HTML-Formular-Elemente bei W3Schools - Forms
• Übersicht über die Input Types (wie Textfelder, Datepicker usw.), ebenfalls bei W3Schools

Bootstrap: Hilfreiche HTML-Vorlagen und -Schnippsel

Bootstrap ist ein sog. CSS-Framework. Bspw. lassen sich viele HTML-Elemente ganz einfach über Klassen stylen - das geht schnell und man muss wenig CSS können. Auch wenn die Dokumentation recht umfangreich ist - Sie müssen erst mal nichts tun, außer Bootstrap in die Website einzubinden, und schon sieht alles ein wenig hübscher aus.

• Bootstrap 5.0: Introduction - Hier steht ganz einfach beschrieben, wie Sie Bootstrap an Ihre Webseiten dranhängen. Etwa in der Mitte der Seite finden Sie ein "Starter Template", das können Sie als Ausgangsmaterial benutzen, wenn Sie nicht ein Template von den hier oben verlinkten nehmen.
• Formulare in Bootstrap 5.0 - Hier finden Sie Beispiele für die grundsätzliche Gestaltung von HTML-Formularen, immer schön ein Beispiel und den zugehörigen HTML-Code. Wenn Sie selbst ein Formular gestalten wollen, können Sie sich hier den HTML-Code für ein Formular rauskopieren und dann anpassen. Im oberen Bereich der Seite oder in der linken Navigation können Sie auch einzelne Input-Typen auswählen und Beispiele sehen (z. B. Checkboxen und Radiobuttons, Select-Dropdowns, Range-Slider)
• Bootstrap 5: Dokumentation - Wenn Sie Bootstrap richtig einsetzen wollen, finden Sie in der linken Navigation die wesentlichen Infos. Interessant für Sie könnte neben "Forms" (s.o.) "Components" sein (dort gibt es z.B. "Buttons", "Accordions", "Dropdowns" u.v.m.). Wenn Sie etwas anspruchsvollere Layouts planen, werden Sie im Bereich "Layout" fündig. Wichtig sind hier die Sektionen Grid system und Columns.