bootstrap的优越性

如果你有基本的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中组件,找到导航条,复制代码即可。然后修改成自己的样式即可。

Django 中bootstrap的引用的更多相关文章

  1. Django中静态文件引用优化

    静态文件引用优化 在html文件中是用django的静态文件路径时,一般会这么写: <script type="text/javascript" src="/sta ...

  2. Django中使用静态资源/文件

    Django中常需要引用js,css,小图像文件,一般我们把这一类文件称为静态文件,放置在static文件夹中,接下来,对Django中配置静态文件进行下傻瓜式的步骤介绍 在工程目录下新建static ...

  3. Django中使用Bootstrap

    一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...

  4. bootstrap 在django中的使用

       一.应用 http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将 Bootstrap 应用到你的项目中,有以下两种办法:  1.boot ...

  5. (day69)axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题

    目录 一.Vue的ajax插件:axios 二.Django中的CORS跨域问题 (一)同源策略 (二)解决方式(cors模块) 三.Vue配置ElementUI 四.Vue配置jQuery和Boot ...

  6. Django中使用bookstarp框架(4)

    Django中使用bookstarp框架(4) 注意:要使用bookstarp框架前,要先有css的基础 因为主要是研究后台的使用方法,就引入前端的框架,简化html上的耗时(主要是不想把时间浪费在前 ...

  7. Django中使用Bootstrap----带view.py视图函数(也就是项目下的脚本文件)

    一.Django中使用Bootstrap 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdja ...

  8. django中的静态文件

    静态文件 1.什么是静态文件 在django中静态文件是指那些图片.css样式.js样式.视频.音频等静态资源. 2.为什么要配置静态文件 这些静态文件往往不需要频繁的进行变动,如果我们将这些静态文件 ...

  9. Django中csrf错误

    CSRF(Cross-site request forgery)跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

随机推荐

  1. JS实现图片放大查看

    示例:https://wumaozheng.com/static-pages/image-magnifier.html <!DOCTYPE html> <html> <h ...

  2. 彻底完全卸载 SQL Server 2005 的图文教程

    彻底完全卸载 SQL Server 2005 的图文教程 SQL SERVER 2005不象SERVER 2000所有组件都汇总在一起,所以卸载时特别麻烦,如果不按正常的方法卸载,重新安装是不可能安装 ...

  3. Confluence 6 审查日志的对象

    审查日志记录一下事件的信息,这个记录不是详细的信息列表.但是这些信息能够让你了解你能够在日志中看到些什么内容. 空间 创建和删除一个空间. 编辑空间细节,主题,配色方案或者样式表. 修改空间权限,包括 ...

  4. nginx官方模块之http_sub_module

    作用 http内容替换 语法 示例 html代码与结果如下:

  5. JPA整合Spring案例

    目录 Spring-SpringMVC-JPA整合案例 三种整合方式 Spring整合JPA步骤 解决JPA懒加载问题 Spring-SpringMVC-JPA整合案例 author :SimpleW ...

  6. kali linux 更新问题

    1.使用一次更新和升级软件替换 apt-get install && apt -y full -upgrade 之后使用 reboot重启    系统,重启之后 再次使用命令   ap ...

  7. hdu4003

    /*依赖背包的通常做法就是对于每个结点,先处理处其所有子节点的dp,然后对于当前结点进行分组背包dp即可 还是依赖背包问题,dp[i][j]表示结点i的子树用了j个机器人的搜索代价 边界条件,如果某个 ...

  8. MySQL数据库权限分类

    一.权限表 mysql数据库中的3个权限表:user .db. host 权限表的存取过程是: 1)先从user表中的host. user. password这3个字段中判断连接的IP.用户名.密码是 ...

  9. HDU 1573 X问题(中国剩余定理标准解法)

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  10. azkaban group分组,权限

    翻译自:https://azkaban.readthedocs.io/en/latest/userManager.html?highlight=group 1.job project,名为" ...