bootstrap的两种在input框后面增加一个图标的方式

最新推荐文章于 2022-04-29 16:25:55 发布

转载最新推荐文章于 2022-04-29 16:25:55 发布 · 542 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alsf/p/6545566.html

本文介绍了两种不同的HTML输入框实现方案，并提供了具体的代码示例。第一种方案使用了单独的`input`标签与`span`标签结合的方式；第二种方案则是在`div`标签内直接嵌套`input`标签。尽管这两种方案的实现细节不同，但最终呈现的效果一致。

第一种：

<div class="input-group">
    <div class="input-icon-group">
        <div class="input-group" style="width:100%">
                <input type="text" class="form-control" placeholder="" value="${batchid}" data-clearbtn="true"/>
               <span class="input-group-addon"><i class="md md-center-focus-weak fa-lg"> </i></span> 
        </div>
    </div>
    <span class="input-group-btn">
         <button class="btn btn-primary" type="button">批号</button>
    </span>
</div>

第二种：

<div class="input-group">
    <div class="input-icon-group">
        <div class="input-group" style="width:100%">
           <input type="text" class="form-control" placeholder="" value="${batchid}" data-clearbtn="true">
               <span class="input-group-addon"><i class="md md-center-focus-weak fa-lg"> </i></span> 
           </input>
        </div>
   </div>
   <span class="input-group-btn">
            <button class="btn btn-primary" type="button">批号</button>
   </span>
</div>

最后结果都是：