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 示例效果

时间: 2024-08-02 11:03:19

Bootstrap3系列:下拉菜单的相关文章

Bootstrap3系列:按钮式下拉菜单

1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 按钮式下拉菜单<span class="caret"></span> </a&g

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动 案例描述:中继器下拉菜单联动 知识点: 中继器复合操作 效果图: 在线效果预览: AxShare在线效果预览: 原型下载地址:中继器拉菜单联动 .rp 在线视频: 实现步骤: 更新中-..

Bootstrap系列 -- 36. 向上弹起的下拉菜单

有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名“dropup”.使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可). <div class="btn-group dropup"> <button class=

Bootstrap系列 -- 34. 按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素.唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”. <div class="btn-group"> <button class=&quo

Bootstrap系列 -- 26. 下拉菜单标题

Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <sp

Bootstrap系列 -- 25. 下拉菜单分割线

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu

Bootstrap系列 -- 27. 下拉菜单对齐方式

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名. <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ty

Bootstrap系列 -- 28. 下拉菜单状态

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法只需要在对应的菜单项上添加对应的类名 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dro

Bootstrap历练实例:标签页内的下拉菜单

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:标签页内的下拉菜单</title> <meta charset="utf-8" /> <meta name="vie