Ultimele tutoriale de dezvoltare web
 

Bootstrap CSS Forms Reference


Bootstrap's Setări implicite

Controalele de formular individuale primesc automat unele stil la nivel mondial cu Bootstrap .

Toate textual <input>, <textarea> și <select> elemente cu class="form-control" sunt setate la lățime: 100%; în mod implicit.

Normele standard pentru Bootstrap forme:

  • Adăugați role="form" la <form> elementul (ajută la îmbunătățirea accesibilității pentru persoanele care folosesc cititoare de ecran)
  • Wrap etichete și controale de formă într - un <div> Element cu class="form-group" de class="form-group" (needed for optimum spacing)
  • Adăugați class="form-control" de <input>, <textarea> <select> class="form-control" la toate textuale <input>, <textarea> și <select> elemente

Următorul exemplu creează un formular Bootstrap simplu, cu două câmpuri de intrare, o casetă de selectare, și un buton de trimitere:

Bootstrap Form Exemplu

<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>
Încearcă - l singur »

<form> Clase

Clasă Descriere Exemplu
.form-inline Face o <form> aliniate la stânga cu controale inline-bloc (Aceasta se aplică numai formulare din cadrul viewports care sunt cel puțin 768px larg) Incearca-l
.form-horizontal Aliniază etichete și grupuri de controale de formă într-un aspect orizontal Incearca-l