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

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

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

     下拉菜单必需三级结构

     <div class="dropdown"> 父元素

       <a data-toggle="dropdown">触发元素</a>

       <div/ul class="dropdown-menu">隐藏元素</ul/div>

     </div>

<div class="container">
  <h1>组件-下拉菜单-自定义菜单</h1>
  <div class="dropdown">
    <a href="#" data-qiehuan="xiala1">西餐厅</a>
    <ul class="dropdown-menu">
      <li><a href="#">咖啡</a></li>
      <li><a href="#">汉堡</a></li>
      <li><a href="#">披萨</a></li>
    </ul>
  </div>
  <h1>组件-下拉菜单-bootstrap</h1>
  <div class="dropdown">
    <a href="#" data-toggle="dropdown">中餐厅</a>
    <ul class="dropdown-menu">
      <li><a href="#">油条</a></li>
      <li><a href="#">豆浆</a></li>
      <li><a href="#">包子</a></li>
    </ul>
  </div>
  <h1>稍复杂下拉菜单-bootclass拓展</h1>
  <div class="dropdown">
    <a href="#" data-toggle="dropdown">葫芦娃</a>
    <ul class="dropdown-menu">
      <li><a href="#" class="dropdown-header">单数娃系列</a></li>
      <li><a href="#">大娃</a></li>
      <li><a href="#">三娃</a></li>
      <li><a href="#">五娃</a></li>
      <li><a href="#">七娃</a></li>
      <li><a href="#" class="dropdown-header">双娃系列</a></li>
      <li><a href="#">二娃</a></li>
      <li><a href="#">四娃</a></li>
      <li><a href="#">六娃</a></li>
    </ul>
  </div>


</div>