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>

效果：

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

时间： 2024-10-18 12:15:41

Bootstrap入门（十一）组件5：输入框组

只支持文本输入框 `<input>`

输入框组中的工具提示和弹出框需要特别的设置