Bootstrap - Inhalte werden in Containter gegliedert.
Margin: Außenabstand
Der Margin wird in Bootstrap über die Klasse m gesteuert. Je "Richtung" kann ein Wert von 0 bis 5 angeben werden.
m-5: Abstand auf allen Seiten maximal stellen.
mx-5: Abstand auf der x-Achse (l und r)
my-2: Abstand nach oben und unten
mt/mb/ms/me: Einzelne Abstände der Seiten (z.B. wenn man nur einen Abstand nach oben möchte).
Die Paddings werden genauso gesetzt, nur mit einem P als Präfix
Fließender Container
Fließende Container nehmen die vollte Breite des Viewports ein.
Responsive Container
Responsive Container nehmen 100% der Breite ein, bis ein bestimmter breakpoint erreicht ist.
Danach werden sie in der Breite reduziert dargstellt.
100% breit bis zum sm-breakpoint.
100% breit bis zum md-breakpoint.
100% breit bis zum lg-breakpoint.
100% breit bis zum xl-breakpoint.
100% breit bis zum xxl-breakpoint.
Das Grid-System
Container lassen sich in einem 12-spaltigen Grid-System layouten / anordnen.
Beispiel:
.col-1
.col-6
.col-3
.col-1
.col-6
.col-3
.col-1
.col-6
.col-3
Aufgabe
Erstellen sie eine Übersicht über die vorhandenen Vorder- und Hintergrundfarben indem sie diese als Container in einem Grid anordnen.
dark
success
secondary
warning
Tertiary
background subtle
primary
danger
Navarbs
Navigationsleisten sind Bereiche mit Links, die meist oben auf der Website dargstellt werden und der Navigation
zwischen den Unterseiten oder verschobenen Bereichend einer Website dienen.
Bootstrap-Navbars können in Abhängigkeit vom Viewport in horizontaler, vertikaler und Hamburger-Dastellung wechseln.
Ein Navbar wird immer in ein Container-div gepackt. Diesem wird die Klasse .navbar zugeordnet.
Zusätzlich sollte eine responsive Klasse verwendet werden ,z.B. container-fluid.