搭建本身的博客（七）：使用bootstrap框架美化导航栏

时间 2019-12-10

标签搭建本身博客使用 bootstrap 框架美化导航栏目 Bootstarp 繁體版

原文原文链接

前面发现本身写css代码以及不少功能太麻烦，故但愿在本身的博客中引入bootstrap框架，bootstrap是一个很是强大的前端框架，简单易学容易上手。附上官网地址：bootstrap官网css

我使用的bootstrap版本是bootstrap4.1。html

一、和以前同样先上变化的部分：前端

二、解释：jquery

图中红色的文件是bootstrap4.1版本须要的文件。bootstrap

bootstrap4.1文件下载：下载地址前端框架

三、变化文件内容：框架

body, * {
    margin: 0;
    padding: 0;
}

base.css

{# 引用模板 #}
{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    {{ blog.title }}
{% endblock %}

{# 内容#}
{% block content %}
    <h3>{{ blog.title }}</h3>
    <p>做者：{{ blog.author }}</p>
    {# 时间过滤器让时间按照本身须要的格式过滤 #}
    <p>发布日期：{{ blog.created_time|date:"Y-m-d H:n:s" }}</p>
    <p>分类：
        <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
            {{ blog.blog_type }}
        </a>
    </p>
    <p>{{ blog.content }}</p>
{% endblock %}

{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_detail.html

{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    felix Blog
{% endblock %}

{# 内容#}
{% block content %}
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加过滤器 文章太长时只显示前30个字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暂无博客，敬请期待--</p>
    {% endfor %}
    {# 过滤器统计博客数量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}


{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_list.html

{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{# 内容#}
{% block content %}
    <h3>标签名：{{ blog_type.type_name }}</h3>
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加过滤器 文章太长时只显示前30个字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暂无博客，敬请期待--</p>
    {% endfor %}
    {# 过滤器统计博客数量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}


{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_with_type

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 根据屏幕自动响应布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        {#  用来放标题  #}
        {% block title %}

        {% endblock %}
    </title>
    {# 加载css代码 #}
    <link rel="stylesheet" href="{% static 'bootstrap4.1/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">

    {% block header_extends %}
        {#    用来作头部扩展，如加载某些静态文件     #}
    {% endblock %}
</head>
<body>

{# 导航栏 #}
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="{% url 'home' %}">Felix Blog</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item nav-home"><a href="{% url 'home' %}" class="nav-link">首页</a></li>
            <li class="nav-item nav-blog"><a href="{% url 'blog_list' %}" class="nav-link">博客</a></li>
        </ul>
    </div>

</nav>

{# 用来放内容 #}
{% block content %}

{% endblock %}

{# js代码放在后面能够增长性能 #}
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'bootstrap4.1/popper.min.js' %}"></script>
<script src="{% static 'bootstrap4.1/bootstrap.min.js' %}"></script>

{# 导入资源建议放在js代码前 #}
{# 用来放js代码 #}
{% block js %}

{% endblock %}


</body>
</html>

base.html

{% extends 'base.html' %}
{% load staticfiles %}


{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}

{% block title %}
    个人博客|首页
{% endblock %}


{% block content %}
    <h1 class="home-content">欢迎访问个人博客</h1>
{% endblock %}

{% block js %}
    {# 将首页这个按钮设置激活状态 #}
    <script>
        $(".nav-home").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

home.html

四、注意点梳理ide

bootstrap框架是个很好的框架，须要多查文档---》官方文档布局

使用bootstrap的时候js文件的引入顺序必定是jQuery->Popper.js-> Bootstrap，否则可能会出问题。
性能