Django 中bootstrap的引用

2016-04-15 本文已影响5033人 slowrabbit

目的

算算玩了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_URL、STATICFILES_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的朋友有所帮助。