当前位置： 移动技术网 > IT编程>网页制作>CSS > Bootstrap3级联多选下拉框

Bootstrap3级联多选下拉框

2019年03月24日  | 移动技术网IT编程  | 我要评论 
 1 <!doctype html>
 2 <html>
 3 <head>
 4   <title>bootstrap3级联多选下拉框</title>
 5   <meta charset="utf-8">
 6   <link rel="stylesheet" href="f:/webclient/bootstrap-3.3.7-dist/css/bootstrap.min.css">
 7   <link rel="stylesheet" href="./bootstrap-select.css">
 8   <style>
 9     body {
10       padding-top: 70px;
11     }
12   </style>    
13 </head>
14 <body>
15     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
16       <div class="container">
17         <div class="navbar-header">
18           <a class="navbar-brand" href="#">bootstrap-select usability tests</a>
19         </div>
20       </div>
21     </nav>
22     <div class="container">
23         <select id="first-disabled" class="selectpicker" multiple data-hide-disabled="true" data-live-search="true">
24             <optgroup disabled="disabled" label="disabled">
25               <option>hidden</option>
26             </optgroup>
27             <optgroup label="fruit">
28               <option>apple</option>
29               <option>orange</option>
30             </optgroup>
31             <optgroup label="vegetable">
32               <option>corn</option>
33               <option>carrot</option>
34             </optgroup>
35          </select>
36     </div>
37 <script src="f:/webclient/angularjs/scripts/jquery-1.9.1/jquery.min.js"></script>
38 <script src="f:/webclient/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
39 <script src="./bootstrap-select.js"></script>
40 </body>
41 </html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网