Bootstrap 5 Columns Part 1

Columns 
In diesem Post lernen Sie mehr über Bootstrap 5 und Columns. 
Falls Sie ältere Posts zum Thema Bootstrap 5 interessieren: einfach links auf der Page bei den Tags, Bootstrap wählen.

Bootstrap 5 funktioniert innerhalb eines Gridsystems und bietet einfache Möglichkeiten Html Elemente zu positionieren. Eines dieser Elemente ist Container.
Eine gängige Strategie ist es in so einem Container, Reihen und Spalten anzuordnen, um ein gewünschtes Layout umzusetzen.

In diesem Post gehe ich speziell auf die Spalten, engl. columns ein. Sollten Sie die Code Beispiele nachvollziehen wollen, empfehle ich noch einmal den Post zum Thema Template zu lesen. Wie meistens in diesem Blog wurde der Code mit Visual Studio Code, in einer Windows Umgebung geschrieben. Es ist empfehlenswert die LiveServer Erweiterung zu installieren. Mit dieser können Sie ihren Code Live im Browser ausführen lassen !

css3


Im Html Code werden wir eine Row (Reihe) erstellen und in dieser 3 Kolumnen.  Ihnen sollte bewusst sein, das row und column als Html div Elemente implementiert sind. Das heisst: Durch die Zuweisung der Klasse div oder col definieren wir das entsprechende Element. Hier der css3 Code:

.row {
    margin-bottom: 40px;
    height: 200px;
    background-color: #363232;
}
.row div {
    background-color: #e7d8d8;
    padding: 20px;
    text-align: center;
    height: auto;
}

Mit .row erstellen Sie eine Klasse für die Reihe, mit .row div eine Klasse für die div Elemente die sich in dieser Reihe befinden. Nun zum Html Code:

 <div class="container">
    <div class="row">
      <div class="col">
        Meine erste Kolumne
      </div>
      <div class="col">
        Meine zweite Kolumne
      </div>
      <div class="col">
        Meine dritte Kolumne
      </div>
    </div>
  </div>

Wenn Sie die css Anweisungen noch einmal betrachten, sehen für .row und .row div unterschiedliche Hintergrundfarben. Warum dann im Browser folgendes Ergebnis:

Bootstrap 5 3 Columns

In dieser Code Form wird row den kompletten Raum von container einnehmen. Die drei Kolumnen die Sie sehen wiederum teilen sich den kompletten Raum der Reihe. Beachten Sie: in der css Klasse für .div row ist die Höhe auf auto festgelegt. Jetzt können Sie den Code aber wie folgt ändern:

<div class="row align-items-start">

Das Resultat:

align item start

Jetzt sehen Sie die Hintergrundfarbe aus der css Klasse für .row ! Aber lassen Sie sich nicht verwirren, das ist ein Nebeneffekt von align-item-start .
In Bootstrap 5 können Sie Flexbox nutzen. Es ist in das Gridsystem von Bootstrap integriert. Mit

<div class="row align-items-center">

Erreichen Sie zum Beispiel folgendes Ergebnis:

Align Items Center


Das war es für den ersten Teil. 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