Bootstrap's Standardeinstellungen
Einzelne Formular - Steuerelemente automatisch einige globale Styling mit erhalten Bootstrap .
Alle Text- <input>, <textarea> und <select> Elemente mit class="form-control" werden auf Breite: 100%; standardmäßig aktiviert.
Standardregeln für die Bootstrap - Formen:
- In role="form" auf das <form> Element (trägt zur Verbesserung der Zugänglichkeit für Menschen mit Screen - Reader)
- Wrap - Etiketten und Formular - Steuerelemente in einem <div> Element mit class="form-group" (benötigt für eine optimale Abstand)
- In class="form-control" an alle Text <input>, <textarea> und <select> Elemente
Das folgende Beispiel erzeugt eine einfache Bootstrap Form mit zwei Eingabefelder, ein Kontrollkästchen, und ein Submit-Button:
Bootstrap-Formular Beispiel
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Versuch es selber " <form> Klassen
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .form-inline | Macht ein <form> linksbündig mit Inline-Block - Kontrollen (Dies gilt nur für Formulare innerhalb viewports , die mindestens 768px breit sind) | Versuch es |
| .form-horizontal | Ordnet Etiketten und Gruppen von Formular-Steuerelemente in einem horizontalen Layout | Versuch es |