Django 中bootstrap的引用
bootstrap的优越性
如果你有基本的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中组件,找到导航条,复制代码即可。然后修改成自己的样式即可。
Django 中bootstrap的引用的更多相关文章
- Django中静态文件引用优化
静态文件引用优化 在html文件中是用django的静态文件路径时,一般会这么写: <script type="text/javascript" src="/sta ...
- Django中使用静态资源/文件
Django中常需要引用js,css,小图像文件,一般我们把这一类文件称为静态文件,放置在static文件夹中,接下来,对Django中配置静态文件进行下傻瓜式的步骤介绍 在工程目录下新建static ...
- Django中使用Bootstrap
一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...
- bootstrap 在django中的使用
一.应用 http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将 Bootstrap 应用到你的项目中,有以下两种办法: 1.boot ...
- (day69)axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题
目录 一.Vue的ajax插件:axios 二.Django中的CORS跨域问题 (一)同源策略 (二)解决方式(cors模块) 三.Vue配置ElementUI 四.Vue配置jQuery和Boot ...
- Django中使用bookstarp框架(4)
Django中使用bookstarp框架(4) 注意:要使用bookstarp框架前,要先有css的基础 因为主要是研究后台的使用方法,就引入前端的框架,简化html上的耗时(主要是不想把时间浪费在前 ...
- Django中使用Bootstrap----带view.py视图函数(也就是项目下的脚本文件)
一.Django中使用Bootstrap 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdja ...
- django中的静态文件
静态文件 1.什么是静态文件 在django中静态文件是指那些图片.css样式.js样式.视频.音频等静态资源. 2.为什么要配置静态文件 这些静态文件往往不需要频繁的进行变动,如果我们将这些静态文件 ...
- Django中csrf错误
CSRF(Cross-site request forgery)跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站 ...
随机推荐
- Docker快速搭建WordPress博客网站
WordPress WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在W ...
- TeamLab安装及使用
http://blog.csdn.net/crazin/article/details/9529061 最近想装个项目管理管理系统方便项目管理,调研了下这方面开源的软件还是比较多的,国内的有禅道,试用 ...
- Confluence 6 编辑一个站点装饰文件
希望编辑一个站点的 decorator 文件: 进入 > 基本配置(General Configuration) > 布局(Layouts )(在Look and Feel 菜单下面) ...
- django之跨表查询及添加记录
一:创建表 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); 一本书只应该由一个出版商出 ...
- LeetCode(77):组合
Medium! 题目描述: 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3] ...
- this作用范围
1. this的指向 var name='window';var obj={ name:'obj', say:function(){ return function(){ return this.na ...
- Canvas锯齿问题
canvas的宽高必须通过HTML属性指定,不能通过CSS指定,否则会有锯齿 这个是通过CSS定义宽高,绘制的图形 #myCanvas{ background: black; height: 800p ...
- 【第一部分】09Leetcode刷题
一.位1的个数 题目:191. Number of 1 Bits C++ Soution 1: class Solution { public: int hammingWeight(uint32_t ...
- WebService服务介绍与调用
一: WebService简介 WebService是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言的下的一个子集)标准来描述.发布.发现.协调 ...
- TypeScipt学习
TypeScript具有类型系统,且是JavaScript的超集.它可以编译成普通的JavaScript代码. TypeScript支持任意浏览器,任意环境,任意系统并且是开源的.Ts主要用于解决那些 ...