Bootstrap下拉菜单

原创 2013年12月03日 22:26:42

很简单的方法,加载bootstrap的js执行dropdown的方法就可以。相关的js文件可以到我的资源里面下载学习。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap下拉菜单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<body>
<ul class="nav nav-pills">
  <li><a href="#">规则的链接</a></li>
  <li class="dropdown" id="menutest1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1"> 下拉项 <b class="caret"></b> </a>
    <ul class="dropdown-menu">
      <li><a href="#">动作1</a></li>
      <li><a href="#">动作2</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">被间隔的链接</a></li>
    </ul>
  </li>
  <li class='active'> <a data-toggle="dropdown" href="#menutest1">点击我看看</a> </li>
</ul>
</body>
</html>


Bootstrap插件dropdown源码的学习

使用方法 有含有"dropdown"类的容器里面包含下拉触发器(按钮,或链接等),和下拉框的内容 下拉触发器必须包含"data-toggle=dropdown"的属性。可以用data-target...
  • learninginJAVA
  • learninginJAVA
  • 2015年10月18日 22:35
  • 2049

bootstrap下拉菜单与滚动监视器学习笔记(2-1 下拉菜单(Dropdown))

插件对应的源文件:dropdown.js(使用单独引入的方法可使用下面链接) 官方发布引用地址:http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstr...
  • hellochenlu
  • hellochenlu
  • 2015年12月23日 15:05
  • 372

Bootstrap组件之下拉菜单

.dropdown——设置父元素为下拉菜单组件,向下弹出子菜单; .dropup——设置父元素为下拉菜单组件,向上弹出子菜单; .dropdown-toggle——设置按钮为下拉菜单切换按钮; ...
  • bboyjoe
  • bboyjoe
  • 2015年07月28日 00:15
  • 3191

Bootstrap下拉菜单使用方法

如何使用Bootstrap下拉菜单组件 Bootstrap下拉菜单组件使用起来非常容易,首先你需要定义一个class="dropdown"的div,然后在这个div标签中写入触发下拉框的按钮以及...
  • u012238748
  • u012238748
  • 2017年01月16日 14:52
  • 2826

Bootstrap 插件

Bootstrap 插件   1、Bootstrap 过渡效果(Transition)插件      过渡效果(Transition)插件提供了简单的过渡效果。如果您想要单独引用该插件的功能,那...
  • qq_27626333
  • qq_27626333
  • 2016年07月17日 11:52
  • 2882

仿手机QQ下拉菜单框架(FFDropDownMenu) -- 基本使用

最近写了这个框架: FFDropDownMenu,类似手机QQ下拉菜单。 github地址: https://github.com/chenfanfang/FFDropDownMenu 更多的使...
  • qq_30513483
  • qq_30513483
  • 2016年08月10日 08:38
  • 1127

Bootstrap在导航栏上用下拉菜单并保持对齐

Bootstrap简直就是前速成的宝典尽管bootstrap很牛逼,但是在实际运用中还是会有一些问题,比如: 出现了不对齐的情况,我们看看代码: ...
  • tydyz
  • tydyz
  • 2017年07月25日 20:07
  • 812

Bootstrap导航栏和下拉菜单

导航栏写法示例: IT
  • tydyz
  • tydyz
  • 2017年07月25日 22:07
  • 408

下拉菜单触发方式设计案例

翔宇 2017-03-28 09:23 下拉菜单提供了两种触发方式来显示:声明式触发和JavaScript触发。下拉菜单在Bootstrap中依赖于dropdown.js,我们既可以到GitHub上...
  • u011277123
  • u011277123
  • 2017年04月18日 17:44
  • 463

(翻译)垂直下拉菜单(Vertical Dropdown Menu)

问题概述   用户需要在网站的各个模块间导航,但是网页中显示导航信息的空间有限。 用途 -用于当网站包含2~9个模块,需要分级导航结构时; -当网站功能设计与桌面应用程序类似时,菜单...
  • gc_2299
  • gc_2299
  • 2018年01月17日 22:34
  • 12
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)