Skip to main content

Компоненты

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

Формы

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

Содержание

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

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

Помните, поскольку Bootstrap использует технологии HTML5 doctype, то все входы должны иметь 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

Select menus

multiple, size

Textareas Н/Д

.form-control-file

Файл входов

file

.form-check
.form-check-inline

Чекбоксы и радио Н/Д

Текстовые материалы

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

<div class="form-group row">
  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
  <div class="col-xs-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-xs-2 col-form-label">Search</label>
  <div class="col-xs-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-xs-2 col-form-label">Email</label>
  <div class="col-xs-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-xs-2 col-form-label">URL</label>
  <div class="col-xs-10">
    <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
  <div class="col-xs-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-xs-2 col-form-label">Password</label>
  <div class="col-xs-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-xs-2 col-form-label">Number</label>
  <div class="col-xs-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-xs-2 col-form-label">Date and time</label>
  <div class="col-xs-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-xs-2 col-form-label">Date</label>
  <div class="col-xs-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-xs-2 col-form-label">Month</label>
  <div class="col-xs-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-xs-2 col-form-label">Week</label>
  <div class="col-xs-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-xs-2 col-form-label">Time</label>
  <div class="col-xs-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-xs-2 col-form-label">Color</label>
  <div class="col-xs-10">
    <input class="form-control" type="color" value="#563d7c" id="example-color-input">
  </div>
</div>

Форма разметки

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

Форма групп

В .form-group класс-это простой способ добавить некоторую структуру формы. Его единственная цель-обеспечить margin-bottom по надпись и управления воспроизведением. В качестве бонуса, так как это класс вы можете использовать его с <fieldset>с <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: inline-block для контроля соосности с помощью vertical-align и margin.
  • Контроль получения width: auto переопределение Bootstrap по умолчанию width: 100%.
  • Управления только отображаются в видовых экранах не менее 768px по ширине для учетной записи для узких видовых экранов на мобильных устройствах.

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

Видны метки

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

Скрытые метки

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Альтернативы скрытых ярлыков

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

С помощью Грид

Для более структурированной форме разметки также aдаптивный, Вы можете использовать Bootstrap предопределенный грид классов или миксины для создания горизонтальных форм. Добавить .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>

Грид Форма разметки также поддержку больших и малых входов.

<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. Класс также будет осветлить цвет текста для определения входа состояние.

По умолчанию (наборный)

По умолчанию, любое количество флажков и радио, которые являются непосредственными брат будет вертикально и равномерно распределена с .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>

Рядный

Группы чекбоксов или радио, которые находятся на одной горизонтальной строки похожи на своих сложенных собратьев, но требуют различных HTML и в один класс. Чтобы перейти с накоплением встроенный, падение окружающие <div> добавьте .form-check-inline на <label>, и сохранить .form-check-input на <input>.

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

Без этикетки

Если у вас есть текст внутри <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 класс по <p>.

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

Кросс-браузерная совместимость

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

Параметр readonly входы

Добавить 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-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

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

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

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

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

Уровень блока

Блок текста справки на ниже входов или больше строк текста может быть легко достигнуто с .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>

Рядный

Встроенный текст можно использовать любые типовые встроенный 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" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Проверка

Bootstrap включает в себя стили проверки на опасность, предупреждение и успеха состояния относительно контроля форма. Здесь мы расскажем, как они работают:

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

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

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

Вот несколько примеров из вышеупомянутых классов в действии.

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="col-form-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="col-form-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="col-form-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>
<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> автоматически, т. е. не %необходимо на 1%.

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

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

В проверяемый состояния, который мы используем в base64 встроенной графикой SVG иконки С Открытый 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 m-b-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>

Сводный индикатор

Пользовательские чекбоксы и радио-встроенные начать. Добавить родителя с класса .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>

Таможня выбирает красиво деградировать в IE9, получив только несколько исключений, чтобы удалить пользовательские background-image. В настоящее время множественный выбор (например, <select multiple>) не поддерживаются.

Файловый браузер

Входной файл-это самый несговорчивый из толпы и требуют дополнительных 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> чтобы пользовательский элемент управления правильно вызывает файловый браузер.
  • Мы прячем файл default <input> по opacity.
  • Мы используем :after для создания пользовательских фон и директивы (Choose file…).
  • Мы используем :before для создания и позиционирования Browse кнопки.
  • Мы объявляем height на <input> для правильного интервал для окружающих содержание.

Другими словами, это полностью настраиваемых элементов, все генерируется через CSS.

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

В :lang() псевдо-класса используется для облегчения перевода “обзор” и “выбрать файл...” текст на другие языки. Просто переопределить или добавить записи в $custom-file-text SCSS переменных с соответствующими тег языка, а локализованные строки. Английские строки могут быть настроены таким же образом. Например, вот как можно добавить испанский язык (испанский язык код является es):

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

Вам потребуется установить язык вашего документа (или его поддерево) правильно для того, чтобы правильный текст для отображения. Это может быть сделано с помощью в lang атрибут или Content-Language Заголовок протокол http среди других методов.