Компьютерапия

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

Категория: Bootstrap 3
Просмотров: 1335

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



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok