下载了bootstrap以后,最关键的文件夹,就是dist,基础使用只要引入这里面的文件就可以
解决了两个晚上了。目标:一个下拉菜单,其实是<a>,点了以后,下面就是菜单,本来是要放在页头的导航栏里面的,但是,引用了以后,没有反应
要引用的包,基本的有
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
这里要特别说明一下,
第一,在idea里面建立了静态工程,这个工程下面直接建立html,然后放dist目录,这样就可以使用了。
第二, src="dist/js/bootstrap.min.js",不能写成src="/dist/js/bootstrap.min.js",因为是相对路径
第三,jquery-1.9.1.min.js,不需要改成jquery.min.js,也是可以的
第四,如果这样还是不能得到下拉菜单,可能就是hmtl有问题,之前没有注意这个问题
第五,虽然这里只要引入这3个文件就可以了,其实还有其它东西,可以引用,只是这里不需要,要引用其它东西,就只能继续学习
完整的hmtl如下:
<!DOCTYPE html>
<html>
<head>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</body>
</html>
解决了两个晚上了。目标:一个下拉菜单,其实是<a>,点了以后,下面就是菜单,本来是要放在页头的导航栏里面的,但是,引用了以后,没有反应
要引用的包,基本的有
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
这里要特别说明一下,
第一,在idea里面建立了静态工程,这个工程下面直接建立html,然后放dist目录,这样就可以使用了。
第二, src="dist/js/bootstrap.min.js",不能写成src="/dist/js/bootstrap.min.js",因为是相对路径
第三,jquery-1.9.1.min.js,不需要改成jquery.min.js,也是可以的
第四,如果这样还是不能得到下拉菜单,可能就是hmtl有问题,之前没有注意这个问题
第五,虽然这里只要引入这3个文件就可以了,其实还有其它东西,可以引用,只是这里不需要,要引用其它东西,就只能继续学习
完整的hmtl如下:
<!DOCTYPE html>
<html>
<head>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</body>
</html>