Bootstrap 输入组
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap 输入组
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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沒有反應(yīng)？ --><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樣式，導(dǎo)致下拉按鈕也有樣式變化</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>?
總結(jié)
以上是生活随笔為你收集整理的Bootstrap 输入组的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用运行时设置UITextField 光
- 下一篇： C++Study 指针详解