Bootstrap 输入组
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 输入组的更多相关文章
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...
- Bootstrap列表组
前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...
- Bootstrap输入框组
前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...
- 第二百四十二节,Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...
- 第二百三十六节,Bootstrap辅组类和响应式工具
Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...
- bootstrap按钮组
种类 -a, input , button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...
- 详解Bootstrap列表组组件
列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...
- 深入理解BootStrap Item1-- 列表组(list-group)
class=”pull-right”:右对齐下拉菜单 list-group-item:列表组,控制列表,以及添加列表徽章 1.列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单 ...
- Bootstrap按钮组学习
简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...
随机推荐
- UITextField和UIViewConteoller
UITextField控件 UITextFiled常用属性和方法 UITextField是常用的文本输入控件,比如我们用的QQ的登录界面,词典输入要查询的单词都使用了文本框控件,如下图所示.之前介 ...
- 英语学习/词典app行业top5简要分析
综述 根据豌豆夹上的下载量如下图所示,我们组确定的国内行业top5分别是:有道词典(黄明帅负责),金山词霸(黄珂锐负责),百度翻译(刘馨负责),百词斩(贾猛负责),英语流利说(亢建强负责)(时间有限, ...
- 数据同步方案(附Java源码)
一.问题背景经常碰到要同步数据的情况,而系统自带的复制功能又不能实现增量同步,每次都要做全量复制,发生异常情况后只能重头再来,非常麻烦,优其是对那种大文件的处理,更是耗时.二.解決方案1.计算源目录数 ...
- python之路: 线程、进程和协程
进程和线程 既然看到这一章,那么你肯定知道现在的系统都是支持“多任务”的操作,比如: Mac OS X,UNIX,Linux,Windows等. 多任务:简单地说就是同时运行多个任务.譬如:你可以一边 ...
- json转义字符串
json前台写数据 @RequestMapping("/addUserJson") public void addUserJson(User user,HttpServletReq ...
- hdu-oj 1874 畅通工程续
最短路基础 这个题目hdu-oj 1874可以用来练习最短路的一些算法. Dijkstra 无优化版本 #include<cstdio> #include<iostream> ...
- CSS——京东首页实战总结
第一天成果 1.浮动的盒子不要给宽,内容撑起盒子的宽 在前端设计中,一般不给浮动的盒子设置宽,让其用内容撑起一个高度. 2.小三角的表示 ◇用一个盒子(盒子宽为字的宽,高度为字高度的一半)去截取这个菱 ...
- 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- iOS透明引导页
一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...