Последние учебники веб-разработки
 

Bootstrap Forms

❮ Предыдущая Следующая Глава ❯

Bootstrap's умолчанию Настройки

Элементы управления форм автоматически получать некоторый глобальный стиль с Bootstrap :

Вся текстовая <input> , <textarea> , и <select> элементы с классом .form-control имеют ширину 100%.

Bootstrap Форма Макеты

Bootstrap предоставляет три вида макетов форм:

  • Вертикальная форма (это по умолчанию)
  • Горизонтальная форма
  • Встроенная форма

Стандартные правила для всех трех макетов форм:

  • Всегда используйте <form role="form"> (помогает улучшить доступность для людей , использующих программы чтения с экрана)
  • Оберните этикетки и элементы формы в <div class="form-group"> (необходимо для оптимального интервала)
  • Добавьте класс .form-control для всех текстуальных <input> , <textarea> и <select> элементы

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>
Попробуй сам "

Bootstrap Инлайн форма

В инлайн форме, все элементы являются инлайн, выравнивается по левому краю, а метки находятся рядом.

Примечание: Это относится только к формам в пределах viewports , которые , по крайней мере 768px в ширину!

Дополнительное правило для инлайн формы:

  • Добавьте класс .form-inline в <form> элемента

Следующий пример создает инлайн форму с двумя полями ввода, один флажок, и одна кнопка отправки:

пример

<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>
Попробуй сам "

Совет: Если вы не включают в себя метку для каждого входа, чтения с экрана будут иметь проблемы с вашими формами. Вы можете скрыть метки для всех устройств, кроме чтения с экрана, с помощью .sr-only класс:

пример

<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>
Попробуй сам "

Bootstrap Горизонтальная форма

Горизонтальная форма стоит особняком от других форм как в сумме разметки, а также в представлении формы.

Дополнительные правила для горизонтальной формы:

  • Добавить класс .form-horizontal к <form> элемента
  • Добавить класс .control-label для всех <label> элементы

Совет: Используйте Bootstrap's предопределенные классы сетки для выравнивания меток и групп элементов формы в горизонтальной компоновки.

Следующий пример создает горизонтальную форму с двумя полями ввода, один флажок, и одна кнопка отправки:

пример

<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>
Попробуй сам "

❮ Предыдущая Следующая Глава ❯