搭建自己的博客（七）：使用bootstrap框架美化导航栏
前面发现自己写css代码以及很多功能太麻烦，故希望在自己的博客中引入bootstrap框架，bootstrap是一个非常强大的前端框架，简单易学容易上手。附上官网地址：bootstrap官网
我使用的bootstrap版本是bootstrap4.1。
1、和之前一样先上变化的部分：
aaarticlea/png;base64,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" alt="" />
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，不然可能会出问题。
搭建自己的博客（七）：使用bootstrap框架美化导航栏的更多相关文章
- github+hexo搭建自己的博客网站（七）注意事项（避免read.me，CNAME文件的覆盖，手动改github page的域名）
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...
- 使用WordPress搭建自己的博客
突然间发现自己在阿里上有一个免费的虚拟云空间,好像是什么时候阿里云搞活动赠送的.看了看还有不少时间,就决定自己搭建一个博客系统.说到搭建自己的博客,第一时间就想到WordPress,这个用起来应该是最 ...
- 如何搭建一个独立博客——简明Github Pages与Hexo教程
摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...
- github+hexo搭建自己的博客网站（六）进阶配置(搜索引擎收录，优化你的url)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...
- 设计node.js搭建多人博客的思路（不讲数据库）
1.1.4:搭建多人博客 1.功能分析 搭建一个简单的多人注册,登录,发表文章及登出功能的博客 2.设计目标 未登录:主页左侧导航显示home.login.register,右侧显示已发表文章,发表日 ...
- 转--利用hexo搭建个人静态博客
引用地址 可谓图文并茂,可以配合 七牛云存储(做图片等文件服务器),搭建好看的个人博客 hexo 官方指导文档 主题 官网教程 问题集锦 简书 http://blog.csdn.net/wx_9624 ...
- 使用Docker快速搭建Halo个人博客到阿里云服务器上[附加主题和使用域名访问]
一.前言 小编买了一个服务器也是一直想整个网站,一直在摸索,看了能够快速搭建博客系统的教程.总结了有以下几种方式,大家按照自己喜欢的去搭建: halo wordpress hexo vuepress ...
- 一步步搭建自己的博客 .NET版（2、评论功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 基于hexo+github搭建一个独立博客
一直听说用hexo搭建一个拥有自己域名的博客是很酷炫的事情~,在这十一花上半个小时整个hexo博客岂不美哉. 使用Hexo吸引我的是,其简单优雅, 而且风格多变, 适合程序员搭建个人博客,而且支持多平 ...
随机推荐
- 处理ajax数据；数据渲染（细节）
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通 ...
- linux查看系统未被挂载的磁盘空间的方法
原文URL:https://www.cnblogs.com/lemon-flm/p/7597403.html 解决AWS 挂载.解决挂载完重启就消失等问题 linux上的盘和window的有区别,磁盘 ...
- Singer House CodeForces - 830D (组合计数,dp)
大意: 一个$k$层完全二叉树, 每个节点向它祖先连边, 就得到一个$k$房子, 求$k$房子的所有简单路径数. $DP$好题. 首先设$dp_{i,j}$表示$i$房子, 分出$j$条简单路径的方案 ...
- 面试题目<转载>
1:检测一个变量是否有设置的函数是否?是否为空的函数是?(2分) 2:echo(),print(),print_r()的区别(3分) 3:表单中 get与post提交方法的 ...
- vue 百度云上传文件PostObject
百度云上传文件 API(PostObject) PostObject接口 : 接口描述 此接口使用HTML表单上传文件到指定bucket,用于实现通过浏览器上传文件到bucket.在PutObjec ...
- PHP 的闭包
匿名函数 提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: 1 $func = function() { 2 3 }; //带结 ...
- 本文可能是国内第一篇介绍C/4HANA Foundation的中文博客
SAP C/4HANA从去年发布已经过去了一年多的时间,C/4HANA的从业者,对于这五朵云里包含的产品集,想必都有了一些了解. Jerry注意到,SAP C/4HANA Foundation这个概念 ...
- Windows Server 2008 用户管理
默认用户和组 默认用户 默认只有来宾用户(Guest)和管理员(Administrator) 默认组 创建账户 图形界面创建用户 创建用户选项解析 对于公司新员工,分配给他的电脑,应该让其有一定的自主 ...
- 【转】通过BeanNameAutoProxyCreator改变臃肿代码
https://www.cnblogs.com/zdd-java/p/7861824.html 前言: 最近接手了一个项目,大概过了下需求,然后打开项目准备开搞的时候发现一个问题,这个项目是提供res ...
- element-ui 限制只能输入number
element-ui <el-form-item label="大于等于:"> <el-input @keyup.native="number" ...