Ultimele tutoriale de dezvoltare web
 

Bootstrap Forms

❮ Anterior Urmatorul capitol ❯

Bootstrap's Setări implicite

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

Toate textual <input> , <textarea> și <select> elemente cu clasa de .form-control au o lățime de 100%.

Bootstrap Form Aspecte

Bootstrap oferă trei tipuri de structuri de formă:

  • Formularul verticală (this is default)
  • formularul orizontală
  • formularul inline

Normele standard pentru toate cele trei aspecte de formă:

  • Utilizați întotdeauna <form role="form"> (helps improve accessibility for people using screen readers) la (helps improve accessibility for people using screen readers) care (helps improve accessibility for people using screen readers) de (helps improve accessibility for people using screen readers)
  • Wrap etichete și controale de formă în <div class="form-group"> (needed for optimum spacing)
  • Adăugați clasa .form-control al tuturor textuale <input> , <textarea> și <select> elemente

Bootstrap Forma verticală (default)

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

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 »

Bootstrap inline Forma

Într-o formă de linie, toate elementele sunt în linie, aliniat la stânga, iar etichetele sunt alături.

Notă: Acest lucru se aplică numai înfățișări în viewports , care sunt cel puțin 768px lățime!

Regulă suplimentară pentru o formă inline:

  • Adăugați clasa .form-inline la <form> elementul

Următorul exemplu creează o formă inline, cu două câmpuri de introducere, o casetă de selectare, și un buton de trimitere:

Exemplu

<form class="form-inline" 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 »

Sfat: Dacă nu includeți o etichetă pentru fiecare intrare, cititoare de ecran vor avea probleme cu formularele. Puteți ascunde etichetele pentru toate dispozitivele, cu excepția cititoare de ecran, folosind .sr-only clasă:

Exemplu

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" 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 »

Bootstrap Formă orizontală

O formă orizontală se deosebește de alte forme, atât în ​​valoare de marcare și în prezentarea formularului.

Reguli suplimentare pentru o formă orizontală:

  • Adăugați clasa .form-horizontal la <form> elementul
  • Adăugați clasa .control-label tuturor <label> elemente

Sfat: Utilizați Bootstrap's clase predefinite de rețea pentru a alinia etichete și grupuri de controale de formă într - un aspect orizontal.

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

Exemplu

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Încearcă - l singur »

❮ Anterior Urmatorul capitol ❯