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

最新推荐文章于 2023-09-24 11:46:02 发布

weixin_30740581

最新推荐文章于 2023-09-24 11:46:02 发布

阅读量720

点赞数

文章标签：前端框架 javascript ViewUI

原文链接：http://www.cnblogs.com/felixwang2/p/9926037.html

版权

前面发现自己写css代码以及很多功能太麻烦，故希望在自己的博客中引入bootstrap框架，bootstrap是一个非常强大的前端框架，简单易学容易上手。附上官网地址：bootstrap官网

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

1、和之前一样先上变化的部分：

2、解释：

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

bootstrap4.1文件下载：下载地址

3、变化文件内容：

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

4、注意点梳理

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

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

转载于:https://www.cnblogs.com/felixwang2/p/9926037.html

weixin_30740581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搭建自己的博客（七）：使用bootstrap框架美化导航栏

前面发现自己写css代码以及很多功能太麻烦，故希望在自己的博客中引入bootstrap框架，bootstrap是一个非常强大的前端框架，简单易学容易上手。附上官网地址：bootstrap官网我使用的bootstrap版本是bootstrap4.1。1、和之前一样先上变化的部分：2、解释：图中红色的文件是bootstrap4.1版本需要的文件。bootstrap4.1文件下载...
复制链接

扫一扫