Bootstrap- Inhalte werden in Containern gegliedert.
Margin: Außenabstand
Der Margin wird in Bootstrap über die Klasse m gesteuert. Je "Richtung" kann ein Wert von 0 bis 5 angegeben werden.
m-5: Abstand auf allen Seiten maximal.
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
Die Paddings werden genauso gesetzt, nur mit einem p als Präfix.
Fließender Container
Fließende Container nehmen die volle Breite des Viewports ein.
Responsive Container
Responsive Container nehmen 100% der Breite ein, dis ein bestimmter breakpoint erreicht ist. Danach werden sie in der Breite reduziert dargestellt.
100% Breit bis zum sm breakpoint
100% Breit bis zum sm breakpoint
100% Breit bis zum sm breakpoint
100% Breit bis zum sm breakpoint
100% Breit bis zum sm breakpoint
Das Grid-System
Container lassen sich in einem 12-Spaltigen Grid-System layouten/ anordnen.
Beispiel:
.col
.col-6
.col
.col-2
.col
.col-2
Aufgabe
Erstellen sie eine Übersicht über die vorhandenen Vorder- und Hintergrundfarben indem sie diese als Container in einem Grid anordnen.
PRIMARY
SECONDARY
SUCCESS
DANGER
WARNING
INFO
LIGHT
DARK
primary-SUBTLE
secondary-SUBTLE
success-SUBTLE
danger-SUBTLE
warning-SUBTLE
info-SUBTLE
light-SUBTLE
dark-SUBTLE
Navbars
Navigationsleisten sind Bereiche mit Links, die meist oben auf er Website dargestellt werden und der Navigation zwischen den Unterseiten oder versch. Bereichen einer Website dienen. Bootstrap-Navbars können in Abhängigkeit vom Viewpoint zwischen horizontaler, vertikaler und Hambuger- Darstellung wechseln.
Eine Navbar wird immer in den Container-Div gepackt. Diesem wird die Klasse .navbar zugeordnet.
Zusätzlich sollte eine responsive Klasse verwendet werden, z.B: .container-fluid