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
  • 相关阅读:
    Tag文件使用
    微信开发 select选择框
    useGeneratedKeys的用法
    IBM MQ8.0常用操作
    C++对象在继承情况下的内存布局---多态实现的原理
    C++中的赋值操作符重载和拷贝构造函数
    C++中多态的概念和意义
    C 链表冒泡排序
    js 倒计时(可自定义时间)
    如何分析解决Android ANR
  • 原文地址:https://www.cnblogs.com/shuen/p/8982298.html
Copyright © 2011-2022 走看看