Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap Forms

❮ Poprzedni Następny Rozdział ❯

Bootstrap's Ustawienia domyślne

Kontrole stanowią automatycznie otrzymywać jakąś globalną stylizacji z Bootstrap :

Wszystko tekstowe <input> , <textarea> i <select> Elementy z klasą .form-control mają szerokość 100%.

Bootstrap Formularz podzial

Bootstrap oferuje trzy rodzaje układów postać:

  • Pionowe (jest to ustawienie domyślne)
  • forma pozioma
  • Formularz inline

Standardowe zasady dla wszystkich trzech układów postać:

  • Zawsze używaj <form role="form"> (przyczynia się do poprawienia dostępności dla osób korzystających z czytników ekranu)
  • Owiń etykiety i kontrolki formularzy w <div class="form-group"> (potrzebne do optymalnego odstępu)
  • Dodaj klasy .form-control wszystkich tekstowych <input> , <textarea> i <select> elementy

Bootstrap Vertical Form (domyślnie)

Poniższy przykład tworzy pionową formę z dwóch wejściowych pól, jedno pole wyboru, a przycisk złożyć:

Przykład

<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 "

Bootstrap Inline Form

W postaci inline, wszystkie elementy są inline, wyrównany do lewej, a etykiety są obok.

Uwaga: Dotyczy to tylko formy w obrębie viewports , które są co najmniej 768px szerokości!

Dodatkowa zasada postaci inline:

  • Dodaj klasy .form-inline do <form> elementu

Poniższy przykład tworzy formę inline z dwóch wejściowych pól, jedno pole wyboru, a jeden przycisk złożyć:

Przykład

<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>
Spróbuj sam "

Wskazówka: Jeśli nie zawierają etykietę dla każdego wejścia, czytniki ekranu będzie miał kłopoty z formularzy. Można ukryć etykiety dla wszystkich urządzeń, z wyjątkiem czytników ekranu, za pomocą .sr-only klasy:

Przykład

<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>
Spróbuj sam "

Bootstrap Formularza pozioma

Forma poziome wyróżnia się od innych form zarówno w ilości znaczników, a także w przedstawieniu postaci.

Dodatkowe zasady formie poziomego:

  • Dodaj klasę .form-horizontal do <form> elementu
  • Dodaj klasy .control-label dla wszystkich <label> elementów

Wskazówka: Użyj Bootstrap's predefiniowanych klas siatki, aby wyrównać etykiety i grup pól formularza w układzie poziomym.

Poniższy przykład tworzy poziomą formę z dwóch wejściowych pól, jedno pole wyboru, a jeden przycisk złożyć:

Przykład

<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>
Spróbuj sam "

❮ Poprzedni Następny Rozdział ❯