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. 虽然今天angular5发布了，但我还是吧这篇angularjs（1）+webpack的文章发出来吧哈哈哈

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7779384.html 写在前面: 因为最近总结自己之前做过 ...

  2. win7系统使用engine进行开发报错，“未能加载文件或程序集”

    http://www.gisall.com/wordpress/?p=7161 使用vs2010加 arcengine 开发winfrom应用,新建了uc,拖了几个控件后,编译,报未能加载文件或程序集 ...

  3. 【J2EE】十三个规范：愿天下苍生，人人如猿。

    学习了J2ee后对java这个立足标准化的行为感到深深的佩服. 收买什么都不如收买人心,培养啥子都不如培养 习惯.没错,java就是在培养行业习惯,以一纸规范屹立不倒.毕竟技术什么的层出不穷,再新再前 ...

  4. ci中 chrome对favicon.ico请求，导致log报错 解决方法

    chrome浏览器会自动对favicon.ico进行请求,所以当没有为网站添加 favicon.ico 时会出现404的页面错误在实际开发过程中,CI框架 打开 ERROR log,会一直显示ERRO ...

  5. weex 项目开发（一） weex create project 与 weex init project 的区别

    开发环境配置:http://www.cnblogs.com/crazycode2/p/7822961.html 1. weex create project  与  weex init project ...

  6. Flash/Flex获取外部参数

    Part One:Flex程序如何获取html容器传递的URL参数值 我们经常在Flex程序需要用从外部html向swf文件传递参数,(类似 test.html?name=jex&addres ...

  7. POJ训练计划1035_Spell checker(串处理/暴力)

    Spell checker Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18418   Accepted: 6759 De ...

  8. C#不用union，而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路

    C#不用union,而是有更好的方式实现   用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...

  9. UIAutomation使用測试入门

    自己主动化測试的优点: 1.自己主动化能够自己主动測试,不须要人的干预.同一时候还能够不断地反复某一个动作. 2.自己主动化測试在添加了新的功能之后.还能够回归到原理的功能,使其原来的功能不会受到影响 ...

  10. uva 1567 - A simple stone game(K倍动态减法游戏)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=4342">题目链接:uva 1567 - ...