zoukankan      html  css  js  c++  java
  • Bootstrap 下拉菜单(Dropdowns)

    本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

    如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:

    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>

    结果如下所示:

    基本的下拉菜单(Dropdowns)

    选项

    对齐

    通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:

    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>

    结果如下所示:

    向右对齐下拉菜单

    标题

    您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
        </ul>
    </div>

    结果如下所示:

    下拉菜单标题

    更多实例

    描述
    .dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里
    .dropdown-menu 创建下拉菜单
    .dropdown-menu-right 下拉菜单右对齐
    .dropdown-header 下拉菜单中添加标题
    .dropup 指定向上弹出的下拉菜单
    .disabled 下拉菜单中的禁用项
    .divider 下拉菜单中的分割线

    <divclass="dropdown"><buttontype="button"class="btn dropdown-toggle"id="dropdownMenu1"data-toggle="dropdown">主题 <spanclass="caret"></span></button><ulclass="dropdown-menu pull-right"role="menu"aria-labelledby="dropdownMenu1"><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Java</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据挖掘</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据通信/网络</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">分离的链接</a></li></ul></div>

  • 相关阅读:
    修改Win7远程桌面端口【适用XP/2003】
    Mysql Select语句详情
    SqlServer之连接
    MySql数据类型分析(日期时间类型) Part5
    MySql数据类型分析(银行家舍入法) Part3
    MySql数据类型分析(数值(小数型)类型) Part2
    MySql数据类型分析(数值(整形)类型) Part1
    WP系统一次订阅,终身锁屏同时显示农历和天气
    c# 操作 XML(增 ,删 , 改 , 查)
    Postgresql 读取txt到DB 插入或更新
  • 原文地址:https://www.cnblogs.com/lc1776/p/9213141.html
Copyright © 2011-2022 走看看