Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组

    将input标签与input-group-addon类组合使用可以为输入框添加前后挂件，需要注意，Bootstrap不支持在输入框控件一侧添加多个挂件，示例如下：

    <p>输入框的前后可以添加额外的标题元素</p>
<div class="input-group form-group">
<span class="input-group-addon">邮箱</span>
<input type="text" class="form-control" placeholder="邮箱">
</div>

<div class="input-group form-group">
<input type="text" class="form-control">
<span class="input-group-addon">平米</span>
</div>

<div class="input-group form-group">
<span class="input-group-addon">余额</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

效果如下：

    也可以将输入框组合为选择控件，示例如下：

    <p>将输入框组合为选择组件</p>
<div class="input-group form-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group form-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>

效果如下：

    在输入框的前后，也可以添加功能按钮，示例如下：

    <p>为输入框添加功能按钮</p>
<div class="input-group form-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">星座</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group form-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">前往</button>
</span>
</div>

效果如下图：

    在输入框组件中，也可以与下拉菜单进行嵌套使用，示例如下：

    <p>在输入框组件中嵌套下拉菜单组件</p>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle">星座 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">金牛</a>
</li>
<li>
<a href="#">狮子</a>
</li>
<li>
<a href="#">摩羯</a>
</li>
<li class="divider"></li>
<li>
<a href="#">无</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">金牛</button>
<button class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">金牛</a>
</li>
<li>
<a href="#">狮子</a>
</li>
<li>
<a href="#">摩羯</a>
</li>
<li class="divider"></li>
<li>
<a href="#">无</a>
</li>
</ul>
</div>
</div>

效果如下：