ylbtech-Bootstrap-CL：输入框组

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、

1、

http://www.runoob.com/bootstrap/bootstrap-input-groups.html

2、

11.返回顶部

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

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

bootstrap之输入框组
向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-exam ...
Bootstrap<基础十五> 输入框组
Bootstrap 支持的另一个特性,输入框组.输入框组扩展自表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...
bootstrap 列表表格表单复选单选多选输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
Bootstrap入门（十一）组件5：输入框组
Bootstrap入门(十一)组件5:输入框组 1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...
Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
Bootstrap输入框组
前面的话有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
bootstrap输入框组、导航和导航条
输入框组(input groups) 避免使用select 支持不好,使用输入框组尺寸根据 input-group-lg input-group-sm来选择 <div class ...
Bootstrap历练实例：基本输入框组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

5.Longest Palindrome substring
/* * 5.Longest Palindrome substring * 2016-4-9 by Mingyang 自然而然的想到用dp来做 * 刚开始自己做的时候分的条件太细,两个index相等, ...
Ubuntu 16.04安装JAD反编译工具（Java）
JAD反编译工具有个好处,就是字节码和源代码一起输出. 官网:https://varaneckas.com/jad/ 安装步骤: 1.下载: 离线版本:(链接: https://pan.baidu.c ...
Mac安装IntelliJ IDEA时快捷键冲突设置
Mac有专门的快捷键,和Linux/Windows的不一样. 下面是发现的一些需要屏蔽的快捷键: 一.搜狗输入法: 暂时没发现有冲突. 二.系统代码提示:Ctrl+空格(输入法开关) 三.其它暂无 ...
快速上传到rackspace cdn工具turbolift swift 安装
快速上传到rackspace cdn 工具安装,2步即可完成: 1.安装git CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 y ...
scrapy的allowed_domains设置含义
设置allowed_domains的含义是过滤爬取的域名,在插件OffsiteMiddleware启用的情况下(默认是启用的),不在此允许范围内的域名就会被过滤,而不会进行爬取但是有一个问题:像下面 ...
PostgreSQL触发器的使用
原文: https://www.yiibai.com/postgresql/postgresql-trigger.html -------------------------------------- ...
Django简易安装
Django简易安装 1,下载 https://www.djangoproject.com/download/ 2, 拷贝至python同级目录 python setup.py install 3,在 ...
Override和Overload差别，Overloaded的方法能否够改变返回值的类型?
Overload是重载的意思, Override是覆盖的意思,也就是重写. 重载Overload表示同一个类中能够有多个名称同样的方法,但这些方法的參数列表各不同样(即參数个数或类型不同). 重写Ov ...
cocos2d-x 3.0 引用第三方库及编译成apk时android mk文件写法
cocos2d-x 3.0 中.假设你须要使用CocosStudio.Extensions扩展库等等.都须要自己手动加入. 加入过程例如以下:(比方说如今我要加入libExtensions,libC ...
ElasticDownload
https://github.com/eltld/ElasticDownload

Bootstrap-CL：输入框组

Bootstrap 输入框组

基本的输入框组

实例

输入框组的大小

实例

复选框和单选插件

实例

按钮插件

实例

带有下拉菜单的按钮

实例

分割的下拉菜单按钮

实例

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

随机推荐

热门专题