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. 推荐几款屏幕录制工具（可录制GIF）

    我们经常会遇到一些场景,需要你向别人展示一些操作或是效果——例如告诉别人某某软件的配置步骤啊.刚设计出来网站的动画效果怎么样啊.某某电影里面的一个镜头多么经典啊.打得大快人心的NBA绝杀瞬间是怎么回事 ...

  2. 十步叫你如何无损修复硬盘锁（mbr病毒）

    经常看见有人被锁硬盘  开机以后出现一行红字 FUCK  YOU POJIEZHE  等等云云的 这个问题主要还是病毒对Mbr分区的修改造成的 下面我教给大家一个无损数据   无损硬盘  无需重装系统 ...

  3. 深入浅出：Linux设备驱动之字符设备驱动

    一.linux系统将设备分为3类:字符设备.块设备.网络设备.使用驱动程序: 字符设备:是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符设备是面向流 ...

  4. ubuntu compile php from source code

    10down vote Assuming that you already have the OpenSSL libraries and header files (on rpm systems th ...

  5. gulp - sass 插件一直安装不好？

    1.没有sass,只存在与scss 任务 gulp.task('scss', function() { return gulp.src(app.srcPath + '/sass/*.scss') .p ...

  6. Node.js机制及原理理解初步

    http://blog.csdn.net/leftfist/article/details/41891407 一.node.js优缺点 node.js是单线程. 好处就是 1)简单 2)高性能,避免了 ...

  7. 【转载】“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

    既然要学.NET,就要先认识认识她,我不喜欢大段大段文字的东西,自己通过理解,画个图,来看看.NET的沉鱼落雁,闭月羞花之容. 最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基 ...

  8. hive cli 启动缓慢问题

    hive-0.13.1启动缓慢的原因 发现时间主要消耗在以下3个地方: 1. hadoopjar的时候要把相关的jar包上传到hdfs中(这里大概消耗5s,hive0.11一样,这个地方不太好优化) ...

  9. Linux上Libevent的安装

    1.下载wget -O libevent-2.0.21-stable.tar.gz https://github.com/downloads/libevent/libevent/libevent-2. ...

  10. C/C++语言中的位运算

    在计算机程序中,数据的位是可以操作的最小数据单位,理论上可以用“位运算”来完成所有的运算和操作. 一般的位操作是用来控制硬件的,或者做数据变换使用,但是,灵活的位操作可以有效地提高程序运行的效率.C语 ...