bootstrap 中dropmenu不起作用
今天在使用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不起作用的更多相关文章
- bootstrap中table的colspan不起作用
bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...
- bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?
bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...
- bootstrap 中关于 HTML5 aria-* and role的用法
HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- SQLSERVER中NULL位图的作用
SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
随机推荐
- SqlServer中生成一串连续数字
在SQLServer中一串连续数字,如1,2,3,4,5,....或者 1 2 3 4 5 没有现成方法,网上都用通用表表达式递归生成.今天想到一个还算简单的方法,记录下来: select row_n ...
- 会写网页 就会写手机APP #2-- 范例修正 , Hybrid Mobile Apps for ASP.NET Developers (Apache Cordova)
原文出处:会写网页 就会写手机APP #2-- 范例修正 , Hybrid Mobile Apps for ASP.NET Developers (Apache Cordova) 这是我的文章备份 ...
- CodeForces 77C Beavermuncher-0xFF (树形dp)
不错的树形dp.一个结点能走多次,树形的最大特点是到达后继的路径是唯一的,那个如果一个结点无法往子结点走,那么子结点就不用考虑了. 有的结点不能走完它的子结点,而有的可能走完他的子节点以后还会剩下一些 ...
- Android(java)学习笔记121:BroadcastReceiver之 自定义广播
广播使用: 电台:对外发送信号.---------电台发送广播(可以自定义) 收音机:接收电台的信号.-----广播接收者 这里,我们就说明自定 ...
- 单核CPU并发与非并发测试
多线程运行程序的目的一般是提高程序运行效率并且能够提高硬件的利用率比如多核CPU,但是如果我们只有单核CPU并发运行程序会怎样呢? 我以两个环境作为对比: 环境A(我本机8c) 环境B(我的云服务器1 ...
- java用org.apache.poi包操作excel
一.POI简介 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API 目前比较成熟的是HSSF接口,处理MS Excel(97- ...
- TreeMap 底层是红黑树 排序是根据key值进行的 添加元素时异常 Comparable异常 Comparator比较自定义对象放在键的位置
package com.swift; import java.util.Comparator; import java.util.HashMap; import java.util.Iterator; ...
- cocos2dx 字体描边遇到的描边缺失的bug
在cocos中,设置字体描边可以用enableOutline(cc.c4b(30, 10, 0, 255), 2)函数设置,第一个参数是字体颜色,第二个参数是描边轮廓大小,单位是2个像素, 我在使用过 ...
- C# 调用腾讯地图WebService API获取距离(一对多)
官方文档地址:https://lbs.qq.com/webservice_v1/guide-distance.html 代码: /// <summary> /// 获取距离最近的点的经纬度 ...
- IntelliJ IDEA 配置 Tomcat 运行web项目
运行前提: 配置好 Java 的运行环境 配置好 Tomcat 安装 IntelliJ IDEA 开始 1.创建项目并配置 关于配置SDK,等建完项目再说 没有配置SDK的话 会出现下面的弹框,点击 ...