输入组（Input Groups）

优质

小牛编辑

138浏览

2023-12-01

本章介绍了Bootstrap支持的另一个功能，即输入组。输入组是扩展的Form Controls 。使用输入组，您可以轻松地在文本输入中添加和附加文本或按钮。

通过在输入字段中添加前置和附加内容，可以将常用元素添加到用户的输入中。例如，您可以添加美元符号，@用于Twitter用户名，或者您的应用程序界面可能常见的任何其他内容。

要将元素添加到.form-control或附加元素 -

用类.input-group将它包装在<div>中
作为下一步，在同一个div中，将您的额外内容放在带有.input-group-addon类的<span>中。
现在将放在《input》元素之前或之后。

对于跨浏览器兼容性，请避免在此处使用元素，因为它们无法在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本身来.input-group .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>