Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Формы

Bootstrap предоставляет несколько стилей управления формами, параметров layout и настраиваемых компонент для создания самых разных форм.

Содержание

Элементы управления формы

Bootstrap элементы управления форм расширяют наши Rebooted form styles классами. Используйте эти классы для более последовательного отображения в браузерах и устройствах. В приведенном ниже примере формы демонстрируются элементы общей формы HTML.

Помните, поскольку Bootstrap использует doctype HTML5, все формы ввода данных должны иметь атрибут type.

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </div>
  <fieldset class="form-group">
    <legend>Radio buttons</legend>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="form-check">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="form-check disabled">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>
  </fieldset>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ниже приведен полный список элементов управления форм, поддерживаемых Bootstrap, и классов, которые их настраивают. Для каждой группы доступна дополнительная документация.

Классы Используется для Поддерживаемые варианты

.form-group

Любая группа элементов управления формы

Используйте с любым элементом уровня блока, например <fieldset> или <div>

.form-control

Текстовый ввод данных

text, password, datetime-local, date, month, time, week, number, email, url, search, tel, color

Выбор меню

multiple, size

Текстовые поля N/A

.form-control-file

Файловые входы

file

.form-check

Флажки и переключатели N/A

Текстовый ввод данных

Ниже приведены примеры .form-control, применимые к каждому текстовому HTML5 <input> type.

<div class="form-group row">
  <label for="example-text-input" class="col-2 col-form-label">Text</label>
  <div class="col-10">
    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-search-input" class="col-2 col-form-label">Search</label>
  <div class="col-10">
    <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-email-input" class="col-2 col-form-label">Email</label>
  <div class="col-10">
    <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-url-input" class="col-2 col-form-label">URL</label>
  <div class="col-10">
    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
  <div class="col-10">
    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-password-input" class="col-2 col-form-label">Password</label>
  <div class="col-10">
    <input class="form-control" type="password" value="hunter2" id="example-password-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-number-input" class="col-2 col-form-label">Number</label>
  <div class="col-10">
    <input class="form-control" type="number" value="42" id="example-number-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
  <div class="col-10">
    <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-date-input" class="col-2 col-form-label">Date</label>
  <div class="col-10">
    <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-month-input" class="col-2 col-form-label">Month</label>
  <div class="col-10">
    <input class="form-control" type="month" value="2011-08" id="example-month-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-week-input" class="col-2 col-form-label">Week</label>
  <div class="col-10">
    <input class="form-control" type="week" value="2011-W33" id="example-week-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-time-input" class="col-2 col-form-label">Time</label>
  <div class="col-10">
    <input class="form-control" type="time" value="13:45:00" id="example-time-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-color-input" class="col-2 col-form-label">Color</label>
  <div class="col-10">
    <input class="form-control" type="color" value="#563d7c" id="example-color-input">
  </div>
</div>

layout формы

Поскольку Bootstrap применяет display: block и width: 100% почти для всех элементов управления формы, формы будут по умолчанию располагаться вертикально. Дополнительные классы могут использоваться для изменения этого лэйаута на индивидуальной основе.

Группы форм

Класс .form-group - самый простой способ добавить какую-либо структуру к формам. Его единственная цель - обеспечить margin-bottom вокруг label and control pairing. В качестве бонуса, поскольку это класс, вы можете использовать его с <fieldset>s, <div>s, или с почти любым другим элементом.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Встроенные формы

Используйте класс .form-inline чтобы отобразить серию меток, элементов управления формы и кнопок на одной горизонтальной строке. Элементы управления форм в пределах встроенных форм незначительно отличаются от их состояния по умолчанию.

  • Элементы управления: display: flex, сворачивающие любой пробел в HTML и предоставляющие вам возможности выравнивания с помощью spacing и flexbox утилит.
  • Элементы управления и группы ввода получают width: auto для переопределения ширины Bootstrap по умолчанию width: 100%.
  • Элементы управления отображаются только на экранах, ширина которых не менее 576 пикселей, чтобы учитывать узкие экраны на мобильных устройствах.

Вам может потребоваться вручную задать ширину и выравнивание отдельных элементов управления формой с помощью spacing utilities (как показано ниже). Наконец, обязательно всегда включайте <label> на каждом элементе управления формы, даже если вам нужно скрыть его от посетителей не со скринридеров с помощью .sr-only.

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroup">Username</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon">@</div>
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Также поддерживаются пользовательские контролы формы и выборки.

<form class="form-inline">
  <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Remember my preference</span>
  </label>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Альтернативы скрытым лейблам

У ассистивных технологий, таких как скрин ридеры могут быть проблемы с вашими формами, если вы не включите лейблы на каждое поле ввода. Для этих строчных форм, вы можете спрятать лейблы используя .sr-only класс. Существуют и другие альтернативные методы предоставления метки для ассистивных технологий, такие как атрибуты aria-label, aria-labelledby или title. Если ни один из них не присутствует, ассистивные технологии могут прибегать к использованию атрибута placeholder, если он имеется, но обратите внимание, что использование placeholder в качестве замены для других методоа не рекомендуется.

Использование Grid

Для более структурированных макетов форм, которые также являются адаптивными, вы можете использовать Бутстраповские предопределенные grid классы или mixins для создания горизонтальных форм. Добавьте класс .row для групп форм и используйте классы .col-*-* чтобы указать ширину ваших меток и контролов.

Обязательно добавьте .col-form-label в ваши <label>, чтобы они центрировались по вертикали вместе с соответствующими элементами управления формой. Для элементов <legend> вы можете использовать .col-form-legend, чтобы сделать их похожими на обычные <label> элементы.

Radios
<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three is disabled
          </label>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2">Checkbox</label>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Check me out
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>

Формы, основанные на Grid, также поддерживают большие и малые поля ввода.

<div class="container">
  <form>
    <div class="form-group row">
      <label for="lgFormGroupInput" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
  </form>
</div>

Флажки и переключатели

По умолчанию флажки и переключатели улучшаются с помощью .form-check, одного класса для обоих типов ввода, что улучшает макет и поведение их элементов HTML.. Флажки предназначены для выбора одной или нескольких опций в списке, в то время как переключатели выбирают один вариант из многих.

Отключенные флажки и переключатели поддерживаются, но для предоставления not-allowed курсора при наведении на родительский <label>, вам необходимо добавить класс .disabled к родительскому .form-check. Отключенный класс также сделает более светлым цвет текста, чтобы указать состояние ввода.

По умолчанию (stacked)

По умолчанию, любое количество флажков и переключателей будет располагаться вертикально и соответствующим образом размещаться с помощью .form-check.

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

В строку

Группируйте флажки или переключатели в одной горизонтальной строке, добавив .form-check-inline к любому .form-check.

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
  </label>
</div>

Без ярлыков

Если у вас нет текста внутри <label>, вход будет позиционирован как вы ожидаете. В настоящее время работает только с нестроковыми флажками и переключателями. Помните, что вы по-прежнему должны предоставлять некоторую форму ярлыка для вспомогательных технологий (например, с помощью aria-label).

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Статическое управление

Когда вам нужно поместить простой текст рядом с меткой формы в форме, используйте класс .form-control-static для элемента по вашему выбору.

email@example.com

<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group mx-sm-3">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Confirm identity</button>
</form>

Отключенные состояния

Добавьте логический атрибут disabled на вход, чтобы предотвратить ввод пользователя. Отключенные входы выглядят светлее и на них добавлен not-allowed курсор.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Добавьте атрибут disabled к <fieldset>, чтобы отключить все элементы управления внутри.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

По умолчанию, браузеры будут относиться ко всем элементам управления формы (<input>, <select> и <button> elements) внутри <fieldset disabled> как к отключенным, что предотвращает их взаимодействие с клавиатурой и мышью. Однако, если ваша форма также содержит элементы <a ... class="btn btn-*"> они будут иметь только стиль pointer-events: none. Как отмечено в разделе об отключенном состоянии кнопок (и, в частности, в подразделе для якорных элементов), это свойство CSS еще не стандартизовано и не полностью поддерживается в Opera 18 и ниже или в Internet Explorer 11 и не будет препятствовать пользователям клавиатуры получать возможность фокусировать или активировать эти ссылки. Поэтому, чтобы быть в безопасности, используйте пользовательский JavaScript, чтобы отключить такие ссылки.

Совместимость кроссбраузерности

Хотя Bootstrap применит эти стили во всех браузерах, Internet Explorer 11 и ниже не полностью поддерживают атрибут disabled в <fieldset>. Используйте пользовательский JavaScript, чтобы отключить набор полей в этих браузерах.

Входы только для чтения

Добавьте логический атрибут readonly на вход, чтобы предотвратить изменение значения входа. Входы только для чтения отображаются светлее (как и отключенные входы), но сохраняют стандартный курсор.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Контроль размеров

Установите высоту с помощью классов .form-control-lg и задайте ширину с помощью классов столбцовой разметки .col-lg-*.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Размер столбца

Оберните входы в столбцы сетки или любой настраиваемый родительский элемент, чтобы легко обеспечить требуемую ширину.

<div class="row">
  <div class="col-2">
    <input type="text" class="form-control" placeholder=".col-2">
  </div>
  <div class="col-3">
    <input type="text" class="form-control" placeholder=".col-3">
  </div>
  <div class="col-4">
    <input type="text" class="form-control" placeholder=".col-4">
  </div>
</div>

Текст справки

Текст справки блочного уровня в формах можно создать с помощью .form-text (ранее известного как .help-block в версии 3). Встроенный текст справки может быть гибко реализован с использованием любых встроенных элементов HTML и служебных утилит, таких как .text-muted.

Сопоставление текста справки с элементами управления формы

Текст справки должен быть явно связан с элементом управления формы, который относится к использованию атрибута aria-describedby attribute. Это обеспечит, чтобы ассистивные технологии, такие как скринридеры, объявили этот текст справки, когда пользователь фокусируется или входит в элемент управления.

Блочный уровень

Блочный текст справки - для ввода ниже или для более длинных строк текста справки - может быть легко достигнут с помощью .form-text. Этот класс включает display: block и добавляет некоторый верхний предел для нтервала от входов выше.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<p id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</p>

Inline

Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то <small>, <span>, или что-то еще).

Must be 8-20 characters long.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword4">Password</label>
    <input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Проверка

Бутстрап включает стили проверки для состояний опасности, предупреждения и успеха на большинстве элементов управления формой.

Как это работает

Вот краткое изложение их работы:

  • Чтобы использовать, добавьте к родительскому элементу .has-warning, .has-danger, или .has-success. Любой элемент .col-form-label, .form-control, или элемент настраиваемой формы получит стили проверки.
  • Текст контекстной проверки в дополнение к обычному текстовому полю справки можно добавить с помощью .form-control-feedback. Этот текст адаптируется к родительскому классу .has-*. По умолчанию он содержит только немного margin для интервала и модифицированного color для каждого состояния.
  • Значки проверки - это url(), настроенные с помощью переменных Sass, которые применяются к background-image объявлениям для каждого состояния.
  • Вы можете использовать свои собственные base64 PNG-файлы или SVG, обновляя переменные Sass и перекомпилируя.
  • Значки также можно полностью отключить, установив переменные в none или закомментировав исходный Sass.

Определение состояний

Вообще говоря, вы захотите использовать определенное состояние для конкретных типов обратной связи:

  • Danger отлично подходит для случаев, когда есть блокировка или обязательное поле. Пользователь должен заполнить это поле правильно, чтобы отправить форму.
  • Warning хорошо работает для текущих значений ввода, таких как сила пароля или мягкая проверка, прежде чем пользователь попытается отправить форму.
  • И наконец, success идеально подходит для ситуаций, когда вы проверяете все поля на всей форме и хотите поощрять пользователей через остальные поля.
Примеры

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

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Те же самые состояния могут также использоваться с горизонтальными формами.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
<div class="container">
  <form>
    <div class="form-group row has-success">
      <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name@example.com">
        <div class="form-control-feedback">Success! You've done it.</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
    <div class="form-group row has-warning">
      <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
        <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
    <div class="form-group row has-danger">
      <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name@example.com">
        <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
  </form>
</div>

Флажки и переключатели также поддерживаются.

<div class="form-check has-success">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
    Checkbox with success
  </label>
</div>
<div class="form-check has-warning">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
    Checkbox with warning
  </label>
</div>
<div class="form-check has-danger">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
    Checkbox with danger
  </label>
</div>

Пользовательские формы

Для еще большей кастомизации и совместимости с кросс-браузером используйте полностью настраиваемые элементы формы, чтобы заменить настройки браузера по умолчанию. Они построены на основе семантической и доступной разметки, поэтому они являются надежными заменами для любого элемента управления формы по умолчанию.

Флажки и переключатели

Каждый флажок и переключатель помещаются в <label> по трем причинам:

  • Он обеспечивает больший охват областей для проверки управления
  • Он предоставляет полезную семантическую оболочку, помогающую нам заменить стандартные <input>ы.
  • Он запускает состояние <input> автоматически, что означает, что JavaScript не требуется.

Мы скрываем значение по умолчанию <input> с opacity и используем .custom-control-indicator tдля создания нового пользовательского индикатора формы вместо него. К сожалению, мы не можем создать пользовательский только с <input> потому что content CSS не работает для этого элемента.

Мы используем селектор (~) для всех наших состояний <input>, например: :checked, чтобы правильно настроить наш индикатор пользовательской формы. В сочетании с классом .custom-control-descriptionмы можем также стилизовать текст для каждого элемента на основе состояния <input>.

В отмеченных состояниях мы используем base64 встроенные иконки в формате SVG из Open Iconic. Это дает нам лучший контроль над стилизацией и позиционированием в браузерах и на устройствах.

Флажки

<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

Пользовательские флажки могут также использовать :indeterminate псевдокласс при ручной настройке через JavaScript (не существует атрибута HTML для его указания).

Если вы используете jQuery, чего-то вроде этого должно быть достаточно:

$('.your-checkbox').prop('indeterminate', true)

Переключатели

<label class="custom-control custom-radio">
  <input id="radio1" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
  <input id="radio2" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Or toggle this other custom radio</span>
</label>

Отключенные

Пользовательские флажки и переключатели также могут быть отключенными. Добавьте логический атрибут disabled в <input> и будут автоматически создаваться пользовательский индикатор и описание метки.

<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" disabled>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

<label class="custom-control custom-radio">
  <input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Toggle this custom radio</span>
</label>

Состояния валидации

Добавьте другие состояния в пользовательские формы с нашими классами проверки.

<div class="form-group has-success">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
  </label>
</div>
<div class="form-group has-warning">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
  </label>
</div>
<div class="form-group has-danger mb-0">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
  </label>
</div>

Stacked

Пользовательские флажки и переключатели на старте находятся в очереди. Добавьте родителя с классом .custom-controls-stacked чтобы каждый элемент управления формы находился в отдельной строке.

<div class="custom-controls-stacked">
  <label class="custom-control custom-radio">
    <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Or toggle this other custom radio</span>
  </label>
</div>

Выбор меню

Пользовательские <select> меню требуют только пользовательский класс, .custom-select для запуска пользовательских стилей.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Браузер файлов

Ввод файла является наиболее сложным из этой группы и требует дополнительного JavaScript, если вы хотите связать его с функционалом Choose file… и выделенным именем файла.

<label class="custom-file">
  <input type="file" id="file" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>

Вот как это работает:

  • Мы оборачиваем <input> в <label>, чтобы пользовательский элемент управления правильно запускал обозреватель файлов.
  • Мы скрываем файл по умолчанию <input> через opacity.
  • Мы используем :after для создания пользовательского фона и директивы (Choose file…).
  • Мы используем :before для создания и размещения кнопки Browse.
  • Мы объявляем height в <input> для правильного размещения окружающего контента.

Другими словами, это полностью настраиваемый элемент, созданный с помощью CSS.

Перевод или настройка строк

Псевдокласс :lang() pseudo-class используется для легкого перевода текста “Browse” и “Choose file…” на другие языки. Просто переопределите или добавьте записи в SCSS переменную $custom-file-text с соответствующим language tag и локализованными строками. Английские строки могут быть настроены таким же образом. Например, вот как можно добавить испанский перевод (код на испанском языке - es):

$custom-file-text: (
  placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."
  ),
  button-label: (
    en: "Browse",
    es: "Navegar"
  )
);

Вам нужно будет правильно указать язык вашего документа (или его поддерево), чтобы текст отображался корректно. Это можно сделать, используя the lang attribute или Content-Language HTTP header, среди других методов.

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x