Bootstrap группы ввода

Bootstrap группы ввода

группы ввода

группы ввода

Группы ввода Bootstrap — позволяет добавлять текст или кнопки до и после элемента ввода. Для этого используются классы .input-group, .input-group-addon или .input-group-btn. Важно: эти классы используются только с элементами input и не применяются вместе с другими компонентами. Еще одно важно замечание: к элементам ввода всегда рекомендуется добавлять метки — элемент label.

Bootstrap группы ввода

Базовый пример работы с группой ввода

Базовый пример работы с группой ввода

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

При помощи добавления .input-group-lg к .input-group можно увеличить размер Bootstrap группы ввода.


Об авторе

@altarasov administrator

Вы должны быть авторизованы, чтобы оставить комментарий.