Bootstrap input box group


This chapter will explain another feature supported by Bootstrap, input box group. The input box group extends from form control. Using input box groups, you can easily add text or buttons as prefixes and suffixes to text-based input boxes.

You can add common elements to user input by adding prefix and suffix content to the input field. For example, you could add a dollar sign, or @ before your Twitter username, or other common elements required by the application interface.

The steps to add a prefix or suffix element to .form-control are as follows:

  • Place the prefix or suffix element in a class with class # In the <div> of ##.input-group.

  • Next, within the same <div>, place additional content within a <span> with class

    .input-group-addon.

  • Place the <span> before or after the <input> element.

To maintain cross-browser compatibility, avoid using <select> elements as they do not render fully in WebKit browsers. Do not apply the class of the input box group directly to the form group. The input box group is an isolated component.
Basic input box group

The following example demonstrates the basic input box group:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的输入框组</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Input the size of the box group

You can pass the

.input-group Add a class relative to the form size (such as .input-group-lg, input-group-sm, input-group-xs) to change the size of the input box group. The content in the input box will automatically resize.

The following example demonstrates this:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框组的大小</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

Run Example»Click "Run instance" button to view the online instance

Check box and radio plug-in


You can use the check box and radio plug-in as the prefix of the input box group or Suffix element, as shown in the following example:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框组的复选框和单选插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

Run Instance»Click "Run Instance" Button to view online examples

Button plug-in

You can also use the button as a prefix or suffix element of the input box group. In this case, you do not add the .input-group-addon class, you need to use class .input-group-btn to wrap the button. This is required because default browser styles will not be overridden. The following example demonstrates this:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框组的按钮插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

Run Instance»

Click the "Run Instance" button to view Online example

Button with drop-down menu

To add a button with drop-down menu in the input box group, just simply add a button in an .input-group- Just wrap the button and drop-down menu in btn class, as shown in the following example:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框组的下拉菜单按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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">
                     下拉菜单 
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另一个功能</a></li>
                     <li><a href="#">其他</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分离的链接</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">
                     下拉菜单 
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另一个功能</a></li>
                     <li><a href="#">其他</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分离的链接</a></li>
                  </ul>
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance

Split drop-down menu button

Add a split button with a drop-down menu in the input box group, use Roughly the same style as a drop-down menu button, but with major functionality added to the drop-down menu, as shown in the following example:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框组中分割的下拉菜单按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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">下拉菜单
                  </button>
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                     <span class="caret"></span>
                     <span class="sr-only">切换下拉菜单</span>
                  </button>
                  <ul class="dropdown-menu">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另一个功能</a></li>
                     <li><a href="#">其他</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分离的链接</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">下拉菜单
                  </button>
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                     <span class="caret"></span>
                     <span class="sr-only">切换下拉菜单</span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另一个功能</a></li>
                     <li><a href="#">其他</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分离的链接</a></li>
                  </ul>
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

←
→