bootstrap之输入框组

向输入域添加前缀和后缀的内容

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

 复选框和单选插件作为输入框组的前缀或者后缀元素

 

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

 按钮作为输入框组的前缀或者后缀元素

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

class="input-group-btn"

           <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 class="input-group">
      	<div class="input-group-btn">
      		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      			<span class="glyphicon glyphicon-music"></span>   GO
      			<span class="caret"></span>
      		</button>
      		<ul class="dropdown-menu">
      			<li class="dropdown-header">下拉菜单标题</li>
      			<li><a href="#">A</a></li>
      			<li class="divider"><</li>
      			<li><a href="#">B</a></li>
      		</ul>	
      	</div>
         <input type="text" class="form-control">  
      </div>
      <br>
      
      <div class="input-group">
      	<div class="input-group-btn">
      		<button type="button" class="btn btn-primary">
      			<span class="glyphicon glyphicon-music"></span>   GO
      		</button>		
      		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      			<span class="caret"></span>
      		</button>
      		<ul class="dropdown-menu">
      			<li class="dropdown-header">下拉菜单标题</li>
      			<li><a href="#">A</a></li>
      			<li class="divider"><</li>
      			<li><a href="#">B</a></li>
      		</ul>	
      	</div>
         <input type="text" class="form-control">  
      </div>
      <br>