zoukankan      html  css  js  c++  java
  • bootstrap的下拉菜单组件与导航条

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

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

         下拉菜单必需三级结构

         <div class="dropdown"> 父元素

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

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

         </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
  • 相关阅读:
    Whidbey 开发
    构建软件数字安全带系列课程
    微软产品生命周期模型系列课程
    Windows Mobile 2nd 开发黄金周
    微软高性能运算系列课程
    _tmain()和main()区别
    简单工厂模式&工厂方法模式
    单例模式
    java中去除字符串(String)中的换行字符(\r \n \t)
    阿里巴巴 Java开发手册1.4.0
  • 原文地址:https://www.cnblogs.com/shuen/p/8982298.html
Copyright © 2011-2022 走看看