Django学习第六课：共享模板及JavaScript及CSS

学习摘要

这一节课要学习的分为两个部分，一个是避免重复造轮子的共享模板，一个是导入Bootstrap的JavaScript及CSS，美化我们的网站。

共享模板

设计一个base.html的主模板，导入hearder.html,footer,html。等于是让hearder.html,footer,html分开设计。我们主要显示的文件index.html,post.html,则用extends指令继承base.html，以保持网页风格的执行
1.修改index.html文件

TIM截图20181124160033.png

2.创建和修改base.html文件

TIM截图20181124160041.png
3.创建和修改post.html
TIM截图20181124160049.png
4.创建和修改header.html
TIM截图20181124160056.png

5.创建和修改footer.html

TIM截图20181124160102.png

共享模板总结

完成了以上工作模板共享步骤就完成了，让我们看一下效果吧

TIM截图20181124153112.png

导入Bootstrap的JavaScript及CSS

1.在这一段代码里我们用
<div class ='row'></div>和<div class ='col-md-xx'></div>的搭配让左侧边栏占用4个格子，内文占用8个格子，接着在各自的各自中使用panel创建其内容。
2.在国内推荐使用一下链接

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

TIM截图20181124161634.png

3.按照Bootstrap修改base文件

TIM截图20181124162642.png

4.按照Bootstrap修改header文件

TIM截图20181124162654.png
5.下面两张图是base文件的完整代码截图
TIM截图20181124185344.png TIM截图20181124185357.png

6.看一下完成的效果图，心里是不是发觉不知不觉自己已经搞好了一个网站。

TIM截图20181124185406.png

总结

这其实也没有啥可总结的，建议各位读者看一下HTML 教程。下一节我们学习什么？下一节我们学习一下加图像文件的使用和文章摘要的制作。