Bootstrap 输入框样式汇总

版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86998869

向 .form-control 添加前缀或后缀元素

• 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中
• 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容
•  把该 <span> 放置在 <input> 元素的前面或者后面

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">用户名:</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">@Ltesoft.com</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">验证码:</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>