Bootstrap 5 Columns Part 3

 

Columns in Bootstrap
Und weiter geht es mit Columns in Bootstrap 5. Im letzten Post hatten wir uns schon einige Varianten angeschaut. Prinzipiell geht es um die Positionierung innerhalb der Row. Die einte Variante funktioniert über die row css3 Klasse, die andere Variante über die col css3 Klasse. 

Wir kennen bereits: align-items-start, align-items-center, align-item-end. Mehr dazu erfahren Sie in diesem Post. Sie positionieren über die row Klasse.
Die Positionierung über die col Klasse haben wir im erwähnten Post, mit Hilfe von align-self-start, align-self-center und align-self-end umgesetzt.

Diese Positionierungen hatten sich alle auf die vertikale Richtung bezogen. In der horizontalen Richtung konnten Sie im erwähnten Post justify-content-start, justify-content-center und justify-content-end kennen lernen. Nun geht es weiter mit

justify-content-around


Mit dieser Bootstrap 5 Klasse wird der freie Raum horizontal, gleichmäßig unter dem Inhalt der row verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist der Gleiche. Der leere Raum am Anfang und am Ende der Reihe, nimmt dabei die Hälfte des Abstandes zwischen benachbarten Elementen in Anspruch. Beispiel:

justify content around


justify-content-between


Diese Variante verteilt den leeren Raum ausschließlich zwischen den Elementen. Das heisst vor dem ersten und nach dem letzten Element befindet sich kein leerer Raum:

justify content between


justify-content-evenly


Diese Klasse ist ein enger Verwandter von justify-content-around. Der große Unterschied ist, das der frei Raum gleichmäßig unter den Elementen verteilt wird:

justify content evenly

Normalerweise werden die col Kolumnen in der Reihenfolge dargestellt, wie sie im Code erwähnt werden. Diese Reihenfolge können Sie jedoch ändern mit

order


Bootstrap Code Beispiel

Das hat dann folgendes Ergebnis zur Folge:

Bootstrap order Beispiel

Für diesen Zweck können Sie auch order-first, für die erste col in der Reihe, und order-last, für die letzte col in der Reihe, verwenden. Das ganze funktioniert über col Klasse.
Eine Andere Möglichkeit in die Positionierung einzugreifen ist offset . Im Beispiel Code oben besetzen Sie von den 12 Kolumnen des Bootstrap 5 Gridsystems 10. Mit offset-1 können Sie bei einer Kolumne leeren Raum einfügen. Dies geschieht von links, nach rechts.

offset in Bootstrap 5


Das war es für diesen Post. Bis bald.

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

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

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

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