一、应用

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. Moodle插件开发系列——XMLDB编辑器

    Moodle插件开发系列——XMLDB编辑器 位置:网站管理>开发> XML编辑器 l  XML编辑器是制作install.xml文件的工具,而install.xml是指定Moodle建立 ...

  2. CMDB服务器管理系统【s5day88】：采集资产之整合插件

    以后导入配置文件不用去from conf而是导入from lib.config,因为在这可以导入global_settings和settings.py import sys import os imp ...

  3. LightOJ 1129 - Consistency Checker Trie树模板

    题意:给出n条串判断是否存在一个串为另一个串的前缀. 思路:套Trie树的模板,先全部插入,再查找每个字串,如果查找字串完毕,但还存在下一个节点,说明存在前缀. /** @Date : 2016-11 ...

  4. 【C++ STL】List

    1.结构 list使用一个double linked list(双向链表)来管理元素. 2. list 能力 list内部结构和vector或deque截然不同,所以与他们的区别: list不支持随机 ...

  5. EntitySpace 常用语句

    EntitySpace 这个是很早期的ORM框架,最近发现这个破解的也都不能用了.有谁知道能用的,联系我. 1. where带几个条件的 query.Where(query.ProductTempSt ...

  6. 省队集训 Day4 a

    [题目大意] 求有多少区间只包含1个出现次数为1的数. $1\leq n \leq 5*10^5, 0 \leq a_i \leq 10^9$ [题解] 考虑枚举右端点,设这个数上一次出现位置为pre ...

  7. [CodeChef - GERALD07 ] Chef and Graph Queries

    Read problems statements in Mandarin Chineseand Russian. Problem Statement Chef has a undirected gra ...

  8. winform Textbox像百度一下实现下拉显示

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. perl6中的hash定义(1)

    ,,,); say %hash; , b => ); say %hash2; my %hash3 = (:name('root'), :host('localost')); say %hash3 ...

  10. Python抓取花瓣网高清美图

    一:前言 嘀嘀嘀,上车请刷卡.昨天看到了不错的图片分享网——花瓣,里面的图片质量还不错,所以利用selenium+xpath我把它的妹子的栏目下爬取了下来,以图片栏目名称给文件夹命名分类保存到电脑中. ...