В этой статье объясняется еще одна функция поддержки 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>
                       
      

 
      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
                       
      

     
      <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>
                       
      

 
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
                       
      

 
      <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 -->

         
         <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 -->

        
         <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 -->

        
         <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">Dropdwon 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 -->

        
         <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">
                     Dropdwon 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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok