Bootstrap kurz & gut (eBook)
226 Seiten
O'Reilly Verlag
978-3-96010-232-8 (ISBN)
Jörg Krause arbeitet als Trainer, Berater und Softwareentwickler für Unternehmen weltweit. Seit über 25 Jahren arbeitet er mit verschiedensten Webumgebungen und -technologien und realisiert große und kleine Projekte. Er legt Wert auf solides Webwissen und ist der Ansicht, dass Entwickler besser beraten sind, für robuste technische Grundlagen zu sorgen, anstatt immer auf das neueste Framework zu setzen. Er hat über 40 Titel bei renommierten Fachverlagen in Deutsch und Englisch veröffentlicht.
Jörg Krause arbeitet als Trainer, Berater und Softwareentwickler für Unternehmen weltweit. Seit über 25 Jahren arbeitet er mit verschiedensten Webumgebungen und -technologien und realisiert große und kleine Projekte. Er legt Wert auf solides Webwissen und ist der Ansicht, dass Entwickler besser beraten sind, für robuste technische Grundlagen zu sorgen, anstatt immer auf das neueste Framework zu setzen. Er hat über 40 Titel bei renommierten Fachverlagen in Deutsch und Englisch veröffentlicht.
KAPITEL 2
Struktur der Seite
Bootstrap realisiert ein horizontales Raster auf der Seite, in dem Elemente platziert werden. Das Raster läuft von links nach rechts.
Einführung
Die Basis für das Raster ist eine feste, gleichmäßige Unterteilung der Seite. Das Raster passt sich an die Größe des Ansichtsbereichs, des sogenannten Viewports, an.
Der HTML5-Doctype
Der erste Schritt zur Nutzung von Bootstrap besteht darin, die Webseite auf HTML5 einzustellen. Dies erfolgt mit dem richtigen Doctype (Zeile 1, danach angedeutet die folgende HTML-Seite):
<!DOCTYPE html>
<html lang="en">
...
</html>
Einstellungen des Ansichtsbereichs
Damit mobile Geräte von vornherein unterstützt werden, wird nun der Viewport festgelegt. Das erste Tag im <head>-Bereich ist deshalb das folgende Metatag:
<meta name="viewport"
content="width=device-width, initial-scale=1" />
Bestimmt wird hier das Zoomverhalten und die im Tag zuvor genutzte Skalierung. Das Zoomverhalten kann mit user-scalable=no abgeschaltet werden. Die Applikation fühlt sich dann ein wenig so an wie eine native App auf einem mobilen Gerät.
| Zoom abschalten Es ist riskant, die Zoomfunktion abzuschalten. Benutzer mit eingeschränkten Sehfähigkeiten oder Nutzer besonders kleiner Bildschirme können darauf angewiesen sein. Wenn sich eine mobile Webseite wie eine native App verhalten soll, muss sie auch von Grund auf wie eine App programmiert werden. So schalten Sie die Skalierung explizit ab: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
Das Rastersystem
Schon in den Anfangsjahren des Webs wurde versucht, einer Seite durch eine Art virtuelles Raster (Grid) eine Struktur zu geben. Dazu kamen anfangs meist Tabellen zum Einsatz. Tabellen sind jedoch in ihrer horizontalen Ausdehnung nicht vollkommen flexibel – der Inhalt bestimmt die Breite. Eine Skalierung auf einen kleineren Bildschirm ist damit nicht möglich. Das widerspricht dem Anspruch an eine responsive – sich den Gegebenheiten anpassende – Website.
Aus der Idee der Tabelle entstand die Vorgehensweise, statt der Zellen einfach <div>-Tags mithilfe von CSS gitterförmig anzulegen. Wer das einmal selbst probiert hat, wird schnell gemerkt haben, dass der Ansatz alles andere als trivial ist. CSS-Frameworks liefern hier für die Darstellung von Tabellen eine solide Grundlage. Tatsächlich ist das Raster eher eine Anordnung von streifenartigen Elementen.
Container
Bootstrap nutzt ein Containerelement, um die Seite einzuleiten und eine Basis für das Raster zu definieren. Container können mehrfach auf der Seite benutzt, sollten aber nicht verschachtelt werden.
<div class="container">
...
</div>
Container dieser Art liefern ein festes, zentriertes, responsives Raster. Das heißt, die Breite passt sich in Schritten dem Gerät an und bleibt dann innerhalb eines Bereichs stabil. Die Sprungbereiche werden auch als »Breakpoints« bezeichnet – Umbruchpunkte. Sollten Sie diesen Begriff aus der Softwareentwicklung kennen – damit haben die Breakpoints in Bootstrap nichts zu tun.
Alternativ kann die Klasse .container-fluid benutzt werden, die immer die volle Breite des Geräts nutzt:
<div class="container-fluid">
...
</div>
Das Raster im Detail
Das Raster entsteht aus zwölf gleich breiten Spalten. Vordefinierte Klassen können verwendet werden, um Elemente ab einer bestimmten Spalte und über eine Anzahl von Spalten hinweg zu platzieren.
Innerhalb der Spalten lassen sich Zeilen festlegen, um eine wechselnde Nutzung der Spaltenbreiten zu erlauben. Die Vorgehensweise sollte sich an einigen wenigen Regeln orientieren:
- Zeilen (.row) müssen sich in einem Container befinden: .con tainer (feste Breite) oder .container-fluid (volle Breite).
- Zeilen werden benutzt, um mehrere Elemente horizontal nebeneinander zu platzieren.
- Spalten(.col-xx-n) werden in Zeilen platziert. Nur Spaltenelemente sind unmittelbare Kindelemente von Zeilen.
- Abstände (Lücken) zwischen den Spalten werden mit padding-Regeln definiert. Diese Abstände werden links von der ersten Spalte und rechts der letzten Spalte mit negativen Abständen (margin) ausgeglichen. Dadurch ist Inhalt außerhalb des Rasters linksbündig gleich ausgerichtet.
- Erstrecken sich Elemente über mehrere Spalten, die innerhalb einer Reihe platziert werden, und überschreiten die Elemente die Grenze von zwölf Spalten, wird die gesamte Gruppe umbrochen.
Der Aufbau der Spaltenklassen ist einfach:
- Die Einleitung beginnt mit .col-.
- Der mittlere Teil bestimmt die Zuständigkeit für Bildschirmbreiten (sm, md, lg, xl) – die Breakpoints.
- Die Zahl am Ende bestimmt die Anzahl der Spalten (1 bis 12).
Wenn Sie die Klasse .col-sm-4 nutzen, können Sie also drei derart dekorierte Elemente nebeneinander anordnen (3 × 4 = 12). Die Breitendefinition gilt, bis sie überschrieben wird. Wenn Sie .col-md-2 nutzen, .col-lg-2 aber nicht, gilt md auch für sehr große Geräte.
Gerätespezifische Definitionen
Kleine Geräte mit weniger als 576 Pixeln werden nicht separat definiert, denn diese Geräteklasse ist bereits der Standardwert. Die Angaben in den Variablen sind folgendermaßen definiert:
- sm: ≥ 576 px
- md: ≥ 768 px
- lg: ≥ 992 px
- xl: ≥ 1.200 px
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-lg-min) { ... }
Aus den Breiten ergeben sich die Dimensionen der zwölf Spalten.
Die Breite des Abstands zwischen den Spalten beträgt 30 Pixel (15 auf jeder Seite). Das Grid darf verschachtelt werden.
Tabelle 2-1: Position der Breakpoints
Im folgenden Beispiel werden nur md-Klassen benutzt. Diese werden erst ab der Breite von 920 Pixeln gültig. Die div-Elemente werden deshalb auf kleinen Geräten untereinander angeordnet – erst auf Desktops mit ausreichender Breite erscheinen die Elemente nebeneinander.
Beispiel 2-1: Musterraster (Grid.html)
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="row">
<div class="col-md-4">1-4</div>
<div class="col-md-4">5-8</div>
<div...
| Erscheint lt. Verlag | 23.8.2018 |
|---|---|
| Reihe/Serie | kurz & gut |
| O'Reilly`s kurz & gut | O'Reilly`s kurz & gut |
| Verlagsort | Heidelberg |
| Sprache | deutsch |
| Themenwelt | Informatik ► Web / Internet ► Web Design / Usability |
| Schlagworte | CSS • flexbox • Flexbox-System • Flex-Raster • Formulare • GRID • Grids • Grid-System • HTML5 • jQuery • Layout • Navigation • Responsive Webdesign • Tabellen • Typografie |
| ISBN-10 | 3-96010-232-1 / 3960102321 |
| ISBN-13 | 978-3-96010-232-8 / 9783960102328 |
| Haben Sie eine Frage zum Produkt? |
EPUB (Wasserzeichen)Größe: 5,1 MB
DRM: Digitales Wasserzeichen
Dieses eBook enthält ein digitales Wasserzeichen und ist damit für Sie personalisiert. Bei einer missbräuchlichen Weitergabe des eBooks an Dritte ist eine Rückverfolgung an die Quelle möglich.
Dateiformat: EPUB (Electronic Publication)
EPUB ist ein offener Standard für eBooks und eignet sich besonders zur Darstellung von Belletristik und Sachbüchern. Der Fließtext wird dynamisch an die Display- und Schriftgröße angepasst. Auch für mobile Lesegeräte ist EPUB daher gut geeignet.
Systemvoraussetzungen:
PC/Mac: Mit einem PC oder Mac können Sie dieses eBook lesen. Sie benötigen dafür die kostenlose Software Adobe Digital Editions.
eReader: Dieses eBook kann mit (fast) allen eBook-Readern gelesen werden. Mit dem amazon-Kindle ist es aber nicht kompatibel.
Smartphone/Tablet: Egal ob Apple oder Android, dieses eBook können Sie lesen. Sie benötigen dafür eine kostenlose App.
Geräteliste und zusätzliche Hinweise
Buying eBooks from abroad
For tax law reasons we can sell eBooks just within Germany and Switzerland. Regrettably we cannot fulfill eBook-orders from other countries.
aus dem Bereich
