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 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 Kontur 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>
Hier finden Sie ein Beispiel für ein einfaches Panel:
Benutzerdefiniertes CSS
Durch Erstellen einer Stildatei können Sie Ihre Definitionen des Stilfelds vom Bootstrap trennen.
Erstellen Sie eine neue Datei mit dem Namen “style.css” und dort können Sie Ihren eigenen CSS-Code erstellen:
.BoxValue {
font-size: 200%;
font-weight: bold;
text-align_ center;
}
Gehen Sie zurück zu Ihrer “index.html” Datei und finden Sie heraus, wo diese Klasse auf diesen Text angewendet werden soll:
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<span class="BoxValue"> {{data("name")}} </span>
</div>
</div>
</div>
Da wir eine benutzerdefinierte Stildatei erstellt haben, weiß unsere HTML-Seite nicht, wie sie zu finden ist. Deshalb gehen wir zum Anfang unserer HTML-Seite und erstellen im Header-Bereich des HTML einen Link:
<html> <head> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> </html>
Hier ist das Ergebnis unserer Seite mit CSS:
