一、应用

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

 1、bootstrap可以在线引用，方法如下：

A、CSS

将引入 Bootstrap 样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。

<!-- 引入 Bootstrap -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
B、JS

Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及我们自己开发的 JavaScript 插件。具体操作就是将下列 <script>标签放到页面底部的 </body> 标签之前。注意顺序，jQuery 必须放在最前面，然后是 Popper.js，最后是我们自己的 JavaScript 插件。

我们使用的是 jQuery’s slim build（即，瘦身版） 版本，也同时支持完整版本。

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
2、bootstrap下载引用：
进入https://v4.bootcss.com/下载Bootstrap ，解压后将css、js文件夹放到工程中，目录如下：

下载popper和jquery，目录如下：

引用方式如下：

<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<script src="{% static 'popper/popper-1.14.4.js' %}"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
二、模板使用
A、进入bootstrap中文网，下载模板源码

B、进入下载源码的文件夹，选择合适的模板源码，拷贝到放在templates中（html，css，js等）

将下载的模版，修改名字为base.html。并在templates里创建与app同名的目录(stc_crm)用来存放该app使用的模版。

在stu_crm中创建dashboard.html，用来继承base.html模版。

{% extends 'base.html' %}

目录结构为:

C、修改全局setting文件，添加静态文件路径。

STATIC_URL = '/static/'                 #若存放静态文件的static目录在app目录下，则改局生效，无需定义下面的

STATICFILES_DIRS = [　　　　　　　　　　　　＃若存放静态文件的static目录在project目录下，则用该定义

    os.path.join(BASE_DIR, "static"),

]

bootstrap 在django中的使用的更多相关文章

  1. （day69）axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题

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

  2. Django中使用Bootstrap

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

  3. Django 中bootstrap的引用

    bootstrap的优越性 如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式.和原生态的HTML+CSS需要先在head标签的style写样式或者引入外 ...

  4. django中的静态文件管理

    一个站点通常需要保存额外的文件,比如图片   css样式文件   js脚本文件 ,在django中,倾向于将这些文件称为 静态文件.django提供了django.contrib.staticfile ...

  5. Django中使用ModelForm实现Admin功能

    接上一篇<Django中使用Bootstrap> ModelForm 可以将数据库中的信息展示在一个表中,因此我们在查询数据库信息时可以使用ModelForm在前端展示查询到的信息. 在上 ...

  6. django中引入bootstrap4.3

    1.下载bootstrap4.3的包:https://getbootstrap.com/ 2.将下载后的文件放在project下新创建的static目录下.例如我的project是mysite,则放在 ...

  7. Django中使用bookstarp框架（4）

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

  8. 测试开发之Django——No4.Django中前端框架的配置与添加

    我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...

  9. Django 中设置分页页码，只显示当前页以及左右两页

    设置后的效果如下: Django 给我们提供了分页的功能:`Paginator`和`Page`类都是用来做分页的.他们在Django中的路径为:`from django.core.paginator ...

随机推荐

  1. 如何更有效使用 Rational AppScan 扫描大型网站，第 1 部分: 工作原理及技术分析

    Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...

  2. Spring Filter过滤器,Spring拦截未登录用户权限限制

    转载自:http://pouyang.iteye.com/blog/695429 实现的功能:判断用户是否已登录,未登录用户禁止访问任何页面或action,自动跳转到登录页面.  比较好的做法是不管什 ...

  3. 无线局域网中RADIUS协议原理与实现

    转载自:http://blog.csdn.net/jinhill/article/details/5901042 摘要  RADIUS协议是一个被广泛应用于网络认证.授权和计费的协议.本文在介绍了RA ...

  4. [LeetCode] 2. Add Two Numbers ☆☆

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  5. [USACO Mar08] 牛跑步

    http://www.cogs.pro/cogs/problem/problem.php?pid=133 ★★★   输入文件:cowjog.in   输出文件:cowjog.out   简单对比时间 ...

  6. zoj 1729 Hidden Password

    Hidden Passwordhttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=729 Time Limit: 2 Seconds ...

  7. 2015/9/9 Python基础(10)：文件和输入输出

    文件对象文件对象不仅可以用来访问普通的磁盘文件,而且也可以访问其它任何类型抽象层面上的“文件”.一旦设置了合适的“钩子”,你就可以访问文件类型接口的其它对象,就好像访问的是普通文件一样.文件对象的处理 ...

  8. 【C++ STL】Deques

    1.结构 容器deque和vector非常相似,也是采用动态数组来管理元素,提供随机存取,有着和vector几乎一样的接口,不同的是deque的动态数组头尾都开放,因此可以在头尾都可以进行快速的安插和 ...

  9. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  10. 【51NOD-5】1293 球与切换器

    [算法]DP [题解]f[i][j][0]表示在i,j位置往下走的球数,f[i][j][1]表示在i,j位置往右走的球数,经过i,j的球若为-1则(num+1)/2往下,其余往右.+1类似. 转移见代 ...