今天在使用bootstrap发现dropmenu一直不起作用，代码是从官网拷贝过来。

网上查找可以用的页面进行一点点的去除分析，发现竟然是顺序反了导致的。

在使用dropmenu时需要引入jquery.js。而且引入的路径需要在boostrap.js前面。放在后面则不起作用

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

　　

 <!DOCTYPE html>

 <html >

 <head>

 <title>what页</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 <link href="resource/css/bootstrap.css" rel="stylesheet" type="text/css" rel="stylesheet"/>

 <link href="resource/css/what.css" rel="stylesheet" type="text/css" rel="stylesheet"/>

 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 </head>

 <body>

 <div class="navbar navbar-inverse navbar-fixed-top">

   <div class="container">

     <div class="navbar-header">

       <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

       <a class="navbar-brand hidden-sm" href="http://www.bootcss.com">Bootstrap中文网</a> </div>

     <div class="navbar-collapse collapse" role="navigation">

       <ul class="nav navbar-nav">

         <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap2中文文档<b class="caret"></b></a>

           <ul class="dropdown-menu">

             <li> <a href="http://v2.bootcss.com/getting-started.html" target="_blank">起步</a> </li>

             <li> <a href="http://v2.bootcss.com/scaffolding.html" target="_blank">脚手架</a> </li>

             <li> <a href="http://v2.bootcss.com/base-css.html" target="_blank">基本CSS样式</a> </li>

             <li> <a href="http://v2.bootcss.com/components.html" target="_blank">组件</a> </li>

             <li> <a href="http://v2.bootcss.com/javascript.html" target="_blank">JavaScript插件</a> </li>

             <li> <a href="http://v2.bootcss.com/customize.html" target="_blank">定制</a> </li>

           </ul>

         </li>

         <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap3中文文档<b class="caret"></b></a>

           <ul class="dropdown-menu">

             <li> <a href="http://v3.bootcss.com/getting-started/" target="_blank">起步</a> </li>

             <li> <a href="http://v3.bootcss.com/css/" target="_blank">CSS</a> </li>

             <li> <a href="http://v3.bootcss.com/components/" target="_blank">组件</a> </li>

             <li> <a href="http://v3.bootcss.com/javascript/" target="_blank">JavaScript插件</a> </li>

             <li> <a href="http://v3.bootcss.com/customize/" target="_blank">定制</a> </li>

           </ul>

         </li>

         <li><a href="/p/lesscss/" target="_blank">Less 教程</a></li>

         <li><a href="http://jquery.bootcss.com/" target="_blank">jQuery API</a></li>

         <li><a href="http://expo.bootcss.com" target="_blank">网站实例</a></li>

       </ul>

       <ul class="nav navbar-nav navbar-right">

         <li><a href="/about/">关于</a></li>

       </ul>

     </div>

   </div>

 </div>

 </body>

运行测试

bootstrap 中dropmenu不起作用的更多相关文章

  1. bootstrap中table的colspan不起作用

    bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...

  2. bootstrap 中是通过写less文件来生成css文件，用什么工具来编写呢？

    bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...

  3. bootstrap 中关于 HTML5 aria-* and role的用法

    HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...

  4. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  5. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  6. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  7. SQLSERVER中NULL位图的作用

    SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...

  8. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  9. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

随机推荐

  1. HDU 3592 World Exhibition （差分约束，spfa，水）

    题意: 有n个人在排队,按照前后顺序编号为1~n,现在对其中某两人的距离进行约束,有上限和下限,表示dis[a,b]<=c或者dis[a,b]>=c,问第1个人与第n个人的距离最多可能为多 ...

  2. 【转载】Python实现图书馆预约功能

    注释: 1,原博主是:http://blog.csdn.net/cq361106306/article/details/42644001# 2,学校是我现在的学校,我最近也在研究这个,所以转了. 3, ...

  3. C基础的练习集及测试答案（1-15）

    练习题:注:标有(课堂)字样的为课上练习,其他为课下练习基础题(50题)1.(课堂)编写程序,输出“XXX欢迎来到动物园!”(XXX是自己的名字). //1.(课堂)编写程序,输出“XXX欢迎来到动物 ...

  4. python基础教程总结4—基本语句

    一.print 和 import 的更多信息 print 打印多个表达式也是可行的,只要将它们用逗号隔开就好: >>> print('Age:' , 42) Age: 42 可以看到 ...

  5. spring security 2.x HttpSessionEventPublisher 以及listener配置

    在环境为spring security2.x时 *JDK6 spring 2* 正确的filter路径是:org.springframework.security.ui.session.HttpSes ...

  6. 字符串转换JSON 的方法

    function (sJSON) { if (window.JSON) { return window.JSON.parse(sJSON); } else { return eval('(' + sJ ...

  7. C++内存溢出和内存泄漏?

    1.内存溢出 内存溢出是指程序在申请内存时没有足够的内存空间供其使用.原因可能如下: (1)内存中加载的数据过于庞大: (2)代码中存在死循环: (3)递归调用太深,导致堆栈溢出等: (4)内存泄漏最 ...

  8. 多线程编程之pthread线程深入理解

    不同的平台和操作系统上 进程和线程的实现机制不完全一致  但是一般来说线程栈都是独立的 只要得到地址就可以相互访问       Pthread是 POSIX threads 的简称,是POSIX的线程 ...

  9. （69）zabbix监控惠普打印机

    假设公司有多个楼层或者分布在不同楼,打印机自然分布很广泛,打印机缺少油墨或者卡纸了,都需要员工找IT部门.我们使用zabbix对打印机进行监控,一旦缺少油墨,zabbix发出报警,it人员能够及时更换 ...

  10. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...