个人网站搭建（Day 9）— Bootstrap4 相关问题

我们这个网站项目是基于 django + bootstrap 框架搭建的，其中的 bootstrap 是美国Twitter公司推出的基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

在django 中使用bootstrap很简单，使用 pip install django-bootstrap4 下载安装，并将 bootstrap4 添加到 INSTALLED_APPS 中，在对应的html页面中添加  {% load bootstrap4 %} 即可。

bootstrap 目前有数个版本，用的比较多的是 bootstrap3 与 bootstrap4，但是在实际使用的过程中作者发现 django-bootstrap3 与 django-bootstrap4 这两个包在部署到服务器后会出现冲突的情况，导致访问页面时出现 500 的错误，目前未能够解决，如果有解决这个问题的办法请联系作者（suzh9@mail2.sysu.edu.cn） ，非常感谢。

我们在该项目中使用的是 django-bootstrap4，详细的使用方法可以参考 Bootstrap中文网 以及 Bootstrap—菜鸟教程，除此之外，很多在线网站提供了 bootstrap可视化设计的功能，具体参考 bootstrap UI 编辑器， 推荐使用 Bootstrap可视化布局系统。但是发现布局在本地的网页上应用的时候会有所差别，需要进一步的研究。

bootstrap3 与 bootstrap4 的区别不是很大，但是有些地方还是需要注意的，下面会简单说一下我踩过的坑，希望对大家有所帮助。

 

1.Bootstrap加载jquery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。如果我们使用bootstrap中没有加载jQuery的话则会出现部分js工具无法使用。

配置的方法如下：在Schnee/settings.py中添加以下代码（注意对应不同的bootstrap版本，有点坑）：

BOOTSTRAP4 = {
    'include_jquery': True,
}

 

2.Bootstrap4中的图标问题

在引入原来的 Lenote 项目的 users 的邮箱功能的时候，作者发现出现了图标缺失的情况，经检查发现在stackoverflow上有如下说明

原来是Bootstrap3中的 Glyphicons 字体图标 在Bootstrap中被移除了，需要使用类似于 Linearicons 等外部图标库，但是如果我们还是需要使用原来的 Glyphicons字体图标 该怎么办呢？

参考博客 bootstrap4中的图标Glyphicons在Angular5项目中应用问题 中提出了这样一个方法：自己动手修改 bootstrap.css 文件，将图标的相关代码添加进去，同时设置依赖的图标字体文件。

 

具体步骤：

1. 从bootstrap3的库中将 glyphicons-.eot、glyphicons-.ttf、glyphicons-*.svg 这三个文件复制到对应目录的static/font/文件夹下。

                            

2. 将下面长长的代码添加到 static/css/bootstrap.css 的末尾（注意：如下代码依赖glyphicons-.eot、glyphicons-.ttf、glyphicons-*.svg 文件）

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
    content: "\002a";
}

.glyphicon-plus:before {
    content: "\002b";
}

.glyphicon-euro:before,
.glyphicon-eur:before {
    content: "\20ac";
}

.glyphicon-minus:before {
    content: "\2212";
}

.glyphicon-cloud:before {
    content: "\2601";
}

.glyphicon-envelope:before {
    cont