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

2018-11-25 本文已影响0人乐乐V9

学习摘要

这一节课要学习的分为两个部分，一个是避免重复造轮子的共享模板，一个是导入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>