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

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

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

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

　　

  1.  <!DOCTYPE html>
  2.  <html >
  3.  <head>
  4.  <title>what页</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.  <link href="resource/css/bootstrap.css" rel="stylesheet" type="text/css" rel="stylesheet"/>
  8.  <link href="resource/css/what.css" rel="stylesheet" type="text/css" rel="stylesheet"/>
  9.  
  10.  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  11.  <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  12.  
  13.  </head>
  14.  <body>
  15.  <div class="navbar navbar-inverse navbar-fixed-top">
  16.    <div class="container">
  17.      <div class="navbar-header">
  18.        <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>
  19.        <a class="navbar-brand hidden-sm" href="http://www.bootcss.com">Bootstrap中文网</a> </div>
  20.      <div class="navbar-collapse collapse" role="navigation">
  21.        <ul class="nav navbar-nav">
  22.          <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap2中文文档<b class="caret"></b></a>
  23.            <ul class="dropdown-menu">
  24.              <li> <a href="http://v2.bootcss.com/getting-started.html" target="_blank">起步</a> </li>
  25.              <li> <a href="http://v2.bootcss.com/scaffolding.html" target="_blank">脚手架</a> </li>
  26.              <li> <a href="http://v2.bootcss.com/base-css.html" target="_blank">基本CSS样式</a> </li>
  27.              <li> <a href="http://v2.bootcss.com/components.html" target="_blank">组件</a> </li>
  28.              <li> <a href="http://v2.bootcss.com/javascript.html" target="_blank">JavaScript插件</a> </li>
  29.              <li> <a href="http://v2.bootcss.com/customize.html" target="_blank">定制</a> </li>
  30.            </ul>
  31.          </li>
  32.          <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap3中文文档<b class="caret"></b></a>
  33.            <ul class="dropdown-menu">
  34.              <li> <a href="http://v3.bootcss.com/getting-started/" target="_blank">起步</a> </li>
  35.              <li> <a href="http://v3.bootcss.com/css/" target="_blank">CSS</a> </li>
  36.              <li> <a href="http://v3.bootcss.com/components/" target="_blank">组件</a> </li>
  37.              <li> <a href="http://v3.bootcss.com/javascript/" target="_blank">JavaScript插件</a> </li>
  38.              <li> <a href="http://v3.bootcss.com/customize/" target="_blank">定制</a> </li>
  39.            </ul>
  40.          </li>
  41.          <li><a href="/p/lesscss/" target="_blank">Less 教程</a></li>
  42.          <li><a href="http://jquery.bootcss.com/" target="_blank">jQuery API</a></li>
  43.          <li><a href="http://expo.bootcss.com" target="_blank">网站实例</a></li>
  44.        </ul>
  45.        <ul class="nav navbar-nav navbar-right">
  46.          <li><a href="/about/">关于</a></li>
  47.        </ul>
  48.      </div>
  49.    </div>
  50.  </div>
  51.  
  52.  </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. vue 文件流下载xlsx 功能实现

    downLoadFile (url, name) { this.xhr = new XMLHttpRequest() this.xhr.open('GET', url, true) this.xhr. ...

  2. PAT (Basic Level) Practise （中文）- 1015. 德才论 (25)

    http://www.patest.cn/contests/pat-b-practise/1015 宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡 ...

  3. win10中打开SQL Server 2008 的SQL Server配置管理器方法

    win10找不到SQL Server配置管理器 搜索 SQLServerManager10.msc,或者运行文件:“C:\Windows\SysWOW64\SQLServerManager10.msc ...

  4. 【线性基】bzoj2844: albus就是要第一个出场

    线性基求可重rank 题目描述 给定 n 个数 $\{ a_i \}$ ,以及数 $x$. 将 $\{ a_i \}$​ 的所有子集(包括空集)的异或值从小到大排序,得到 $\{ b_i \} $. ...

  5. ubuntu14.04搭建LAMP环境(nginx,php,mysql,linux)详解

    最近更换开发环境至ubuntu,整理开发环境和常用软件的安装配置(更新排版) 以下安装过程经过多次操作得出,参照步骤进行操作即可 一.LAMP基本环境搭建 1 切换root账号 sudo su 2,安 ...

  6. vtigercrm安装

    vtigercrm是一个用户关系管理系统. 本以为安装只用半个小时就可以完成,结果花了两天时间.. 后来因为不想其他的因素影响,重新装了个纯净的系统.(系统为ubuntu16,安装过程略) 在系统基础 ...

  7. Vue实例和生命周期

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({ //选项 }) 数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加 ...

  8. python基本操作（四）

    与用户交互 为什么交互? 计算机取代人类,解放劳动力 如何交互 print('-'*100) input('请输入你的姓名:') print(""100) Python2和Pyth ...

  9. Python学习笔记：os模块和sys模块

    os模块 os.path.driname(path):返回当前路径的上一级路径字符串. os.path.basename(path):返回当前路径的目录名(文件夹名)或文件名(全称). os.path ...

  10. Linux学习-检验软件正确性

    md5sum / sha1sum / sha256sum 目前有多种机制可以计算文件的指纹码,我们选择使用较为广泛的 MD5, SHA1 或 SHA256 加密机 制来处理,我们拿NTP 软件来检查看 ...