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. python之__new__()

    __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将类的实例化,而在 __init__() ...

  2. 清北学堂 清北-Day3-R2-打架 (fight)

    题目描述 LYK有 \(n\) 个小朋友排成一排.第 \(i\) 个小朋友的战斗力是 $ a_i $,且他们的战斗力互不相同. 战斗力高的会打败战斗力低的. LYK想恶搞这些小朋友们,具体地,它有 \ ...

  3. 【转】nvidia-smi 命令解读

    nvidia-smi是linux下用来查看GPU使用情况的命令.具体的参数信息详见 原文:http://blog.csdn.net/sallyxyl1993/article/details/62220 ...

  4. PID控制器开发笔记之十一:专家PID控制器的实现

    前面我们讨论了经典的数字PID控制算法及其常见的改进与补偿算法,基本已经覆盖了无模型和简单模型PID控制经典算法的大部.再接下来的我们将讨论智能PID控制,智能PID控制不同于常规意义下的智能控制,是 ...

  5. Confluence 6 使用 JMX 界面实时监控

    使用 JMX 界面(Java Management Extensions API ),你可以实时的查看你 Confluence 运行实例的状态. JMX 使用的对象被称 MBeans (Managed ...

  6. 关于vue的基础概念

    vue-cli相当于脚手架 给你自动生成模板工程vue-router是 vue路由插件 支持你单页应用的vue-loader是webpack下loader插件 可以把.vue文件 输出成组件

  7. ionic3 打包报错[ERROR] An error occurred while running cordova prepare (exit code 1):

    解决办法:删除并重新添加平台以使用以下命令解决问题: cordova platform rm ios cordova platform add ios 如果执行 ionic cordova build ...

  8. Android源码分析二 硬件抽象层(HAL)

    一 什么是HAL HAL 可定义一个标准接口以供硬件供应商实现,这可让 Android 忽略较低级别的驱动程序实现.借助 HAL,您可以顺利实现相关功能,而不会影响或更改更高级别的系统.HAL 实现会 ...

  9. linux下安装mysql-5.6.41

    1.下载安装包,下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads .选择完版本,然后点击下方 No thanks, just ...

  10. 工业以太网EtherNet/IP协议安全分析整理

    1.     EtherNet/IP : 设备可以用户数据报协议(UDP)的隐式报文传送基于IO的资料 ,用户传输控制协议(TCP)显示报文上传和下参数,设定值,程式 ,用户主站的轮询 从站周期性的更 ...