Django 中bootstrap的引用

目的

算算玩了Django也好长时间了,从开始对模板的一无所知,但现在也可以将bootstrap嵌入到Django中了,记录下整个过程,对于自己是一次总结,希望也能对开始使用Django和bootstrap的朋友有一些帮助。

bootstrap的优越性

对于一只后台汪,不, 运维狗来讲,原生态的前端写出来太难了(光布局我就头痛得不得了)。Bootstrap就是那个让你站在巨人肩膀上的梯子(可能说电梯比较合适O(∩_∩)O哈哈~)。
如果一下子用bootstrap太难,我建议的路径是先看看基本的HTML+CSS,可以W3C(我是觉得官方好枯燥,像手册一样),可以去比如codecademy或者国内的慕课网,可以一边学习,一边练习。(如果一遍看下来,不太理解,很正常。Don't be frustrated, 多看几遍,或者用到的时候,再去看看明白,这样也算是一种好方式。对症下药,你也记住药方子。)
如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式。和原生态的HTML+CSS需要先在head标签的style写样式或者引入外部样式相比,bootstrap相当于已经写好了,直接用对应的class引用就可以了。

bootstrap的使用

我是在用Django开发的过程中用bootstrap。

1. bootstrap的引用

我使用的bootstrap3,在Django中,引入静态文件非常的简单:

  • Django的设置
    在settings中定义STATIC_URLSTATICFILES_DIRS。默认Django会在每个app下的static/app查找静态文件,如果加额外的路径寻找则在STATICFILES_DIR中设置(我常用这个,因为项目共用bootstrap),此外,Django还有个STATIC_ROOT,是使用collectstatic命令收集静态文件的作用。
    Django官方文档

写好后,将下载的bootstrap的文件夹拷到项目(注意不是app下)的static路径下
注意:生产版本的bootstrap是没有jquery.min.js的(如果有响应效果,需要加这个),所以需要自己下载
引用的时候,可以像官网说的那样:

  href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  

  href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

或者,使用静态导入(记得在开头加上{% load staticfiles %}。如果有extends语句,load放在extends下),然后导入:

  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  
  <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/mycss.css' %}"

2. 在templates中使用

比如你需要一个navbar,也就是导航条,去bootstrap中组件,找到导航条,复制代码即可。然后修改成自己的样式即可。

3. 总结

对于不熟悉前端的我,花了很长时间来琢磨。发现理解和看真是两码事,总感觉内容不多,但是想吃透,还是需要写码来验证。
希望这篇能都初用到bootstrap的朋友有所帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 处理静态文件,尤其是在开发时,是一件很头疼的事情。在这篇文章中,我们将会讨论一些设置,目录结构和他们之间的相互影响...
    51reboot阅读 1,724评论 0 1
  • 项目部署到阿里云(nginx+uwsgi)上后,静态文件加载没有问题。但是在本地,使用开发服务器,却始终加载不成功...
    兰山小亭阅读 5,671评论 0 9
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,256评论 19 139
  • 你的语文老师姓戴,大家都喊老师,开家长会那天我就认识她了,还给我们准备了讲座,我觉得讲的东西有些深奥,有的...
    落英满地阅读 219评论 0 2