bootstrap - input addon

653 查看

朴实无华的input默认是这样的:

<input type="text" placeholder="US Dollar">

可以为它加上前缀增补和后缀增补:

<div class="input-group">
   <span class="input-group-addon">$</span>
   <input type="text" class="form-control" placeholder="US Dollar">
   <span class="input-group-addon">.00</span>
</div>

只要把增补控件和input的class="input-group"内,其中的增补控件标记为class="input-group-addon"即可。当然,你可以只是做前缀增补,或者只是增加后缀增补,只要把不需要的删除就行了。

上面的案例增补的是span内的文字。还可以增补其他类型的控件,比如button。并且可以不止一个:

 <div class="input-group">
   <input type="text" class="form-control" >
   <span class="input-group-btn">
     <button type="button" class="btn btn-default">Action</button>
     <button type="button" class="btn btn-default">Options</button>
   </span>
</div>

增补checkbox也行:

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

增补radio也行:

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

增补dropdown也行:

  <div class="input-group">
    <div class="input-group-btn">
      <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu"> 
        <li><a href="#">1</a></li>
        <li><a href="#">2 action</a></li>
      </ul>
    </div>
    <input type="text" class="form-control">
 </div>