當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap 输入组

發布時間：2025/4/5 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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"><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>

總結

以上是生活随笔為你收集整理的Bootstrap 输入组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

bootstrap

上一篇：利用运行时设置UITextField 光
下一篇： C++Study 指针详解