Django web开发系列(六)前端页面之引导

  

一前言

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

二Django项目引入引导

1)下载引导   从https://v3.bootcss.com/getting-started/下载下载引导,选择用于生产环境的引导下载即可;   2)配置引导路径   解压下载后的引导并放在Django的静态目录(新建用于专门存放静态文件),然后在设置。py配置路径,如:

STATIC_URL=STATICFILES_DIRS=[os.path/静态/<尤?BASE_DIR“静态”),

3) HTML引入引导   CSS:

& lt;链接rel="样式表" href=" https://www.yisu.com/static/bootstrap-3.3.7-dist/css/bootstrap.min.css "在

JS:

& lt;脚本src=" https://www.yisu.com/static/bookms/js/jquery-3.3.1.min.js "祝辞& lt;/script> & lt;脚本src=" https://www.yisu.com/static/bootstrap-3.3.7-dist/js/bootstrap.min.js "祝辞& lt;/script>

<强>注意:引导依赖JQuery,所以需要引入。

三引导的作用

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

四使用引导

引导提供了很多封装好的控件,参考https://v3.bootcss.com/components/,【组件】页面,借用该页面的话说,“无数可复用的组件,包括字体图标,下拉菜单,导航,警告框,弹出框等更多功能”。   下面是图书管理系统页面使用的引导导航组件:

 Django web开发系列(六)前端页面之引导


稍加修改,就为我所用了:

 Django web开发系列(六)前端页面之引导

<强>注意使用引导时,按照第二部分说明,在html页面引入CSS \ JS。

<强>

其他

关于python学习,分享,交流,笔者开通了微信公众号,感兴趣的朋友可以关注下,欢迎加入,建立属于我们自己的小圈子,一起学python。


Django web开发系列(六)前端页面之引导