bootstrap的下拉菜单组件与导航条

前期准备：bootstrap的css文件和js文件先引入

Bootstrap 组件-拉下菜单(class+js)

下拉菜单必需三级结构

<div class="dropdown"> 父元素

</div>

 1 <div class="container">
 2   <h1>组件-下拉菜单-自定义菜单</h1>
 3   <div class="dropdown">
 4     <a href="#" data-qiehuan="xiala1">西餐厅</a>
 5     <ul class="dropdown-menu">
 6       <li><a href="#">咖啡</a></li>
 7       <li><a href="#">汉堡</a></li>
 8       <li><a href="#">披萨</a></li>
 9     </ul>
10   </div>
11   <h1>组件-下拉菜单-bootstrap</h1>
12   <div class="dropdown">
13     <a href="#" data-toggle="dropdown">中餐厅</a>
14     <ul class="dropdown-menu">
15       <li><a href="#">油条</a></li>
16       <li><a href="#">豆浆</a></li>
17       <li><a href="#">包子</a></li>
18     </ul>
19   </div>
20   <h1>稍复杂下拉菜单-bootclass拓展</h1>
21   <div class="dropdown">
22     <a href="#" data-toggle="dropdown">葫芦娃</a>
23     <ul class="dropdown-menu">
24       <li><a href="#" class="dropdown-header">单数娃系列</a></li>
25       <li><a href="#">大娃</a></li>
26       <li><a href="#">三娃</a></li>
27       <li><a href="#">五娃</a></li>
28       <li><a href="#">七娃</a></li>
29       <li><a href="#" class="dropdown-header">双娃系列</a></li>
30       <li><a href="#">二娃</a></li>
31       <li><a href="#">四娃</a></li>
32       <li><a href="#">六娃</a></li>
33     </ul>
34   </div>
35 
36 
37 </div>

View Code