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>