本篇练习源码gitee
Bootstrap
Bootstrap3下载链接：
链接：https://pan.baidu.com/s/1OPtxVDHEgW5rdH4eMw6OKw
提取码：r99j
或者去官网下载：https://v3.bootcss.com/getting-started/#download
下载完解压就可以了
接下来就是使用了
我在templates里面在新建一个HTML，命名mytemplates
这里先来看下CDN
这部分代码可以直接复制使用（现成通用的）
直接把CDN的内容粘贴过来就行
StackPath 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可。
另外integrity后面这些东西是可以不要的，可以把这些无关的东西删掉
最后的结果就是这样了
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
这样就算是给它引入进来了，后面就直接可以网上填加东西了
然后看下是如何往上添加东西的，在官网可以看到他有很多css样式、组件和JS插件
CSS样式就是他提供了很多东西我这边是直接可以拿过来用的
来看下CSS的样式内容概括
拿按钮来举例
点击进去直接复制代码执行就是上面的效果
把这段代码放到body里面就可以了
然后就是老套路了，写视图，配路由，巴拉巴拉。。。
老生常谈，来看views，定义一个视图函数
def mytemplate(request):
return render(request, 'mytemplate.html')
然后配路由
运行看一下效果：
nice！！！
也可以通过修改它的样式，像这样
再运行一下子
这不是结束，这只是个开始，会用就行，继续往下走
下面看下分页的部分操作，这块在插件里面
这块还是和上面的按钮一样，已经写好的，可以直接粘过来用的
这里还是直接放到body里面
这里我想做的事点击每页的按钮展示不同的电影名称
首先回到视图里先把电影名称关联上
然后回到HTML文件
在这里放个div，就相当于一个容器，在这里面写这一页里包含的东西
先给这个容器起个名字id=box
再定义它的样式（style：宽高颜色）
然后运行下看下效果：
接下来就开始写点击事件
先看下这里，这里放的就是按钮
就相当于我点击不同的按钮，会走不同的路由
这里就需要设置路由传参了
第一种办法可以在路由里面通过int:page实现
path('mytemplate/<int:page>', mytemplate, name='mytemplate'),
这个就需要在视图里传一个page去接收它了
第二种方法就是用get传参，这样的话路由不用变
使用request.GET.get()
继承（block、extents）
block和extents用于模板继承
首先我得需要有一个模板，才能让别的模板去继承这个模板
这里新起一个HTML，通常叫它base
模板页面经常要去实现的是一些公共的部分，这个是base.html的任务，base这个模板搭建好之后要让别的模板去使用，这里就要用到继承了。用继承之前需要把模板里面的各种东西先做好
就拿导航做个例子，就这个
比如我把这个当行作为我的首页使用
这里我想用Booststrap,我需要先把BootCND引用过来
就是这部分，还是放在title下面
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
因为它是写在base下的，所以谁继承base，谁就相当于拥有了它们
简单说就是模板里面的东西谁继承谁就有
然后需要把导航栏它写好的那一大坨代码复制粘贴到base.html的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>
另外，HTML点击上面那个小Google图标是可以在浏览器预览的
在这里可以自己根据需要对样式进行修改
下面的Link、Dropdown也是一样，这里我就一次性改了
再建一个HTML文件用来继承base
另外，如果要继承base里面的东西那么我新建的这个HTML文件里面的标签是不可以存在的，因为继承的base.html文件里已经存在这些东西了，所以在welcome.html里的标签需要全部删掉
通过{% extends ‘base.html’ %}去继承base里的东西
然后再视图页面写个欢迎页
# 欢迎页
def welcome(request):
return render(request, 'welcome.html')
接下来写路由
path('welcome', welcome, name='welcome'),
这时候启动项目就已经引用过来了
接下来看下如何在welcome里面加自己的东西
想要在welcome里面添加自己的东西必须现在base里面预留空位，然后在welcome里面去填充这些空位即可
预留空位=挖坑
来看下怎么挖坑
一般用{% block %}
比如title
挖坑前：
挖坑后：
然后在welcome里面去继承这个坑，填坑
这里就变成欢迎页面了
看下预留其他坑位
继续。。。
如果想放一个按钮点击有反应，比如商城的介入购物车这些那就要往下看了。。。
首先就需要在div里面加个button按钮了
既然有按钮了，那就需要给它加一个单击事件（让它能被点击），
这里需要给它加一个js的脚本了，前面已经挖过坑了（myjs），这里直接继承就好了
如果点击没反应那就把base里面的{% block myjs %}{% endblock %}放到最下面，因为代码都是自上往下执行的
看效果：
模板（base）中需要把所有要用到的block都提前预留出来，并且自己不要弄混了，先去继承模板，然后再一个一个的往里填充需要的东西
最后看下图标是怎么加进去的，拿点赞量来举例
在视图里加个content，num=1000
这种图标都是直接加在span标签上去使用的
看下span标签
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
这里给它起个名字叫love。然后加个样式
这里要让num（点赞数）改变需要引入jquery cdn
https://www.bootcdn.cn/jquery/
这里需要用到js脚本，本人才疏学浅，不太会，找了个现成的拿来用的😁
1570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
