文章目录
- 往期回顾
-  BootStrap依赖于JavaScript的类库,JQuery下载 
-  下载JQuery,在界面上应用JQuery 
-  在页面上应用BootStrap和avaScript的类库【JQuery是avaScript的类库】 
JQuery的官网:
jQuery
- 如果要应用JQuery - 则要在body里面导入文件
 
- 则要在
<script src="/static/js/js.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
整体样例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 图标库  --><link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"><!-- 图标库  --><link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css"><!-- 开发版本  --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!-- 生产版本(压缩版)   --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"></head>
<body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><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" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><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><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><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><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><!-- js文件(3.7版本)  -->
<script src="/static/js/js.js"></script>
<!-- bootstrap的js动态效果文件  -->
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

往期回顾
1.【快速开发网站】
 2.【浏览器能识别的标签1】
 3.【浏览器能识别的标签2】
 4.【浏览器能识别的标签3】
 5.【浏览器能识别的标签4】
 6.【案例1:用户注册】
 7.【案例2:用户注册改进】
 8.【快速了解 CSS】
 9.【常用选择器概念讲解】
 10.【CSS基础样式介绍1】
 11.【CSS基础样式介绍2】
 12.【CSS基础样式介绍3】
 13.【CSS基础样式介绍3】
 14.【案例 小米商城头标】
 15.【案例 小米商城头标总结】
 16.【案例 小米商城二级菜单】
 17.【案例 商品推荐部分】
 18.【伪类简单了解】
 19.【position】
 20.【案例 小米商城中app图标代码】
 21.【边框及总结】
 22.【BootSrap初了解】
 23.【BootSrap的目录栏】
 24.【BootSrap的栅格系统】
 25.【案例 博客案例】
 26.【案例 登录】
 27.【案例 后台管理样例】
 28.【图标】