一、应用

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. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  2. 洛谷P2860 [USACO06JAN]冗余路径Redundant Paths

    题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1. ...

  3. 解决nginx在记录post数据时 中文字符转成16进制的问题【转载】

    1. 问题描述 nginx 在获取post数据时候,如果是中文,则转换成16进制显示在日志文件中,如下图所示.   Paste_Image.png 日志格式为: log_format postdata ...

  4. 【BZOJ4837】LRU算法 [模拟]

    LRU算法 Time Limit: 6 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 小Q同学在学习操作系统中内存管理的 ...

  5. iOS多线程 iOS开发Demo(示例程序)源代码

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址(2013年12月29日更新版)   iOS程序源代码下载链接:01.大任务.zip22 ...

  6. ios的app，有新版本时必须先更新。

    现在没时间整理,先把代码贴出来,以后再做详细的思路整理. 1 在AppController.mm的didFinishLaunchingWithOptions方法里面获取本地应用版本信息,保存起来. / ...

  7. 【洛谷 P4116】 Qtree3 （树链剖分）

    题目链接 树剖练手题,想复习下树剖. 第一次提交\(T\)成QQC 看我 ??? 看了数据范围的确挺恶心的,我的复杂度是\(O(Mlog^2N)\)的,数据范围有三段 For 1/3 of the t ...

  8. 【HNOI】 c tree-dp

    [题目描述]给定一个n个节点的树,每个节点有两个属性值a[i],b[i],我们可以在树中选取一个连通块G,这个连通块的值为(Σa[x])(Σb[x]) x∈G,求所有连通块的值的和,输出答案对1000 ...

  9. jq_常用开发模块

    1.循环模块 var html = ""; $.each(data, function(k, v) { html += '<li>' + '<div>' + ...

  10. 通过实例来学习XML DTD

    使用DTD的原因: 注意:由于它自身的一些缺点,DTD终将被淘汰,但是它还是要学习的.学习完DTD后,后面继续学习XML Schema. 1,通过 DTD,您的每一个 XML 文件均可携带一个有关其自 ...