Bootstrap 组件-输入框组

1 : 基本组合    
2 : 尺寸    
3 : 复选框和单选框    
4 : 整合按钮    
5 : 整合下拉菜单    
6 : 整合分裂式下拉菜单    

• 基本组合
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
  </div>
   
  <div class="input-group">
    <input type="text" class="form-control" placeholder="邮箱" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">@12306.com</span>
  </div>
   
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control"  placeholder="金额" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
  </div>

• 尺寸
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
  <div class="input-group input-group-lg">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
  </div>
  <div class="input-group input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
  </div>
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
  </div>

• 复选框和单选框
  
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
   
      <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" >
        </span>
        <input type="text" class="form-control" >
      </div>
      <div class="input-group">
        <span class="input-group-addon">
          <input type="radio" >
        </span>
        <input type="text" class="form-control" >
      </div>

• 整合按钮
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
   
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">搜索</button>
        </span>
        <input type="text" class="form-control" placeholder="Search for...">
      </div>
   
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">搜索</button>
        </span>
      </div>

• 整合下拉菜单
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">搜索<span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Google</a></li>
            <li><a href="#">百度</a></li>
            <li><a href="#">搜狗</a></li>
            <li class="divider"></li>
            <li><a href="#">人民搜索</a></li>
          </ul>
        </div>
        <input type="text" class="form-control" aria-label="...">
      </div>
   
      <div class="input-group">
        <input type="text" class="form-control" aria-label="...">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">搜索<span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li><a href="#">Google</a></li>
            <li><a href="#">百度</a></li>
            <li><a href="#">搜狗</a></li>
            <li class="divider"></li>
            <li><a href="#">人民搜索</a></li>
          </ul>
        </div>
      </div>
   
  <div style="height:120px"></div>

• 整合分裂式下拉菜单
  
  
  

  <script src="js/jquery/2.0.0/jquery.min.js"></script>
  <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  <style>
  div{
    margin:5px;
  }
  </style>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div class="input-group-btn">
  <button type="button" class="btn btn-default">提交</button>
     <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
        <span class="caret"></span>
    
     </button>
     <ul class="dropdown-menu" role="menu">
       <li>
           <a href="#">HTML</a>            
        </li>
        <li role="presentation">
           <a href="#">CSS</a>             
        </li>
     
        <li role="presentation">
           <a href="#">Javascript</a>          
        </li>
        <li role="presentation">
           <a href="#">AJAX</a>            
        </li>
     </ul>
    </div>
  </div>
  <div style="height:120px"></div>