Bootstrap 5 Columns Part 2

Bootstrap Column Part 2

 Das ist der zweite Post zum Thema Spalten (Column) in Bootstrap 5. Im ersten Teil konnten Sie lernen, wie Sie einfach und schnell 3 Kolumnen erstellen. 
In diesem Post werden wir das Thema vertiefen. Zuerst aber ein nützlicher Tipp: Vor allem zu Beginn ist es schwierig, den Überblick über die Klassenbezeichnungen von Bootstrap zu behalten. Hier hilft ein CheatSheet. Dort finden Sie die Bezeichnungen kompakt aufgelistet !






align-items-start


Mit der align-items-start Klasse für die Reihe (Row) wurden die Spalten am Anfang, also start, positioniert:

Kolumne Position Start

align-items-center


Mit der align-items-center Klasse positionieren Sie ihre Kolumne mittig in der Reihe:

Kolumne Position Center


align-items-end

Zum Abschluss darf natürlich align-item-end nicht fehlen. Wie Sie sicher vermuten positionieren Sie so Ihre Kolumne am Ende der Reihe:

Kolumne Position Ende

Nun ändern wir unser css3 File vom letzten Post leicht ab:

geändertes css3 Beispiel


Neu sehen Sie jetzt eine border Formatierung mit der Farbe Weiß. Dies dient der bessern Übersicht. 

Bis jetzt haben wir die Kolumnen mit Bootstrap 5 Klassen über die Reihe positioniert. Das wirkt sich immer auf alle Kolumnen innerhalb der Reihe aus. Was aber, wenn Sie jede Kolumne individuell innerhalb der Reihe positionieren möchten ?

align-self


Um das Ziel zu erreichen formatieren Sie die Kolumnen direkt. Hier der Beispiel Code:

Kolumnen direkt formatieren


Auch hier können Sie die drei Positionen anwenden: start, center und end. Im Bild unten sehen Sie beide Varianten:

Ergebnis

Bis jetzt haben wir unsere Kolumnen vertikal positioniert. Unsere 3 Kolumnen haben dabei horizontal den Raum gleichmäßig unter sich aufgeteilt. Oft ist aber auch eine horizontale Positionierung nötig, da die Kolumnen unterschiedliche Breiten besitzen können. Um das zu Veranschaulichen erweitern Sie ihren Html Code wie folgt:
Beispiel mit justify Kolumne

Im Code positionieren Sie die Kolumnen wieder über die Reihe selbst. Neu verwenden Sie für die Kolumnen die Klassen col-2, col-3 und col-4 . Wie wir wissen basiert das Bootstrap 5 Gridsystem auf  12 Kolumnen. Genau auf das bezieht sich die Zahl im Klassennamen.
So nimmt col-3 genau 3 Spalten in diesem Layoutsystem ein.
Mit justify-content-start positionieren Sie die 3 Kolumnen links zu Beginn der Reihe. Ergebnis:

Justify Start Positionierung

Im Code haben wir total 9 Kolumnen des 12 Kolumnen Systems von Bootstrap belegt. Dementsprechend sehen Sie ganz rechts eine leere dunkle Fläche.
Wie bei der vertikalen Positionierung steht justify-content in drei Grundvarianten zur Verfügung: justify-content-start, justify-content-center und justify-content-end.

Es existieren noch weitere Varianten, aber das ist ein Thema für den nächsten Post in dieser Reihe. Bis bald.



Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Material Design in Flutter Teil 2

Bild
Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex
Mehr anzeigen

Flutter -- ohne Dart geht es nicht 2 -- einfache Variablen Typen

Wer sich noch einmal den ersten Teil durchlesen möchte, geht auf diese Seite . Ohne Variablen kann man nicht programmieren. Dar t stellt uns eine Reihe von Variablen Typen zur Verfügung, wobei man immer im Hinterkopf behalten sollte: Alle Variablen Typen in Dart sind auch Objekte! Alle Variablen haben den Startwert NULL .  Beispiel: int jahr = 2018 ;   // int = Variablen Typ für ganze Zahlen z.b.: 1 oder 39 oder 5315 Der Variable mit dem Namen jahr weisen wir den Wert 2018 zu. Wir hätten für die Variable jahr , auch folgende Deklaration verwenden können: var jahr = 2018 ; In dieser Variante wird Dart jahr ebenfalls als int Variable behandeln. Der große Unterschied ist jedoch, das wenn wir im späteren Programmverlauf, dieser Variable ohne Fehlermeldung z.b. einen String zu weisen können. Während dies bei der int Version zu einer Fehlermeldung führen würde . Einer int Variablen können wir aber auch einen hex Wert zuweisen: int seltsame Zahl = 0xEADEBAEE
Mehr anzeigen

Dart Final Const

Bild
Der Einsatz von  Final und Const in Dart ist nicht ganz einfach zu verstehen. Beide Schlüsselwörter deklarieren eine Variable, die explizit im Code initialisiert werden muss und im weiteren Verlauf nicht mehr veränderbar ist. Wir können zum Beispiel  deklarieren:  int zahl ; . Die Variable zahl ist nicht initialisiert und wird von Dart mit dem Wert  null belegt. Das sollte man nicht mit 0 verwechseln. null lässt sich am besten mit " undefiniert " übersetzen und ist ein Sprachkonstrukt, welches sich innerhalb von Dart auch benutzen bzw abfragen lässt. Im weiteren Verlauf des Programms können wir der Variable zahl werte zuweisen, sprich den Inhalt von zahl ändern. Bei final und const sieht das anders aus. const Beispiel Code: Die erste Variable wird const int tage deklariert. Jeder Versuch sie im weiteren Programmverlauf zu ändern, wird eine Fehlermeldung hervorrufen. Die zweite Variable entsteht aus einer Berechnung, wobei die erste mit einbezogen
Mehr anzeigen