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.

    Formular-Elemente

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

    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.