Djangoweb开发系列（六）前端页面之Bootstrap

一前言

在上节已经了解到，使用模板语法可以实现把后台返回的动态数据渲染到前端页面，但这个页面太单调、没有css的装扮，可能丑的不忍直视。而css\js相对于后端开发人员来说，可能写起来又不太顺手或者经验匮乏，如果没有专业的前端人员配合，最好的方法就是引入现成的前端css框架，Bootstrap就是最好的css框架之一。

创新互联公司-专业网站定制、快速模板网站建设、高性价比丽江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式丽江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖丽江地区。费用合理售后完善，十年实体公司更值得信赖。

二 Django项目引入Bootstrap

1）下载Bootstrap 从https://v3.bootcss.com/getting-started/#download下载Bootstrap，选择用于生产环境的Bootstrap下载即可； 2）配置Bootstrap路径解压下载后的Bootstrap并放在Django的static目录（新建用于专门存放静态文件），然后在settings.py配置路径，如：

STATIC_URL = '/static/'STATICFILES_DIRS = [    os.path.join(BASE_DIR, "static"),

3） HTML引入Bootstrap CSS：

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

JS:

<script src="/static/bookms/js/jquery-3.3.1.min.js"></script><script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注意：Bootstrap依赖JQuery，所以需要引入。

三 Bootstrap的作用

如果是第一次接触Bootstrap，可能会疑惑它是个什么玩意儿？为什么要用它呢？ Bootstrap是Twitter推出的一款前端测试框架，通俗的将，它封装了很多漂亮、高大上的控件，通过在html中使用控件的类名就能引入封装的控件，让页面显得漂亮起来。另外，这样的页面是响应式布局，一次编写就能自动适配PC、手机、平板等设备。站在巨人的肩膀上，是不是顿时觉得轻松很多。