前面的话

  有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon。也就是通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,来实现对表单控件的扩展。本文将详细介绍Bootstrap输入框组

基本用法

  在输入框的任意一侧添加额外元素或按钮。还可以在输入框的两侧同时添加额外元素

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div> <div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div> <div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div> <div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

【注意事项】

  1、避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式

  2、避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持

  3、不要将表单组或栅格列(column)类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部

<h3>错误示范</h3>
<div class="input-group col-xs-4">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group col-xs-8">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<h3>正确示范</h3>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-8">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>

  4、可以添加多个(.input-group-addon 或 .input-group-btn

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">@</span>
</div>

  5、不支持在单个输入框组中添加多个表单控件

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

尺寸

  为 .input-group 添加相应的尺寸类,其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。提供了.input-group-lg和.input-group-sm,未提供超小型的样式,也许作者认为不需要

<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

额外元素

【多选框或单选框】

  可以将多选框或单选框作为额外元素添加到输入框组中

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>

【按钮】

  为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon,而是添加 .input-group-btn 来包裹按钮元素。由于.btn按钮样式定义了各种各样的样式,其不像checkbox、radio、label等直接放到.input-group-addon样式里就可以的。所以,为了避免冲突,作者为.btn样式又单独设置了一个.input-group-btn样式,用来替换.input-group-addon作为新的addon容器

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

【按钮式下拉菜单】

  很自然,能支持按钮,也就能支持按钮式下拉菜单,不需要额外的样式支持,只需要在普通的.btn按钮上应用一个data-toggle="dropdown"属性即可

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">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" aria-label="...">
</div>

【分裂式按钮下拉菜单】

<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="button">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><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" aria-label="...">
</div>

Bootstrap输入框组的更多相关文章

  1. bootstrap输入框组、导航和导航条

    输入框组(input groups) 避免使用select  支持不好,使用输入框组 尺寸根据  input-group-lg    input-group-sm来选择   <div class ...

  2. Bootstrap-CL:输入框组

    ylbtech-Bootstrap-CL:输入框组 1.返回顶部 1. Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组 ...

  3. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  4. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  5. Bootstrap入门(十一)组件5:输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  6. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  7. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  8. Bootstrap历练实例:基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 项目Alpha冲刺 3

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第三天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  2. node中npm安装模块的网络问题

    最近使用node开发时,发现所有的依赖模块都安装不了啦,一直报错如下 rollbackFailedOptional: verb npm-session 5a4a66a1b8d06dc3 后来才发现是由 ...

  3. 即时通讯IM工具

    即时通讯IM工具,目前已知的服务及收费方式:一.专业第三方IMLeanCloud(按需收费)LeanCloud融云(免费+收费)融云即时通讯云环信(免费+收费)环信-即时通讯云领导者云之讯(免费+收费 ...

  4. D. Imbalanced Array

    让你计算所有连续子序列的最大值-最小值的和. (单调栈) 对于一个数Ai来讲,如果其有贡献的价值,要么是-Ai作为最小值,要么是Ai作为最大值. 那么Ans=ΣAi*maxn-Ai*minn. voi ...

  5. 如何扩展32位EXE程序的使用内存

    1 运行Visual studio的命令行,执行下面命令:editbin /LARGEADDRESSAWARE “C:\Program Files\Skyline\TerraExplorer Pro\ ...

  6. BusyBox下tftp命令的使用

    一.简介 BusyBox下的tftp是一款应用于嵌入式开发系统上的一款小巧tftp工具,为开发者提供一个tftp服务的使用平台. 通常是,PC开发主机作为服务器(Server),开发系统(板)作为客户 ...

  7. 重装系统之无法在驱动器0的分区1上安装windows

    在通过U盘或光盘安装win8/win8.1/win10 时,遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区也不能解决,进而提示Windows无法安装到这个磁盘,选中 ...

  8. 【译】高级指南-深入JSX

    title: 高级指南-深入JSX date: 2017-4-5 17:13:09 --- 深入JSX 从根本上来讲,JSX 仅仅是提供 React.createElement(component, ...

  9. layui表格和弹出框的简单示例

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  10. Unity3D安卓打包

    Unity3D安卓打包须知: 最近在接触Unity3D,在打包安卓时,出现了一些问题,在这里写出来跟大家分享: 首先需要安装jdk和android-sdk,安装方法略 Jdk的目录结构如下: andr ...