7.4.4 按钮式下拉菜单作为附加元素
在输入框组中添加按钮式下拉菜单作为附加元素非常简单,只要对按钮式下拉菜单的容器
应用.input-group-btn
样式,并将按钮式下拉菜单整个放入输入框组的容器中即可。
提示:Bootstrap
完全支持将分裂式按钮下拉菜单作为输入框组的附加元素。
程序示例
如下代码示范了如何将按钮式下拉菜单作为附加元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 按钮式下拉菜单作为附加元素 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <style type="text/css"> .container>div { margin-bottom: 10px; } </style> </head>
<body> <div class="container"> <div class="input-group"> <input type="text" class="form-control" id="a"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 按钮式下拉菜单(带分隔条) <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li><a href="#">新建</a></li> <li><a href="#">打开</a></li> <li><a href="#">保存</a></li> <li role="separator" class="divider"></li> <li><a href="#">退出</a></li> </ul> </div> </div> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-warning" type="button">分裂式按钮下拉菜单(带分隔条)</button> <button class="btn btn-default dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="caret"></span> <span class="sr-only">开关下拉菜单</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li><a href="#">新建</a></li> <li><a href="#">打开</a></li> <li><a href="#">保存</a></li> <li role="separator" class="divider"></li> <li><a href="#">退出</a></li> </ul> </div> <input type="text" class="form-control" id="b"> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
在该代码中定义了两个输入框组,在输入框组
中放置了按钮式下拉菜单
,但正如1号代码,2号代码所示,此时的按钮式下拉菜单的容器不再使用.btn-group
样式,而是使用.input-group-btn
样式,这样即可在输入框组中嵌套
按钮式下拉菜单了。
原文链接: 7.4.4 按钮式下拉菜单作为附加元素