Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Bootstrap обеспечивает контроль форма несколько стилей, разметка параметры и пользовательские компоненты для создания самых разнообразных форм.
Bootstrap Форма контроля разверните на наши перезагружается форма стили С классами. Использовать эти классы, чтобы выбрать их индивидуальные дисплеи последовательном отображении в разных браузерах и на разных устройствах. Приведенный ниже пример демонстрирует, форма общих элементов HTML-форм, которые получают обновленные стили из Bootstrap с дополнительных занятий.
Помните, поскольку Bootstrap использует технологии HTML5 doctype, то все входы должны иметь type
атрибут.
<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—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 и классы, настроить их. Дополнительная документация доступна для каждой группы.
Классы | Используется для | Поддерживаемые вариации |
---|---|---|
|
Любая группа форма контроля |
Использования с любым элементом уровня блока, как |
|
Текстовые материалы |
|
Select menus |
|
|
Textareas | Н/Д | |
|
Файл входов |
|
|
Чекбоксы и радио | Н/Д |
Вот несколько примеров .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%
.Из-за этого, возможно, потребуется вручную адреса ширины и выравнивания отдельных элементов управления формы. Наконец, как показано ниже, Вы должны всегда включать <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>
<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>
элементы.
<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—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—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—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>
.
<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>
<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
курсор.
Добавить 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>
<a>
По умолчанию браузеры будут лечить все родные элементы управления (<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
логический атрибут на входе для предотвращения изменения значений входных параметров. Читать только появляются входы легче (так же, как входы отключены), но сохранить стандартный курсор.
<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>
, или что-то другое).
<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
деклараций за каждый состояние.none
или закомментировав источника Sass.Вообще говоря, вы хотите использовать определенный состояние для определенных типов обратной связи:
Вот несколько примеров из вышеупомянутых классов в действии.
<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 что-то вроде этого должно быть достаточно:
<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>
чтобы пользовательский элемент управления правильно вызывает файловый браузер.<input>
по opacity
.:after
для создания пользовательских фон и директивы (Choose file…).:before
для создания и позиционирования Browse кнопки.height
на <input>
для правильного интервал для окружающих содержание.Другими словами, это полностью настраиваемых элементов, все генерируется через CSS.
В :lang()
псевдо-класса используется для облегчения перевода “обзор” и “выбрать файл...” текст на другие языки. Просто переопределить или добавить записи в $custom-file-text
SCSS переменных с соответствующими тег языка, а локализованные строки. Английские строки могут быть настроены таким же образом. Например, вот как можно добавить испанский язык (испанский язык код является es
):
Вам потребуется установить язык вашего документа (или его поддерево) правильно для того, чтобы правильный текст для отображения. Это может быть сделано с помощью в lang
атрибут или Content-Language
Заголовок протокол http среди других методов.