django中引入bootstrap

总体的目录结构如下图:mysite 是我创建的一个项目

一、首先在你的项目文件夹下创建一个名为 static 的目录 ,并把下载好的bootstrap目录拷到static目录下。

二、打开settings.py文件,在文件的最后添加如下内容:

STATIC_URL = ‘/static/‘
STATIC_ROOT = os.path.join(BASE_DIR, ‘collectstatic‘)
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),) 

三、在html中引用,主要在html文件头部作如下修改:

<link rel="stylesheet" href="{% static ‘css/bootstrap.min.css‘ %}">

由于我的bootstrap 目录如下所示,所以我的 href="{% static ‘css/bootstrap.min.css‘ %}" ,根据自己实际情况修改;

原文地址:https://www.cnblogs.com/LucasSong/p/12293597.html

时间: 2024-10-10 07:39:34

django中引入bootstrap的相关文章

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

如何在jsp中引入bootstrap

如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript

Django中使用Bootstrap展示树形结构

概述 在企业管理系统中,经常会有树形结构需求,例如:组织结构.权限等等,本文使用Django和Bootstrap Tree View来展示企业组织结构和对应组织的人员. 实现 模型类(models.py) class Department(models.Model): name = models.CharField(u'单位名称', max_length=30) pri = models.IntegerField(u'序号') desc = models.CharField(u'备注', max

在Vue-cli项目中引入Bootstrap

(1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fonts字体文件夹解压到src文件夹下面. (3)在main.js文件中通过 import './assets/bootstrap.min.css' import './assets/bootstrap.min' 引入bootstrap,引入完成之后,就可以在组件中使用bootstrap了. 另外需要注

在HTML网页中引入Bootstrap前端框架

Bootstrap百度百科介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成. 这是优雅的分割线..................................

Angular 中引入BootStrap

由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和Bootsrap4.2为例进行demo验证. 环境搭建 首先执行以下两个命令创建angular项目和组件 ng new AngularDemo //创建项目 ng g c bootstrapdemo // 创建组件 然后执行 npm install bootstrap // 安装最新的bootstr

在grails app中引入bootstrap和jquery依赖

在layouts的模板文件 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <g:javascript library="jquery" plugin="jquery"/> 使用本地bootstrap,图标一直不能正常显示,有点麻烦 BootStrap.groovy,加

如何在前端项目中引用bootstrap less?

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c

webpack 引入 bootstrap

Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html内. 首先咱们在前端刚兴起的时候,是在html页面通过<script src='./js/bootstrap.js'> <link href='./css/bootstrap.css'>俩个标签引入bootstrap,在webpack中我们要引入它,也要分这俩个部分. 1. npm i