bootstrap - input addon

最新推荐文章于 2022-05-01 15:32:05 发布

weixin_33978044

最新推荐文章于 2022-05-01 15:32:05 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000006833554

本文介绍如何在HTML中使用input-group类为输入框添加前缀和后缀增补控件，包括文字、按钮、复选框、单选按钮及下拉菜单等，并提供了多个示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

朴实无华的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>