ylbtech-Bootstrap-CL：输入框组
1.返回顶部
1、

Bootstrap 输入框组

本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

  • 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
  • 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
  • 把该 <span> 放置在 <input> 元素的前面或者后面。

为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

基本的输入框组

下面的实例演示了基本的输入框组：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

        <div class="input-group">

            <span class="input-group-addon">@</span>

            <input type="text" class="form-control" placeholder="twitterhandle">

        </div>

        <br>

        <div class="input-group">

            <input type="text" class="form-control">

            <span class="input-group-addon">.00</span>

        </div>

        <br>

        <div class="input-group">

            <span class="input-group-addon">$</span>

            <input type="text" class="form-control">

            <span class="input-group-addon">.00</span>

        </div>

    </form>

</div>

尝试一下 »

结果如下所示：

输入框组的大小

您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

下面的实例演示了这点：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

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

            <span class="input-group-addon">@</span>

            <input type="text" class="form-control" placeholder="Twitterhandle">

        </div>

        <br>

        <div class="input-group">

            <span class="input-group-addon">@</span>

            <input type="text" class="form-control" placeholder="Twitterhandle">

        </div>

        <br>

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

            <span class="input-group-addon">@</span>

            <input type="text" class="form-control" placeholder="Twitterhandle">

        </div>

    </form>

</div>

尝试一下 »

结果如下所示：

复选框和单选插件

您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

        <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><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

            <br>

            <div class="col-lg-6">

                <div class="input-group">

                    <span class="input-group-addon">

                        <input type="radio"></span>

                    <input type="text" class="form-control">

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

        </div><!-- /.row -->

    </form>

</div>

尝试一下 »

结果如下所示：

按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。下面的实例演示了这点：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

        <div class="row">

            <div class="col-lg-6">

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

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

            <br>

            <div class="col-lg-6">

                <div class="input-group">

                    <input type="text" class="form-control">

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

                        <button class="btn btn-default" type="button">Go!</button>

                    </span>

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

        </div><!-- /.row -->

    </form>

</div>

尝试一下 »

结果如下所示：

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

        <div class="row">

            <div class="col-lg-6">

                <div class="input-group">

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

                        <button type="button" class="btn btn-default

                        dropdown-toggle" data-toggle="dropdown">下拉菜单

                            <span class="caret"></span>

                        </button>

                        <ul class="dropdown-menu">

                            <li>

                                <a href="#">功能</a>

                            </li>

                            <li>

                                <a href="#">另一个功能</a>

                            </li>

                            <li>

                                <a href="#">其他</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">分离的链接</a>

                            </li>

                        </ul>

                    </div><!-- /btn-group -->

                    <input type="text" class="form-control">

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

            <br>

            <div class="col-lg-6">

                <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">下拉菜单

                            <span class="caret"></span>

                        </button>

                        <ul class="dropdown-menu pull-right">

                            <li>

                                <a href="#">功能</a>

                            </li>

                            <li>

                                <a href="#">另一个功能</a>

                            </li>

                            <li>

                                <a href="#">其他</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">分离的链接</a>

                            </li>

                        </ul>

                    </div><!-- /btn-group -->

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

        </div><!-- /.row -->

    </form>

</div>

尝试一下 »

结果如下所示：

分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：

实例

<div style="padding: 100px 100px 10px;">

    <form class="bs-example bs-example-form" role="form">

        <div class="row">

            <div class="col-lg-6">

                <div class="input-group">

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

                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>

                        <button type="button" class="btn btn-default

                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">

                            <span class="caret"></span>

                            <span class="sr-only">切换下拉菜单</span>

                        </button>

                        <ul class="dropdown-menu">

                            <li>

                                <a href="#">功能</a>

                            </li>

                            <li>

                                <a href="#">另一个功能</a>

                            </li>

                            <li>

                                <a href="#">其他</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">分离的链接</a>

                            </li>

                        </ul>

                    </div><!-- /btn-group -->

                    <input type="text" class="form-control">

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

            <br>

            <div class="col-lg-6">

                <div class="input-group">

                    <input type="text" class="form-control">

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

                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>

                        <button type="button" class="btn btn-default

                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">

                            <span class="caret"></span>

                            <span class="sr-only">切换下拉菜单</span>

                        </button>

                        <ul class="dropdown-menu pull-right">

                            <li>

                                <a href="#">功能</a>

                            </li>

                            <li>

                                <a href="#">另一个功能</a>

                            </li>

                            <li>

                                <a href="#">其他</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">分离的链接</a>

                            </li>

                        </ul>

                    </div><!-- /btn-group -->

                </div><!-- /input-group -->

            </div><!-- /.col-lg-6 -->

        </div><!-- /.row -->

    </form>

</div>

尝试一下 »

结果如下所示：

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

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

  1. bootstrap之输入框组

    向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-exam ...

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

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

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

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

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

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

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

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

  6. Bootstrap输入框组

    前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...

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

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

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

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

  9. Bootstrap历练实例：基本输入框组

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

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

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

随机推荐

  1. jquery的固定定位效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...

  2. 使用java连接AD域,验证账号密码是否正确

    eb项目中有时候客户要求我们使用ad域进行身份确认,不再另外做一套用户管理系统.其实客户就是只要一套账号可以访问所有的OA,CRM等办公系统.这就是第三方验证.一般有AD域,Ldap,Radius,邮 ...

  3. booth乘法器原理

    在微处理器芯片中,乘法器是进行数字信号处理的核心,同一时候也是微处理器中进行数据处理的wd=%E5%85%B3%E9%94%AE%E9%83%A8%E4%BB%B6&hl_tag=textli ...

  4. win10 UWP 申请微软开发人员

    申请微软开发人员能够到https://dev.windows.com/zh-cn/programs/join 假设是学生,先去http://www.dreamspark.com/ 假设是英文,点stu ...

  5. 常量，字段，构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图，改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq

    常量,字段,构造方法   常量 1.什么是常量 ​ 常量是值从不变化的符号,在编译之前值就必须确定.编译后,常量值会保存到程序集元数据中.所以,常量必须是编译器识别的基元类型的常量,如:Boolean ...

  6. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  7. apk程序查找方法调用

    有android killer,现在ida对android的支持等一些方便工具,此篇(关于搜索和修改代码)废弃. 没有好的调试工具下 常用插代码(如果怕影响寄存器值,可以将.locals xxx改多几 ...

  8. POJ 2524 Ubiquitous Religions (幷查集)

    Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 23090   Accepted:  ...

  9. Monkey测试的参数

    一.Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动Trackball.按键等操作来对设备上的程序进行压 力测试,检测程序多久 ...

  10. JasperReport 中文问题解决

    1 运行环境    1.1 JasperReport 3.5    JasperReports 是iReport的核心内容.它是一个强有力的开源报表产生工具,可以将内容输出到屏幕上.打印机或生成PDF ...