Lernen mit Framework

Ich habe mir einen Bootstrap 5, Framework,  Kurs auf Udemy gekauft. Da ich den Lehrer schon kenne und auch schon einige Kurse von ihm besitze, probiere ich nun diesen neuen Kurs. Leider gibt es keine große Auswahl von diesem Thema auf Udemy. Das Framework ist ja auch noch relativ neu. Du findest nur ältere Versionen.

So habe ich nun einige Zeit gewartet um mit diesem Kurs zu starten. Natürlich kannst du auch auf YouTube schauen ob du das passende findest. Aber außer Crash Kurse habe ich nicht viel gefunden. Hier habe ich ein nützliches Video von Brad Traversy.

Wenn du schon mit dem Framework gearbeitet hast, kannst du ruhig die ersten zwei Sektionen überspringen. Diejenigen die keine Ahnung von Bootstrap haben, ist es natürlich nicht empfehlenswert. Man sollte schon die Basis Funktionen kennen.

Basis

Die Basis Funktionen beinhalten Typographie, Farben, Texte, Abstand mit Rändern und Auffüllungen, Dimensionierung, Positionierung, Haltepunkte und Container. Mit verschiedenen Klassen lassen sich die Überschriften und Texte verändern. Es gibt verschiedene Inline-Textelemente, Text Dekoration und Textausrichtung. Aber auch Textumbruch und Überlauf, Texttransformation, Schriftstärke und Kursivschrift, Textgröße und Zeilenhöhe.

Textelemente:

  • <mark> – der Text wird hervorgehoben
  • <del> – der Text wird durchgestrichen
  • <s> – hat die gleiche Auswirkung wie del
  • <ins> – der Text wird unterstrichen
  • <u> – underlined der Text ist unterstrichen
  • <small> – der Text wird kleiner
  • <strong> – der Text wird hervorgehoben
  • <em> – der Text wird in Italic dargestellt

Textdekoration beginnt mit class=”text-decoration-… underline ist unterstrichen, line-through ist durchgestrichen und none entfernt die Dekoration. Zum Schluss gibt es noch die Textausrichtung. Start, center und end. Bootstrap hat auch seine eigenen Farben. Man unterscheidet hier zwischen bg-primary bis zu black-50 und white-50. Einfach nachzuschlagen auf Bootstrap Webseite unter Color.

Grid und Flexbox

Das Rastersystem von Bootstrap verwendet eine Reihe von Containern, Zeilen und Spalten, um Inhalte zu gestalten und auszurichten. Es ist mit Flexbox ausgestattet und reagiert vollständig. Wie funktioniert das? Das Grid System hat 6 Breakpoints. Mit diesen Breakpoints lässt sich die Seite auf verschiedene Grössen fixieren. D.h. für verschiedene Screen Größen muss sich der Inhalt anpassen. Für Grid verwendest du Reihen und Spalten.

Container zentrieren und polstern Ihren Inhalt horizontal. Verwende .container für eine responsive Pixelbreite, .container-fluid für die Breite: 100% über alle Ansichtsfenster und Geräte oder einen responsiven Container (z.B. .container-md) für eine Kombination aus flüssigen und Pixelbreiten.

Spalten sind unglaublich flexibel. Pro Zeile stehen 12 Vorlagenspalten zur Verfügung, mit denen du verschiedene Kombinationen von Elementen erstellen können, die sich über eine beliebige Anzahl von Spalten erstrecken. Spaltenklassen geben die Anzahl der zu überspannenden Vorlagenspalten an (z. B. Spalte-4 umfasst vier). Breiten werden in Prozent angegeben, sodass Sie immer die gleiche relative Größe haben.  Mehr dazu kannst du auch unter Doc auf der Original Webseite nachlesen.

Komponenten

Bootstrap verfügt über verschiedene Komponenten. Mit diesen kannst du deine Webseite verschieden ausrichten. Mit dem Carousel lässt sich ganz einfach eine Slideshow einbinden. Auch Bilder in Karten, Gallerien, Preistafeln und noch mehr. Das Stylen ist mit Klassen sehr einfach zu erreichen. Auch die Navigationsbar mit dem Hamburger Menu. Ganz einfach läßt sich ein DropDown Menü einbauen.

Listen und Listen Gruppen sowie Buttons kannst du mit einfachen Schritten einbauen. Wie wäre es mit einem Accordion oder Seitenanzahl? Pagination oder Modal? Auch das ist mit Frameworks kein Problem. Mit wenig Aufwand lassen sich diese leicht erstellen. Auch ungeübte oder Anfänger können mit Bootstrap wunderschöne, einfache aber auch komplexere Webseiten erstellen. Willst du ein abweichendes Styling, kannst du das auch mit erweiterten CSS oder SASS erreichen.

Icons für Framework

Mit Font Awesome bindest du Icons in deine Seite ein. Font Awesome bietet skalierbare Vektorsymbole, die sofort angepasst werden können – Größe, Farbe, Schlagschatten und alles, was mit der Leistung von CSS möglich ist.

Aber auch Bootstrap hat seine eigenen Icons die du verwenden kannst. Diese findest du hier. Kostenlose, hochwertige Open-Source-Symbolbibliothek mit über 1.300 Symbolen. Füge sie nach Belieben hinzu – SVGs, SVG-Sprite oder Webfonts. Verwende sie mit oder ohne Bootstrap in jedem Projekt.

Icons lassen sich sehr schön in das Menü und Footer einbauen. Auch geeignet für Links zu Social Media Seiten. Du kannst auch die Größe der Icons verändern.

Themes

Mit Bootstrap lassen sich schnell Themes und Templates gestalten. Diese kannst du dann wiederum für diverse Kundenprojekte einsetzen und du musst nicht jedesmal von Scratch beginnen. Es ist wirklich ratsam sich eine Bibliothek anzulegen und dann bei Bedarf darauf zuzugreifen. Es gibt aber auch schon fertige Templates im Internet die du dir zum Teil auch schon gratis herunterladen kannst. Sie sind sehr schön ausgelegt und leicht zu verwenden und zu verändern. Sie lassen sich für jede Bedürfnisse individuell gestalten. Du findest sie unter Free Bootstrap Themes und Templates.

Also worauf wartet ihr noch. Lernt Bootstrap 5 und erstellt erstaunliche Webseiten. Ihr könnt eure Projekte dann auch in einer Gruppe teilen. Meine Gruppen sind Javascript und HTML, oder wenn ihr jemandem helfen wollt mit eurem Projekt Web Developer Help Group.

Mein Lehrer ist Menyhart Norbert und er hat auch Tutorials on YouTube. Auch kannst du seine Seite aufrufen und dort stöbern. Sehr interessant ist sein Carousel usign HTML CSS+Bootstrap und JS.

Bootstrap

Carousel Bootstrap Framework

 

Hier ist das fertige Projekt. Modern Carousel with Bootstrap. Wenn ihr näheres zu dem Kurs wissen wollt schreibt mir im Kommentar. Ich werde euch auf dem Laufenden halten.

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.