InstantSite wurde mit dem Bootstrap-Framework entwickelt. Dadurch kann Ihre Website auf verschiedene Bildschirmgrößen und Geräte reagieren. Es ist wichtig, die Unterschiede zwischen Zeilen und Spalten in InstantSite zu verstehen und wie diese verwendet werden, um sicherzustellen, dass Ihre Website in einer Desktop- und mobilen Umgebung korrekt aussieht.
Bootstrap-Grid-System.
Mit dem Rastersystem von Bootstrap können Sie bis zu 12 Spalten über jede Zeile auf der Seite hinzufügen. Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie eine Sammlung von Spalten zusammen verwenden. Unten sehen Sie ein Beispiel für die Gruppen von Spalten, die verwendet werden können:
| Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 | Spanne 1 |
| Bereich 4 | Spanne 4 | Spanne 4 | |||||||||
| Bereich 4 | Spanne 8 | ||||||||||
| Bereich 6 | Bereich 6 | ||||||||||
| Spanne 12 | |||||||||||
Beim Hinzufügen eines neuen Elements zu InstantSite werden automatisch ein Container, eine Zeile und eine Spalte erstellt.
- Der Container ist einfach die Kiste, die Ihre Reihe enthält.
- Die Zeile ist ein 12-Spalten-Bootstrap-Raster, wie oben beschrieben;
- Die Spalte enthält das Element, das Sie der Seite hinzugefügt haben.
Eine Spalte kann zwischen 1 und 12 Leerzeichen umfassen, die im 12-Spalten-Bootstrap-Gitter zulässig sind. Das Element kann dann innerhalb dieser Spalte so angepasst werden, dass es entweder die volle Breite oder einen Teil der 12 verfügbaren Spalten hat.
Warum Spalten und Zeilen wichtig sind
Beim Erstellen Ihrer Website möchten Sie, dass Ihr Inhaltslayout auf jedem Gerät professionell aussieht. Es macht wenig Sinn, Ihre Website auf einem Desktop fantastisch aussehen zu lassen, wenn sie auf Mobilgeräten kaum nutzbar ist.
Bootstrap ermöglicht es einem Website-Design, unabhängig vom Gerät, auf dem es angezeigt wird, reaktionsschnell zu werden. Dazu wird das oben beschriebene 12-Spalten-Bootstrap-Rastersystem verwendet. Weitere Informationen darüber, wie Bootstrap-Raster funktionieren, um Ihre Inhalte reaktionsfähig zu machen, finden Sie unter getbootstrap.com