Bootstrap 输入组：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<body style="margin:50px 0">

    <div class="container">

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

        <div class="input-group">

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

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

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

        </div>

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

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

                <input type="checkbox">

            </span>

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

        </div>

        <div class="input-group">

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

                <input type="checkbox">

            </span>

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

        </div>

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

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

                <input type="checkbox">

            </span>

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

        </div>

        <div class="input-group">

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

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

                <button type="button" class="btn btn-default">btn</button>

            </div>

        </div>

        <div class="row">

            <div class="col-xs-2">

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

            </div>

            <div class="col-xs-2">

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

            </div>

            <div class="col-xs-2">

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

            </div>

        </div>

    </div>

</body>

</html>

输入组：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

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

</head>

<body style="margin:150px;">

    <div class="bg-primary">输入框组</div>

    <div class="input-group">

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

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

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

    </div>

    <div class="bg-primary">输入框组多个input好像有问题</div>

    <div class="input-group">

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

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

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

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

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

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

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

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

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

    </div>

    <div class="bg-primary">输入框组-多个addon</div>

    <div class="input-group">

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

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

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

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

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

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

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

    </div>

    <div class="bg-primary">输入框组    大小</div>

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

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

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

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

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

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

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

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

    </div>

    <div class="bg-primary">输入框组    大小</div>

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

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

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

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

        <input type="text" class="form-control input-lg"><!-- 这里的input-lg没有反应？ -->

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

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

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

    </div>

    <div class="bg-primary">输入框组checkbox</div>

    <div class="input-group">

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

            <input type="checkbox">

        </span>

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

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

    </div>

    <div class="bg-primary">输入框组radio</div>

    <div class="input-group">

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

            <input type="radio">

        </span>

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

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

    </div>

    <div class="bg-primary">输入框组-包含按钮情况</div>

    <div class="input-group">

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

            <button class="btn btn-default">GO!</button>

        </span>

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

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

    </div>

    <div class="bg-primary">输入框组-包含按钮情况</div>

    <div class="input-group">

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

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

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

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含下拉菜单按钮</div>

    <div class="input-group">

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

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

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

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

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

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，终于玩坏了</div>

    <div class="input-group">

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

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

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

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

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

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

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，还是有问题</div>

    <div class="input-group">

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

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

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

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

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

            <button class="btn btn-primary">GO!</button>

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

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

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，前面好了，后面还是没好</div>

    <div class="input-group">

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

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

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

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

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

            <button class="btn btn-primary">GO!</button>

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

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

            </button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

</body>

</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

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

</head>

<body style="margin:150px;">

    <div class="bg-primary">输入框组, 最后一个下拉框使用了pull-right样式,第一个下拉框点击会有略微的变形</div>

    <div class="bg-primary">最后一个按钮组使用了open样式，导致下拉按钮也有样式变化</div>

    <div class="row">

        <div class="col-sm-6">

            <div class="input-group">

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

                    <button type="button" class="btn btn-default">按钮A</button>

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

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

                    </button>

                    <button type="button" class="btn btn-default">按钮B</button>

                    <button type="button" class="btn btn-default">按钮C</button>

                    <ul class="dropdown-menu">

                        <li><a>01</a></li>

                        <li><a>02</a></li>

                        <li><a>03</a></li>

                        <li><a>04</a></li>

                    </ul>

                    <button type="button" class="btn btn-default">按钮D</button>

                </div>

                <input class="form-control" type="text" value="a">

            </div>

        </div>

        <div class="col-sm-6">

            <div class="input-group">

                <input type="text" class="form-control" value="b">

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

                    <button type="button" class="btn btn-default">Action</button>

                    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" >

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

                    </button>

                    <ul class="dropdown-menu pull-right">

                        <li><a>01</a></li>

                        <li><a>02</a></li>

                        <li><a>03</a></li>

                        <li><a>04</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

</body>

</html>

Bootstrap 输入组的更多相关文章

  1. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  2. Bootstrap列表组

    前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...

  3. Bootstrap输入框组

    前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...

  4. 第二百四十二节，Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  5. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  6. bootstrap按钮组

    种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...

  7. 详解Bootstrap列表组组件

    列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...

  8. 深入理解BootStrap Item1-- 列表组(list-group)

    class=”pull-right”:右对齐下拉菜单 list-group-item:列表组,控制列表,以及添加列表徽章 1.列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单 ...

  9. Bootstrap按钮组学习

    简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...

随机推荐

  1. Fox And Two Dots

    B - Fox And Two Dots Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  2. android usb挂载分析----vold启动

    http://blog.csdn.net/new_abc/article/details/7396733 前段时间做了下usb挂载的,现在出了几个bug,又要把流程给梳理下,顺便也把相关的知识总结下, ...

  3. JQuery的隐式迭代和each函数和map函数

    1.JQuery选择器选择出来的是一个数组对象,可是给这些每一个元素都要设置内容时,就会隐式迭代,JQuery自己实现内部循环给每个元素绑定上设置. 2.如果是获取的话,那就是默认获取第一个元素的值. ...

  4. Unity加载本地图片的2种方式

    1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...

  5. Mysql基于GTID主从复制

    Mysql5.6基于GTID全局事务的复制 什么是GTID?   GTID(Global Transaction Identifiers)是全局事务标识 当使用GTIDS时,在主上提交的每一个事务都会 ...

  6. css运用中，对position属性的认识

    position属性有: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠 ...

  7. awk命令详解二

    awk命令详解 简单使用: awk :对于文件中一行行的独处来执行操作 . awk -F :'{print $1,$4}'   :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 . 详细介绍: ...

  8. Redis数据备份和重启恢复

    一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复. Redis是一个内存数据库,无论是RD ...

  9. UNITY3D中的文件存储管理

    使用Path对象判断路径的完整性和正确性 using System; using System.IO; class Test { public static void Main() { string ...

  10. UCOSII在STM32F1上的移植

    UCOSII在STM32F1上的移植 首先准备好一份STM32F1的工程.UCOSII源码. 在准备好的工程中新建一个"UCOSII"文件夹(或者取其它名字也行): UCOSII文 ...