.input-group——设置div为输入框组；

.input-group-lg、.input-group-sm、.input-group-xs——改变输入框组的尺寸；

.input-group-addon——在输入框前或后加入额外内容；

.input-group-btn——在输入框前或后加入button或button式下拉菜单组件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>组件_输入框组</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->

    <script src="jquery-1.11.1.min.js"></script>

    <script src="bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <p>

        <div class="input-group">

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

            <input type="number" class="form-control"/>

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

        </div>

    </p>

    <p>

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

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

        <input type="number" class="form-control"/>

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

    </div>

    </p>

    <p>

        <div class="row">

            <div class="col-md-4">

                <div class="input-group">

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

                        <input class="checkbox" type="checkbox"/>

                    </span>

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

                </div>

            </div>

            <div class="col-md-4">

                <div class="input-group">

                    <input type="text" class="form-control" placeholder="马上查询"/>

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

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

                    </span>

                </div>

            </div>

            <div class="col-md-4">

                <div class="input-group">

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

                        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

                            产品分类

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

                        </button>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#" role="menuitem">男装</a></li>

                            <li><a href="#" role="menuitem">女装</a></li>

                            <li><a href="#" role="menuitem">童装</a></li>

                        </ul>

                    </div>

                    <input type="text" class="form-control" placeholder="清凉一夏">

                </div>

            </div>

        </div>

    </p>

</div>

</body>

</html>

Bootstrap组件之输入框组的更多相关文章

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

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

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

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

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

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

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

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

  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历练实例：基本输入框组

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

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

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

随机推荐

  1. （转载）spring 之间的远程调用-Spring Http调用的实现

    原文:https://www.cnblogs.com/lewisat/p/6132082.html 1:Spring Http设计思想 最近在研究公司自己的一套rpc远程调用框架,看到其内部实现的设计 ...

  2. sql学习笔记（18）-----------数据库创建过程

    手动创建数据库的步骤:   第一步:决定数据库实例的SID 数据库实例的SID用来将当前实例和以后可能创建的实例进行区分 % setenv ORACLE_SID mynewdb     第二步:建立数 ...

  3. HDU 4856 Tunnels（BFS+状压DP）

    HDU 4856 Tunnels 题目链接 题意:给定一些管道.然后管道之间走是不用时间的,陆地上有障碍.陆地上走一步花费时间1,求遍历全部管道须要的最短时间.每一个管道仅仅能走一次 思路:先BFS预 ...

  4. 深入分析Java中的I/O类的特征及适用场合

    Java中有40多个与输入输出有关的类.假设不理清它们之间的关系.就不能灵活地运用它们. 假设从流的流向来分,可分为输入流和输出流,而输入流和输出流又都可分为字节流和字符流.因而可将Java中的I/O ...

  5. m_Orchestrate learning system---四、多看参考文档很多事情很轻松就解决了

    m_Orchestrate learning system---四.多看参考文档很多事情很轻松就解决了 一.总结 一句话总结:多看参考文档啊 1.面包屑导航如何实现? 1 <ol class=& ...

  6. 大家都能看懂的 canvas基础教程

    原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...

  7. 关于markdown的使用

    首先: https://www.cnblogs.com/jordangong/p/9804777.html 注意:提交博客时需将 Markdown 源码粘贴到编辑器中,且编辑器没有实时预览,可以上传后 ...

  8. SQL Server查询数据库空间分配情况、数据库备份信息

    查询数据库空间分配情况: use master go create procedure dbo.proc_getdbspaceused as begin set nocount on create t ...

  9. C#之Action和Func的用法（转自 https://www.cnblogs.com/LipeiNet/p/4694225.html）

    以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...

  10. 51nod 1785 数据流中的算法 （方差计算公式）

    1785 数据流中的算法 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 20 难度:3级算法题   51nod近日上线了用户满意度检测工具,使用高级人工智能算法,通过用户访问时间.鼠 ...