前面发现自己写css代码以及很多功能太麻烦，故希望在自己的博客中引入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 %}    
{
    { blog.title }}
    
作者：{
    { blog.author }}
    {
     # 时间过滤器让时间按照自己需要的格式过滤 #}    
发布日期：{
    { blog.created_time|date:"Y-m-d H:n:s" }}
    
分类：                    {
     { blog.blog_type }}            
    
{
    { blog.content }}
{
     % endblock %}{
     % block js %}    {
     % endblock %}

{% extends 'base.html' %}{
     # 标题 #}{% block title %}    felix Blog{
     % endblock %}{
     # 内容#}{% block content %}    {
     % for blog in blogs %}        
{
    { blog.title }}        {
     #    添加过滤器 文章太长时只显示前30个字符  #}        
{
    { blog.content|truncatechars:30 }}
    {
     % empty %}        
--暂无博客，敬请期待--
    {
     % endfor %}    {
     # 过滤器统计博客数量 #}    
一共有{
    { blogs|length }}篇博客
{
     % endblock %}{
     % block js %}    {
     % endblock %}

{% extends 'base.html' %}{
     # 标题 #}{% block title %}    {
     { blog_type.type_name }}{
     % endblock %}{
     # 内容#}{% block content %}    
标签名：{
    { blog_type.type_name }}
    {
     % for blog in blogs %}        
{
    { blog.title }}        {
     #    添加过滤器 文章太长时只显示前30个字符  #}        
{
    { blog.content|truncatechars:30 }}
    {
     % empty %}        
--暂无博客，敬请期待--
    {
     % endfor %}    {
     # 过滤器统计博客数量 #}    
一共有{
    { blogs|length }}篇博客
{
     % endblock %}{
     % block js %}    {
     % endblock %}

{% load staticfiles %}    
          
          
              {
     # 加载css代码 #}    
          
          {
     % block header_extends %}        {
     #    用来做头部扩展，如加载某些静态文件     #}    {% endblock %}{
     # 导航栏 #}
      
    
       Felix Blog    
                       
       
        
        
            
         
首页
            
         
博客
        
        
    
       
      
{
     # 用来放内容 #}{% block content %}{
     % endblock %}{
     # js代码放在后面可以增加性能 #}
      {
     # 导入资源建议放在js代码前 #}{
    # 用来放js代码 #}{% block js %}{
     % endblock %}

{% extends 'base.html' %}{
     % load staticfiles %}{
     % block header_extends %}    
      {
     % endblock %}{
     % block title %}    我的博客|首页{
     % endblock %}{
     % block content %}    
欢迎访问我的博客
{
     % endblock %}{
     % block js %}    {
     # 将首页这个按钮设置激活状态 #}    {
     % endblock %}

4、注意点梳理

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

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