Bootstrap — Группы ввода

В этой главе рассказывается о еще одной функции, поддерживаемой Bootstrap, о группах ввода. Группы ввода — это расширенные элементы управления формой . Используя группы ввода, вы можете легко добавлять и добавлять текст или кнопки к текстовым вводам.

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

Для добавления или добавления элементов в элемент управления .form —

• Оберните это в <div> с классом .input-group

• В качестве следующего шага, в том же самом <div>, поместите ваш дополнительный контент в <span> с классом .input-group-addon .

• Теперь поместите этот <span> до или после элемента <input>.

Оберните это в <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>

Сегментированные кнопки

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