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>

效果：

根据需要，也可以改成分裂式的下拉菜单。