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,是一种对网站 ...
随机推荐
- 使用VW时,图片的问题
在项目中,使用了VW适配,给图片直接设置了width和height,浏览器模拟正常,在手机上就不显示 解决办法是:在图片外面包一层div,设置width和height,然后图片设置width:100% ...
- 3、SourceTree通过PUTTY连接GitLab
一.生成公钥和私钥 使用命令行生成(两种生成方式选择一种即可) 1.安装SourceTree打开SourceTree,点击“命令行模式”. 2.输入如下命令生成key“example@example. ...
- 设置外部查找工具来索引 Confluence 6
任何网页的 crawler 工具都可以被用来索引你的 Confluence 站点中的内容.如果你希望注册用户才能够查看的内容也被索引的话,你需要为你的 Confluence 创建一个只被 crawl ...
- Confluence 6 使用 CSS 样式化 Confluence 的介绍
这个页面对 Confluence 通过修改 CSS 来改变外观和感觉的情况进行了说明. 层叠样式表(Cascading Style Sheets (CSS))是对 Web 页面进行样式化的工业化标准. ...
- IOS 命令行工具开发
例子 我们需要查看手机APP里面的某个应用的架构 新建一个Single View App 的ios项目 ToolCL 然后在 main函数中加入以下代码 // // main.m // ToolCL ...
- java多线程快速入门(十八)
Lock锁是JDK1.5之后推出的并发包里面的关键字(注意捕获异常,释放锁) Lock与synchronized的区别 Lock锁可以人为的释放锁(相当于汽车中的手动挡) synchronized当线 ...
- SpringMVC国际化与文件上传
点击阅读上一章 其实SpringMVC中的页面国际化与上一章的验证国际化基本一致. 1.对页面进行国际化 1)首先我们对Spring配置文件中添加国际化bean配置 <!-- 注册国际化信息,必 ...
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- linux下安装nginx及初步认识
linux下安装配置nginx nginx:是一个高性能的反向代理服务器正向代理代理的是客户端,反向代理代理的是服务端. 这里以nginx-1.12.2版本为例子 1.首先去官网下载nginx-1.1 ...
- 【sqli-labs】Less17
Less17: POST注入,UPDATE语句,有错误回显 新知识点: 1. update注入方法 参考:http://www.mamicode.com/info-detail-1665678.htm ...