用Django全栈开发——06. 为前端引入Bootstrap框

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。

Peekpa.com的官方地址：http://peekpa.com

上一篇文章，我们使用Gulp来搭建好我们前端开发的环境工程，那么这一篇，我们来说，如何在Django中集成Bootstrap。

环境准备

首页的编写，当然是HTML，CSS还有JavaScript的代码编写。如果不是专门搞前端的同学，在面对这几个东西混杂在一起的时候，心情是十分复杂的，因为他们这几个东西，虽然好入门，但是写起来其实很复杂，如果想要写好，写的高明，那更是得需要花费一大番功夫才能做得到，我在面对这几个东西的时候，我也是这种感受，但是，别怕，我为大家躺雷了。

首先，

我们在前端使用的CSS库为最新的Bootstrap 4.

官网地址：https://getbootstrap.com/
文档地址：https://getbootstrap.com/docs/4.3/getting-started/introduction/

根据官方文档里面的介绍，引入方法很简单，一种是直接在页面的Html的Header中加入引用资源路径；另一种也可以将源码下载下来，导入到工程中。

这里，我们为了方便省事儿，就按照第一种方式来做。

其次，

我们可以去Bootstrap的官网例子页面，去随便找一个例子。

官方用例地址：https://getbootstrap.com/docs/4.3/examples/

然后我们就挑选这个Album的例子：

001.png

在线地址为：https://getbootstrap.com/docs/4.3/examples/album/

其实扣代码很简单，我们打开用例的网页，在任意位置点击右键，查看网页源码就可以。

002.png

然后就会得到网页源码，长这个样子：

003.png

我们接下来需要做的，就是把全部网页源码ctrl+C，ctrl+V，复制黏贴到我们的Peekpa工程的index.html中即可。

然后我们重启Django服务器，查看8000端口的网页，发现长这个样子：

004.png

这个样子和原来的不一样啊，原因就在于，我们如果单纯的复制黏贴网页源码的话，那么网页的CSS文件可能未必会被导入，比如这个Album网页里面的CSS文件，就是以下代码：

....前面部分省略....
    <!-- Bootstrap core CSS -->
    <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          
....中间部分省略....

<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
        crossorigin="anonymous"></script>

....后面部分省略....

我们要做的只需要把这些部分导入就好，但是具体怎么导入呢？这个很简单。来到Bootstrap的文档页面，基本第一篇QuickStart里面介绍的，只需要在html文件的header标签里面添加scrapy标签就可以，文档地址：

<--CSS文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<-- JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

将这些文件导入到我们的index.html文件之后，我们的页面会变成这个样子：

005.png

就会发现，样子还是和官方的的不一样。

006.png

这是为啥呢？这里皮爷教大家一个小技巧，就是分辨查看两个页面不同地方有什么不一样：

007.png

就会发现官方有个叫album.css的东西，我们再看这个css的地址：https://getbootstrap.com/docs/4.3/examples/album/album.css

再返回头看index.html里面，就会发现我们的html会有这么一行代码：

<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">

这里就简单了，我们把上面的那个album.css文件路径替换到href中，就可以了：

<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.3/examples/album/album.css" rel="stylesheet">

这个时候再重新打开页面，就会发现两个页面一模一样。

008.png

好的，完美，这样就相当于走通了Bootstrap官方的用例。

总结一下，引入Bootstrap的方法，就是在header中，引入CSS文件路径：

<--CSS文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

在底部的Body之外，引入JavaScript文件:

<-- JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

好的，就是这么简单，下一节我们来说编写首页功能。

技术总结

最后总结一下，

Boostrap框架的引入：

1. Bootstrap是一款非常好用的开源CSS框架，可以通过简单的编写class属性，就能把页面布局的非常完美；
2. 引入框架主要有这么两种方法：cdn引入，或者把资源下载好打包到自己的网站项目里；
3. 注意css文件的缺失问题，一般发现样子不对的，基本都是缺失了CSS；
4. 完毕。

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。

title.jpeg