基于Django的Blog 6.使用Bootstrap4

1.配置bootstrap4

1.1 下载BootStrap 4

https://getbootstrap.com/docs/4.1/getting-started/download/

然后在项目根目录下新建目录static/bootstrap/，用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件，就是静态文件。

把刚才解压出来的css和js两个文件夹复制进去。

因为bootstrap.ks依赖jquery.js和popper.js因此这两个文件我们也需要一并下载保存

现在我们的static/目录结构像这样：

my_blog
│
├─article
└─my_blog
│ ...
└─static
    └─bootstrap
    │   ├─css # 文件夹
    │   └─js # 文件夹
    └─jquery
    │   └─jquery-3.3.1.js # 文件
    └─popper
        └─popper-1.14.4.js # 文件

因为在Django中需要指定静态文件的存放位置，才能够在模板中正确引用它们。因此在settings.py的末尾加上

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'

2. 编写模板

在根目录下templates/中,新建三个文件:

base.html是整个项目的模板基础, 所有的网页都从它继承
header.html是网页顶部的导航栏
footer.html是网页底部的注脚

这三个文件在每个页面中通常不变,独立出来可以避免重复写入相同代码,提高维护性

现在templates\的结构像下面这个样子

templates
│
├─base.html
├─header.html
├─footer.html
└─article
    └─list.html # 上一章创建的

2.1 base.html

<!-- 载入静态文件 -->// 如果忘记load 则会报错Did you forget to register or load this tags?
{% load staticfiles %}

<!DOCTYPE html>
<!-- 网站主语言-->
<html lang="zh-cn">

<head>  // head标签内包含网页的元数据,不会显示在页面上
    <!-- 网站采用的字符编码 -->
    <meta charset="UTF-8">
    <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>

<body>  // 内容(会显示在页面上)
    <!-- 引入导航栏 -->
    {% include 'header.html' %}
    <!-- 预留具体页面的位置 -->
    {%block content %}{% endblock content %}
    <!-- 引入注脚 -->
    {% include 'footer.html' %}
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="{% static 'jquery/jquery-3.5.1.js %}"></script>
    <script src="{% static 'popper/popper.js' %}"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>

</html>

模板中要加上 {% load staticfiles %} 之后，才可使用 {% static 'path' %} 引用静态文件。
HTML语法中，所有的内容都被标签包裹；标签及标签中的属性可以对内容进行排印、解释说明等作用。
<head></head>标签内包含网页的元数据，是不会在页面内显示出来的。<body></body>标签内才是网页会显示的内容。
留意Bootstrap的css、js文件分别是如何引入的
jquery.js 和 popper.js 要在 bootstrap.js 前引入。

2.2 header.html

<!-- 定义导航栏-->  // 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
		// 商标会显示在左边, 如果没有商标 默认左边将会是文章
        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="#">我的博客</a>

        <!-- 导航入口 -->
        <div>
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    <a class="nav-link" href="#">文章</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

标签内的class属性是Bootstrap样式的定义方法。试着改写或删除其中一些内容，观察页面的变化。

2.3 footer.html

{% load staticfiles %}
<!-- Footer -->
<div>
    <br><br><br>
</div>
<!-- bg颜色  fixed-bottom 底部 如果删除就会显示在正中心 -->
<footer class="py-3 bg-dark fixed-bottom">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; www.sunnywillow.com 2020</p>
    </div>
</footer>

posted on 2020-07-05 20:54 sunnywillow 阅读(92) 评论(0) 收藏举报

刷新页面返回顶部

sunnywillow