Bootstrap — Входные группы
В этой главе рассказывается о еще одной функции Bootstrap, как входные группы. Входные группы это продолжение Форм. Используя входные группы, вы можете легко предварять и добавить текст или кнопки для текстовых входов.
Добавляя содержимое в поле ввода, вы можете добавить общие элементы пользовательского ввода. Например, вы можете добавить символ доллара, @ для имени пользователя Twitter, или что-нибудь другое, что может быть общим для интерфейса приложения.
Для того, чтобы добавить элементы в .form-control:
- Заверните его <div> в класс .input-group
- В качестве следующего шага, в том же <div>, разместите дополнительный контент внутри <span> с классом .input-group-addon.
- Теперь поместите этот <span> либо до, либо после элемента <input>.
Для перекрестной совместимости браузера, избегайте использования здесь элементов <select>, поскольку они не могут быть полностью оформлены в WebKit браузерах. Также не применяются классы входных групп непосредственно для формирования группы. Группа входов является изолированным компонентом.
Основные группы входов
Следующий пример демонстрирует основную входную группу:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>
Размер входной группы
Вы можете изменить размер входных групп, путем добавления относительных классов формы, как .input-group-lg, input-group-sm, input-group-xs к .input-group. Содержимое внутри будет автоматически изменять размер.
Продемонстрируем пример:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>
Дополнительные флажки и радио
Вы можете заранее добавить радио кнопки и флажки вместо текста, как показано в следующем примере:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group:->
</div><!-- /.col-lg-6:-><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group:->
</div><!-- /.col-lg-6:->
</div><!-- /.row:->
</form>
</div>
Дополнительная кнопка
Вы даже можете добавлять кнопки во входных группах. Вместо класса .input-group-addon, вам нужно использовать класс .input-group-btn, чтобы завернуть кнопки. Это необходимо из-за стилей браузера по умолчанию, которые не могут быть переопределены. Этот пример демонстрирует это:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group:->
</div><!-- /.col-lg-6:-><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group:->
</div><!-- /.col-lg-6:->
</div><!-- /.row:->
</form>
</div>
Кнопки с выпадающим списком
Добавление кнопок с выпадающим меню во входных группах могут быть сделано, просто оборачивая кнопку и раскрывающееся меню в класс .input-group-btn, как показано в следующем примере:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group:->
<input type = "text" class = "form-control">
</div><!-- /input-group:->
</div><!-- /.col-lg-6:-><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group:->
</div><!-- /input-group:->
</div><!-- /.col-lg-6:->
</div><!-- /.row:->
</form>
</div>
Сегментные кнопки
Для сегментирования кнопок и выпадающего списка во входных группах, используйте один и тот же общий стиль кнопки, но добавить первичное действие вместе с раскрывающимся можно увидеть в следующем примере:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group:->
<input type = "text" class = "form-control">
</div><!-- /input-group:->
</div><!-- /.col-lg-6:-><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group:->
</div><!-- /input-group:->
</div><!-- /.col-lg-6:->
</div><!-- /.row:->
</form>
</div>
