Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

基于BootStrap的网页前端

在进行博客搭建的之前,我发现以前学的那点html+css基础根本不够用,本想找开源前端,发现都不是自己想要的,在朋友圈说:谁能帮我写个前端调侃一下,结果就有好多朋友来给我推荐这个叫BootStrap的框架,所以就先花两天半的时间学习一下这个。

使用框架的前期准备

前往BootStrap中文网(不是中文网也行)

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

点击下载按钮

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

选择第二个:下载源码

下载完毕之后,会在桌面生成一个叫bootstrap的文件夹

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

我们需要的文件都在dist文件夹里面

在pycharm里的操作

在项目文件夹里创建一个名为static的文件夹,在此之前需要去setting.py引入

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

然后在static文件夹里创建一个css文件夹,一个js文件夹

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

打开bootstrap>dist>css,找到bootstrap.min.css

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

复制粘贴进pycharm刚创建的css文件夹里,顺便找到bootstrap.min.js和jquery.min.js导入js文件夹里

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

引入需要在头部添加这句话

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

在html尾部添加这两句,注意:jquery需要比js先引入

此时运行会发现报错,为什么呢?

因为我们没有在html引入static静态文件!!

如图:

Django个人博客搭建--3--pycharm上使用html前端BootStrap框架

这句话的前提是我们有static文件,并且在setting里有配置