Bootstrap入门（十一）组件5：输入框组
Bootstrap入门（十一）组件5：输入框组
1.为其中添加第一个输入框
2.添加额外的元素
3.为用户提供标识
4.改变输入框的尺寸
5.为额外添加多选/单选框
6.与按钮结合
7.与下拉菜单结合
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
通过在文本输入框
<input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予.input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。只支持文本输入框 <input>
这里请避免使用
<select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。避免使用
<textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。输入框组中的工具提示和弹出框需要特别的设置
为
.input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的副作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。操作：
先在从起div中建立一个输入框组的div（ class="input-group" ）
<div class="container"> <div class="input-group"> ... </div> </div>
1.为其中添加第一个输入框
先看下效果
<div class="container"> <div class="input-group"> <input type='text' class="form-control" placeholder="username"> </div> </div>
效果为：
2.添加额外的元素
是一个<span>标签
<div class="container"> <div class="input-group"> <span class="input-group-addon">@</span> <input type='text' class="form-control" placeholder="username"> </div> </div>
效果：
3.为用户提供标识
比如钱
<div class="input-group"> <span class="input-group-addon">$</span> <input type='text' class="form-control"> <span class="input-group-addon">.00</span> </div>
效果
4.改变输入框的尺寸
同样也有lg，sm等大小
<div class="input-group input-group-lg"> <input type='text' class="form-control"> </div> <div class="input-group"> <input type='text' class="form-control"> </div> <div class="input-group input-group-sm"> <input type='text' class="form-control"> </div>
效果，大小明显区分
5.为额外添加多选/单选框
（注意用了栅格，这里是col-lg-6 ，放开截图，在浏览器中会占屏幕的一半，详细可看入门（二）栅格）（把type='checkbox' /type='radio' 放到<input>当中）
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class='input-group-addon'> <input type='checkbox'> </span> <input type='text' class="form-control"> </div> <div class="input-group"> <span class='input-group-addon'> <input type='radio'> </span> <input type='text' class="form-control"> </div> <div>
效果，课根据实际需要，添加不同个数，当然，前后都是可以放置的
6.与按钮结合
只需要用<button>来代替<input>，注意，<span>中要用class='input-group-btn'来代替class='input-group-addon'，否则按钮会大于输入框，不美观
<div class="input-group"> <span class='input-group-btn'> <button class="btn btn-default" type='button'>ASD</button> </span> <input type='text' class="form-control"> </div>
效果
7.与下拉菜单结合
（记得要引入JS文件）
<div class="input-group"> <div class='input-group-btn'> <button class="btn btn-default dropdown-toggle" type='button' data-toggle='dropdown'> ZXC <span class='caret'></span> </button> <ul class="dropdown-menu" role='menu'> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> <input type='text' class='form-control'> </div>
效果：
根据需要，也可以改成分裂式的下拉菜单。
