.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中的InitializingBean接口

    InitializingBean接口为bean提供了初始化方法的方式,它只有afterPropertiesSet方法,凡是继承该接口的类,在初始化bean的时候会执行该方法. 测试程序如下: impo ...

  2. C#-单元测试知识点

    指的是软件中对最小单元进行测试的一种测试方法 开发阶段的测试发现问题并解决问题是最节省时间和成本 Ctrl+R Ctrl+A 自动化执行单元测试 查看代码覆盖率,通常要达到80,90%的代码测试覆盖率 ...

  3. 日志工具全面理解及配置应用---以Log4j例子

    一．日志系统基本常识 1.日志系统作用:将日志信息输出到控制台和文本文件,以追踪代码运行信息. 2.日志系统操作的是什么?日志系统打印信息,也是调用日志系统的log.Info(),log.Warn() ...

  4. HH实习(hpu1287)（斐波那契运用)

    HH实习 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 44  Solved: 29 [Submit][id=1287">Status ...

  5. Python——异常基础

    异常基础 在Python中,异常会依据错误自己主动地被触发.也能由代码触发和截获.异常由五个语句处理: 1.[try/except]:捕捉由Python或你引起的异常并恢复. 2.[try/final ...

  6. kentico中的urls

    alias是默认的访问页面 page aliases中可以手动指定访问一个url,然后跳转到当前的页面

  7. hpuoj--1122-- HH的随机数（数据去重）

    1122: HH的随机数 时间限制: 1 Sec  内存限制: 128 MB 提交: 476  解决: 75 [提交][状态][讨论版] 题目描述 HH想在学校中请一些同学一起做一项问卷调查,为了实验 ...

  8. Excel中将字符串中从右起第n个指定字符替换的方法

    比如你想把www.baidu.com.cn中的倒数第二个”.”替换成@,则可以用: =SUBSTITUTE(A1,".","@",LEN(A1)-LEN(SUB ...

  9. PHP简介 变量 输出

    一.PHP概念 Hypertext Preprocessor 超文本预处理器,是一种开源脚本语言,语法吸收了C语言,Java,Perl的特点,用于web开发领域, PHP是将程序嵌入到Html文档中执 ...

  10. SpringBoot(三) SpringBoot中的日志配置

    SLF4J Spring Boot在所有内部日志中使用Commons Logging,但是默认配置也提供了对常用日志的支持,如:Java Util Logging,Log4J, Log4J2和Logb ...