Skip to main content

Autor: Johannes Schneider

6 einfache Regeln für Bootstrap-Dummies

Geschrieben von Johannes Schneider am . Veröffentlicht in Tipps. Keine Kommentare zu 6 einfache Regeln für Bootstrap-Dummies

anbei eine Kurz-Anleitung für das Bootstrap Grid-System. Wenn ihr euch daran haltet, sollte eigentlich nix mehr schief gehen.

[Regel 1] container oder container-fluid verwenden

Diese Klassen sorgen für die richtige Ausrichtung und Abstände zwischen den Elementen. container gibt eine feste Breite vor, während container-fluid die volle Breite des Viewports einnimmt.

[Regel 2] Rows zuerst

Jede .col muss immer in einer .row sein. Ohne .row wird die .col nicht korrekt dargestellt, da .row den notwendigen negativen Margin ausgleicht, der durch das Padding der .col erzeugt wird.

[Regel 3] 12 Cols nebeneinander

Das Grid-System von Bootstrap ist in 12 Spalten unterteilt. Diese ermöglichen das Nebeneinanderstellen von Elementen. Wenn du mehr als 12 Spalten innerhalb einer .row verwendest, erfolgt ein automatischer Umbruch.

[Regel 3.1] Bei mehr als 12 Cols: Automatischer Umbruch

Wird die Anzahl von 12 Spalten in einer Reihe überschritten, werden die zusätzlichen Spalten auf die nächste Zeile umgebrochen.

[Regel 4] Breakpoints: col-sm-* (576px)

Mit der Klasse col-sm-* werden Spalten für Bildschirme mit einer Breite unter 576px auf volle Breite gesetzt und untereinander dargestellt, um besser auf Mobilgeräten angezeigt zu werden.

Das ist ausreichend, wenn man nur zwei Versionen pflegen möchte.

[Regel 5] Verschachtelung möglich

Man kann .rows in .cols verschachteln, um komplexere und maßgeschneiderte Layouts zu erstellen. Denke daran, dass verschachtelte .rows in einer .col ebenfalls bis zu 12 Spalten haben können.

[Regel 6] Vertikal zentrieren mit d-flex align-items-center

Um Inhalte vertikal zu zentrieren, kannst du die Klasse d-flex zusammen mit align-items-center verwenden:

<div class="col-sm-6 d-flex align-items-center">

[Kotlin] Varags und nullable Types

Geschrieben von Johannes Schneider am . Veröffentlicht in Kotlin. Keine Kommentare zu [Kotlin] Varags und nullable Types

Gerade eben hatte ich den Fall, dass ich einen nullable Type als Parameter an eine varags-Methode übergeben wollte.
Der varargs-Typ ist aber natürlich nicht nullable.

fun methodWithVarargs(vararg names: String) {[…]}

val nameOrNull: String? = null
methodWithVarargs(nameOrNull) //Does NOT compile!

Was also tun?

Die Lösung

Für Listen gibt es die schöne Methode listOfNotNull(). Leider noch nicht für Arrays.
Deshalb habe ich mir eine kleine Extension-Methode erstellt:

/**
 * Returns an array that contains this (if not null) or is empty (if this == null)
 */
inline fun <reified T> T?.arrayOfNotNull(): Array<T> {
  return if (this != null) arrayOf(this) else emptyArray()
}

Bitte beachten: „reified“ ist notwendig, da in der Methode ein Array vom konkreten Type erzeugt wird. (Bei Listen ist die Typinformation zur Laufzeit dagegen nicht enthalten).