Bootstrap学习笔记（七） 输入框组

通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" placeholder="请输入你的帐号" class="form-control">
</div>

<div class="input-group">
    <input type="text" placeholder="请输入你的帐号" class="form-control">
    <span class="input-group-addon">@</span>
</div>

<div class="input-group">
    <input type="text" placeholder="请输入你的帐号" class="form-control">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-heart"></span>
    </span>
</div>

<div class="input-group">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-heart"></span>
    </span>
    <input type="text" placeholder="请输入你的帐号" class="form-control">
</div>