bootstrap – input addon

1000copy發表於2016-09-06
boot

樸實無華的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>

相關文章