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

随机推荐

UItableView 所有内容保存为图片
将所有的UITableView保存为图片,因为UITableView只能保存显示当前,所以,就单个保存后,合并为一张图片代码如下: -(IBAction)savePic:(id)sender { / ...
k-svd字典学习，稀疏编码
1. K-SVD usage: Design/Learn a dictionary adaptively to betterfit the model and achieve sparse s ...
ios9定位服务的app进入后台三分钟收不到经纬度，应用被挂起问题及解决方式
原来定位服务是10分钟收不到定位信息就挂起定位,如今变为最短3分钟,预计都是为了省电吧. 仅仅要你开启应用的后台定位,而且10分钟有一次定位,那么苹果就不会关闭你的线程.如今变成3分钟.若你的应用开启 ...
react jsx 数组变量的写法
1.通过 map 方法 var students = ["张三然","李慧思","赵思然","孙力气","王萌 ...
手机号码归属地查询免费api接口代码
依据手机号码查询用户的卡类型.运营商.归属地.区域等信息. 手机归属地实体类 package org.wx.xhelper.model; /** * 手机归属地 * @author wangxw * ...
Jsp在Web.xml中的配置
以下列出web.xml经常使用的标签元素及这些标签元素的功能: 1.指定欢迎页面.比如: <welcome-file-list> <welcome-file-list> < ...
php闭包实例
php闭包函数,一个典型的实例 function getMoney() { $rmb = 1; $dollar = 6; $func = function($dollar) use (&$rm ...
让Quality Center走下神坛--测试管理工具大PK（转）
让Quality Center走下神坛--测试管理工具QC/ALM 和 RQM.Jira.TP.SCTM大PK 在写完了<让QTP走下神坛>之后,现在来谈谈测试管理工具,献给所有正在或打算 ...
TinyXML：TiXmlNode
TiXmlNode: 对应于DOM结构中的节点,是TinyXML中很重要的一个类,它继承自TiXmlBase TiXmlNode的友元类: friend class TiXmlDocument; fr ...
zoj1232Adventure of Super Mario（图上dp）
题目连接: 啊哈哈.点我点我思路: 这个题目是一个图上dp问题.先floyd预处理出图上全部点的最短路,可是在floyd的时候,把可以用神器的地方预处理出来,也就是转折点地方不能为城堡..预处理完成 ...

Bootstrap-CL：输入框组

Bootstrap 输入框组

基本的输入框组

实例

输入框组的大小

实例

复选框和单选插件

实例

按钮插件

实例

带有下拉菜单的按钮

实例

分割的下拉菜单按钮

实例

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

随机推荐

热门专题