BootStrap笔记11

输入框组

使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。

1.基本组合

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

2.尺寸

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。

3.复选框和单选框

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

<div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" ><!--<input type="radio" >-->
      </span>
      <input type="text" class="form-control" >
    </div>

4.整合按钮

把按钮作为输入框组的前缀或者后缀元素,使用 class .input-group-btn 来包裹按钮。

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

5.带有下拉菜单的按钮

在一个 .input-group-btn class 中包裹按钮和下拉菜单即可

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

6.整合分裂式下拉菜单

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