Bootstrap输入框组中可以使用的元素

可添加的元素

在输入框组中，你可以在输入框前面或后面添加复选框、单选按钮、按钮、按钮下拉菜单、拼接式按钮下拉菜单、多个按钮等。

1、复选框和单选按钮

只需把复选框或单选按钮放到一个.input-group-addon的 <span> 中，就可以将复选框或单选按钮作为额外元素添加到输入框组中。如：

<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>

效果如图 3‑29所示：

图3-29 复选框和单选按钮

2、按钮

可以将按钮作为额外元素添加到输入框组中，但是由于不同浏览器的默认样式无法被统一，在为输入框组添加按钮时，需要额外添加一层嵌套，不是使用.input-group-addon，而是使用.input-group-btn来包裹按钮元素。按钮可以使用 <button> 或 <a> 或 type="submit" 的 <input>元素等创建。如：

<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<input type="submit" class="btn btn-default" value="Search">
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<a class="btn btn-default">Go!</a>
</span>
</div>

效果如图 3‑30所示：

图3-30 按钮

3、按钮下拉菜单

将按钮式下拉菜单作为额外元素添加到输入框组中，也是使用.input-group-btn来包裹按钮元素，因为按钮式下拉菜单本质就是一个按钮。如：

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <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">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<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>
</div>

效果如图 3‑31所示：

图3-31 按钮下拉菜单

4、拼接式按钮下拉菜单

将拼接式按钮下拉菜单作为额外元素添加到输入框组中，也是使用.input-group-btn来包裹按钮元素。如：

<div class="input-group">
<div class="input-group-btn">

</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">

</div>
</div>

效果如图 3‑32所示：

图3-32 拼接式按钮下拉菜单

5、多个按钮

你也可以将多个按钮作为额外元素添加到输入框组中，只需在.input-group-btn元素中添加多个按钮即可。如：

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Bold">
<span class="glyphicon glyphicon-bold"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Italic">
<span class="glyphicon glyphicon-italic"></span>
</button>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Help">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>

效果如图 3‑33所示：

图3-33 多个按钮

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap输入框组中可以使用的元素相关推荐

Bootstrap 输入框组中控件的尺寸
控件的尺寸 Bootstrap3中,只需为.input-group添加相应的尺寸类 .input-group-lg或. input-group-sm,其内部包含的元素将自动调整自身的尺寸,而不必为输入 ...
c语言去掉数组中重复的,C语言删除无序整型数组中的重复元素及时间复杂度
数组重复的问题在任何编程中都会有碰到了,这里介绍C语言删除无序整型数组中的重复元素及时间复杂度,希望对各位有帮助. 遇到一个题,大概要求是写一个函数处理来去掉一个无序的整型数组(例如int i_arr ...
Bootstrap按钮组中按钮的尺寸
按钮的尺寸在按钮组中,你可以为每个按钮应用按钮的尺寸类,如 .btn-lg..btn-sm或.btn-xs ,来调整按钮的大小. 考虑到这种方式比较麻烦,Bootstrap专门为按钮组提供了额外的尺 ...
java消除整型数组中重复的元素，排序后输出新数组
法一: import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(Str ...
Bootstrap组件_输入框组
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Bootstrap创建输入框组
输入框组输入框组是对表单控件的扩展.使用输入框组,你可以很容易地在文本输入框<input>的前面或后面添加文本或按钮. 通过输入框组,你可以向输入框添加公共的元素.如,添加人民币符号.电 ...
Bootstrap列表组堆叠
列表组堆叠 Bootstrap3列表组中的每个元素,都可以是任何 HTML 内容,因此你可以根据需要,自定义列表组的内容.自定义内容时,通过 .list-group-item-heading 定义列表 ...
leetcode周赛第二题6230. 长度为 K 子数组中的最大和
题目: 给你一个整数数组 nums 和一个整数 k .请你从 nums 中满足下述条件的全部子数组中找出最大子数组和: 子数组的长度是 k,且子数组中的所有元素各不相同 . 返回满足题面要求的最大 ...
bootstrap带有下拉按钮的输入框_Bootstrap的输入框组样式
在input的任何一侧放置一个附加组件或按钮,您也可以在Input输入框的两面各放置一个组件(或按钮),我们不支持单个输入组合中有多个表单控制项,同时<label>必须在输入框组之外. & ...

Bootstrap输入框组中可以使用的元素

可添加的元素

Bootstrap输入框组中可以使用的元素相关推荐

最新文章

热门文章