Beginn mit Bootstrap
Bootstrap ist ein Framework, mit dem Sie Websites schneller und einfacher gestalten können. Es enthält HTML- und CSS-basierte Entwurfsvorlagen für Typografie, Formulare, Schaltflächen, Tabellen, Navigation usw.
Erstellen Sie im HTML-Code der letzten Übung mit dem Namen “index.html” einen neuen Header-Abschnitt und wir werden das Bootstrap-CSS eingeben:
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
</html>
Jetzt werden wir im <body> eine neue Klasse namens “container-fluid” erstellen. Es ist ein Bootstrap-Begriff zum Erstellen als Container. Darin werden wir auch auf einige Klassen verweisen, die Wörter erzeugen werden.
Ein Container legt die Breite des Layouts in Abhängigkeit von der Breite des Bildschirms fest. Der Inhalt wird in der Mitte der Seite platziert und horizontal ausgerichtet. Zwischen dem Bootstrap 4 Container und dem linken und rechten Rand der Seite ist der gleiche Abstand.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
This is the middle content.
</div>
<div class="col-md-1"></div>
</div>
</div>
</body>
Bootstrap panels
Ein Panel ist ein umrandetes Feld mit einer Polsterung um sein Element. Die Bedienfeldkomponenten werden verwendet, wenn Sie Ihre DOM-Komponente in einer Box ablegen möchten.
Hier ist ein Beispiel für das Basisfenster:
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>