Bootstrap 输⼊框组
前⾯的话
  有时，我们需要将⽂本输⼊框(input group)和⽂件或者⼩icon 组合在⼀起进⾏显⽰， 我们称之为addon 。也就是通过在⽂本输⼊框 <input> 前⾯、后⾯或是两边加上⽂字或按钮，来实现对表单控件的扩展。本⽂将详细介绍Bootstrap 输⼊框组
基本⽤法
  在输⼊框的任意⼀侧添加额外元素或按钮。还可以在输⼊框的两侧同时添加额外元素
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
<div class ="input-group">
<input type ="text" class ="form-control" placeholder ="Recipient's username" aria-describedby ="basic-addon2">
<span class ="input-group-addon" id ="basic-addon2">@example </span >
</div >
<div class ="input-group">
<span class ="input-group-addon">$</span >
<input type ="text" class ="form-control" aria-label ="Amount (to the nearest dollar)">
<span class ="input-group-addon">.00</span >
</div >
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon3">example/users/</span >
<input type ="text" class ="form-control" id ="basic-url" aria-describedby ="basic-addon3">
</div >
@
@example
$
.00example/users/
Username
Recipient's username 【注意事项】
  1、避免使⽤ <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式
  2、避免使⽤ <textarea> 元素，由于它们的 rows  属性在某些情况下不被⽀持
  3、不要将表单组或栅格列（column ）类直接和输⼊框组混合使⽤。⽽是将输⼊框组嵌套到表单组或栅格相关元素的内部
<h3>错误⽰范</h3>
<div class ="input-group col-xs-4">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
<div class ="input-group col-xs-8">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1"
>
</div >
<h3>正确⽰范</h3>
<div class ="col-xs-4">
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
</div >
<div class ="col-xs-8">
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
</div >
错误⽰范
正确⽰范@@@@Username Username Username Username
input标签placeholder属性
  4、可以添加多个（.input-group-addon  或 .input-group-btn ）
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
<span class ="input-group-addon" id ="basic-addon1">@</span >
</div >@@@Username  　5、不⽀持在单个输⼊框组中添加多个表单控件
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >@Username
Username
尺⼨
  为 .input-group  添加相应的尺⼨类，其内部包含的元素将⾃动调整⾃⾝的尺⼨。不需要为输⼊框组中的每个元素重复地添加控制尺⼨的类。提供了.input-group-lg 和.input-group-sm ，未提供超⼩型的样式，也许作者认为不需要
<div class ="input-group input-group-lg">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
<div class ="input-group input-group-sm">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
<div class ="input-group">
<span class ="input-group-addon" id ="basic-addon1">@</span >
<input type ="text" class ="form-control" placeholder ="Username" aria-describedby ="basic-addon1">
</div >
@@@Username Username
Username
额外元素
【多选框或单选框】
  可以将多选框或单选框作为额外元素添加到输⼊框组中
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
【按钮】
  为输⼊框组添加按钮需要额外添加⼀层嵌套，不是.input-group-addon，⽽是添加.input-group-btn来包裹按钮元素。由于.btn按钮样式定义了各种各样的样式，其不像checkbox、radio、label等直接放到.input-group-addon样式⾥就可以的。所以，为了避免冲突，作者为.btn样式⼜单独设置了⼀个.input-group-btn样式，⽤来替换.input-group-addon作为新的addon容器
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="">
</div>
Go!
【按钮式下拉菜单】
  很⾃然，能⽀持按钮，也就能⽀持按钮式下拉菜单，不需要额外的样式⽀持，只需要在普通的.btn按钮上应⽤⼀个data-toggle="dropdown"属性即可
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dr
opdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
Action
【分裂式按钮下拉菜单】
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="button">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
Action

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。