Bootstrap4 Grundlehrbuch

Bootstrap4 Formularsteuerelemente Bootstrap4 Brotkrümelnavigation

Bootstrap4 Formular

HTML-Formulare sind ein unverzichtbarer Bestandteil von Webseiten und Anwendungen, aber das manuelle Erstellen von Formularlayout oder das Setzen von Stilen für Formularelemente mit CSS ist oft langweilig. Bootstrap vereinfacht durch eine vorgegebene Gruppe von Klassen das Styling und die Ausrichtung von Formularelementen (wie Beschriftungen, Eingabefelder, Auswahlfelder, Textbereiche, Buttons usw.) erheblich.

In diesem Kapitel lernen wir, wie man mit Bootstrap Formulare erstellt. Bootstrap ermöglicht es durch einfache HTML-Tags und erweiterte Klassen, Formulare mit verschiedenen Stilen zu erstellen.

Formularelemente <input>, <textarea>, und <select>-Elemente Beim Verwenden von .form-control-Klasse sind die Breiten alle auf 100%。

Bootstrap4 Formularlayout

Gestapelter Formular (volle Bildschirmbreite): Vertikal
Inline-Formular: Horizontal

Bootstrap bietet zwei Arten von Formularlayouten:

Gestapelter Formular

Nachfolgender Beispiel verwendet zwei Eingabefelder, ein Kontrollkästchen und einen Absendeknopf, um ein gestapeltes Formular zu erstellen:

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap-Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Gestapelter Formular</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label　for="email">E-Mail:</label>/label>
　　　　　　<input　type="email"　class="form-control" id="email" placeholder="Geben Sie email ein">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label　for="pwd">Passwort:</label>/label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Geben Sie das Passwort ein">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Erinnere dich an mich
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　</form>
</div>
</body>
</html>

Testen Sie heraus, ob es geht ‹/›

Nach dem Lauf die Ergebnisse sind wie folgt:

Inline-Formular

Alle Elemente in den Inline-Formularen sind linksbündig ausgerichtet.

Hinweis: Bei einer Bildschirmbreite kleiner als 576px sind die Formularelemente vertikal gestapelt. Wenn die Bildschirmbreite größer gleich576px angegeben haben, damit die Formularelemente auf gleicher Horizontalebene angezeigt werden.

Ein Inline-Formular muss die Klasse .form-inline-Klasse.

Nachfolgender Beispiel verwendet zwei Eingabefelder, ein Kontrollkästchen und einen Absendeknopf, um ein Inline-Formular zu erstellen:

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap-Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Inline-Formular</h2>
　　<p>Die Bildschirmbreite ist größer gleich　576px　zeigt das Formular horizontal an. Wenn es kleiner als　576px　dann wird ein gestapelter Formular generiert.</p>
　　<form　class="form-inline">
　　　　<label　for="email">E-Mail:</label>/label>
　　　　<input　type="email"　class="form-control" id="email" placeholder="Geben Sie email ein">
　　　　<label for="pwd">Geben Sie das Passwort ein:</label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="Geben Sie das Passwort ein">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Erinnere dich an mich
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　</form>
</div>
</body>
</html>

Testen Sie heraus, ob es geht ‹/›

Nach dem Lauf die Ergebnisse sind wie folgt:

Bootstrap4 Formularsteuerelemente Bootstrap4 Brotkrümelnavigation