Bootstrap's Ustawienia domyślne
Poszczególne elementy sterujące formularza automatycznie otrzymywać jakąś globalną stylizacji z Bootstrap .
Wszystko tekstowe <input>, <textarea> i <select> elementy z class="form-control" są ustawione na szerokość: 100%; domyślnie.
Standardowe zasady Bootstrap formach:
- Dodaj role="form" do <form> element (przyczynia się do poprawy dostępności dla osób korzystających z czytników ekranu)
- Owiń etykiety i kontrolki formularzy w <div> elementu z class="form-group" (potrzebne do optymalnego odstępu)
- Dodaj class="form-control" do wszystkich tekstowych <input>, <textarea> i <select> elementy
Poniższy przykład tworzy prosty formularz Bootstrap z dwóch wejściowych pól, jedno pole wyboru, a przycisk złożyć:
Formularz Przykład Bootstrap
<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> Spróbuj sam " <form> Klasy
| Klasa | Opis | Przykład |
|---|---|---|
| .form-inline | Tworzy <form> wyrównany do lewej z grupą kontrolną inline-block (Dotyczy to tylko formy w obrębie viewports , które są co najmniej 768px szerokości) | Spróbuj |
| .form-horizontal | Wyrównuje etykiet i grup pól formularza w układzie poziomym | Spróbuj |