搭建⾃⼰的博客（七）：使⽤bootstrap框架美化导航栏
前⾯发现⾃⼰写css代码以及很多功能太⿇烦，故希望在⾃⼰的博客中引⼊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>发布⽇期：{{ ated_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>{{ t }}</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>{{ t|truncatechars:30 }}</p>
{% empty %}
<p>--暂⽆博客，敬请期待--</p>
{% endfor %}
jquery框架搭建{# 过滤器统计博客数量 #}
<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 %}
{{ pe_name }}
{% endblock %}
{# 内容#}
{% block content %}
<h3>标签名：{{ pe_name }}</h3>
{% for blog in blogs %}
<a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>        {#    添加过滤器⽂章太长时只显⽰前30个字符  #}
<p>{{ t|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，不然可能会出问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。