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里有配置