Unterstützte Form Controls
Bootstrap unterstützt folgende Formular - Steuerelemente:
- input
- textarea
- checkbox
- radio
- select
Bootstrap - Eingang
Bootstrap unterstützt alle HTML5 Input - Typen: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel - color text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel und color .
Hinweis: Die Eingänge werden nicht voll gestylt werden , wenn deren Typ nicht richtig deklariert ist!
Das folgende Beispiel enthält zwei Eingabeelemente; eine vom Typ Text und eine vom Typ Passwort:
Beispiel
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input
type="password" class="form-control" id="pwd">
</div> Versuch es selber " Bootstrap Textarea
Das folgende Beispiel enthält einen textarea :
Beispiel
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div> Versuch es selber " Bootstrap Ankreuzfelder
Ankreuzfelder verwendet werden, wenn der Benutzer möchte eine beliebige Anzahl von Optionen aus einer Liste von voreingestellten Optionen zu wählen.
Das folgende Beispiel enthält drei Kontrollkästchen. Die letzte Option ist deaktiviert:
Beispiel
<div class="checkbox">
<label><input type="checkbox"
value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div
class="checkbox disabled">
<label><input type="checkbox" value=""
disabled>Option 3</label>
</div> Versuch es selber " Verwenden Sie die .checkbox-inline - Klasse , wenn Sie die Kontrollkästchen wollen auf der gleichen Zeile angezeigt werden soll :
Beispiel
<label class="checkbox-inline"><input type="checkbox"
value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label
class="checkbox-inline"><input type="checkbox" value="">Option 3</label> Versuch es selber " Bootstrap Radio - Bootstrap Radio Buttons
Radio - Tasten verwendet werden , wenn der Benutzer nur auf eine Auswahl aus einer Liste von voreingestellten Optionen einschränken möchten.
Das folgende Beispiel enthält drei Radio-Buttons. Die letzte Option ist deaktiviert:
Beispiel
<div class="radio">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<div class="radio">
<label><input
type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div> Versuch es selber " Verwenden Sie die .radio-inline - Klasse , wenn Sie die Radio - Buttons auf der gleichen Zeile angezeigt werden soll:
Beispiel
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Versuch es selber " Bootstrap Select List
- Sie ,
Auswahllisten werden verwendet, wenn der Benutzer zulassen möchten, aus mehreren Optionen zur Auswahl.
Das folgende Beispiel enthält eine Dropdown-Liste (Auswahlliste):
Beispiel
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div> Versuch es selber "