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

首页 > 代码库 > Bootstrap入门（十一）组件5：输入框组

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

2024-08-13 00:15:20 222人阅读

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>

效果：

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

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Bootstrap入门（十一）组件5：输入框组