搭建自己的博客（七）：使用bootstrap框架美化导航栏
前面发现自己写css代码以及很多功能太麻烦，故希望在自己的博客中引入bootstrap框架，bootstrap是一个非常强大的前端框架，简单易学容易上手。附上官网地址：bootstrap官网
我使用的bootstrap版本是bootstrap4.1。
1、和之前一样先上变化的部分：
2、解释：
图中红色的文件是bootstrap4.1版本需要的文件。
bootstrap4.1文件下载：下载地址
3、变化文件内容：
body, * {
margin: 0;
padding: 0;
}
{# 引用模板 #}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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>
{% 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 %}
4、注意点梳理
bootstrap框架是个很好的框架，需要多查文档---》官方文档
使用bootstrap的时候js文件的引入顺序一定是jQuery->Popper.js-> Bootstrap，不然可能会出问题。
浙公网安备 33010602011771号