zoukankan      html  css  js  c++  java
  • Bootstrap3系列:下拉菜单

    1.引用Bootstrap

      示例引用的Bootstrap版本:v3.3.7

    <script src="~/Scripts/jquery-2.2.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

     2.基本实例

    2.1 示例代码

    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>

      .dropdown:定义下拉菜单框

      .dropdown-toggle:定义下拉菜单的触发元素

      data-toggle="dropdown":触发下拉菜单

      .dropdown-menu:定义下拉菜单条面板

    2.2 示例效果

    3.设置选项

    3.1右对齐菜单

      默认下拉菜单为左对齐显式,在.dropdown-menu元素中添加.dropdown-menu-right设置右对齐下拉菜单,添加.dropdown-menu-left设置左对齐下拉菜单。

    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>

    3.2 禁用菜单项

      在下拉菜单中的<li>标签添加.disabled,禁用菜单项。

    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单项1</a></li>
            <li class="disabled"><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>

    3.3 设计菜单分隔线

      在下拉菜单中添加.divider的<li>标签,即在下拉菜单中插入一条分隔线。

    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li class="divider"></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>

    3.4 设计向上弹出菜单

      下拉菜单组件框改为.dropup,即可让下拉菜单向上弹出。

    <div class="dropup">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li class="divider"></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>

  • 相关阅读:
    Windows Live Writer介绍及相关问题解决
    阳光盒子火狐浏览器
    Cracking Wifi Wpa-Wpa2 in 5 second——Dumpper V.80.8 +JumpStart+WinPcap
    叮咚recovery——想刷什么包就刷什么包
    vivo s11t线刷救砖过程
    syskey——让你的电脑更加安全
    滑动关机
    QQ空间点赞大法+浏览器自动翻页脚本=点赞根本停不下来
    Kon-boot v2.5介绍与使用方法总结(支持win10)
    Mimikatz的使用心得
  • 原文地址:https://www.cnblogs.com/libingql/p/5840460.html
Copyright © 2011-2022 走看看