50.Python-web框架-Django中引入静态的bootstrap样式

目录

Bootstrap     

官网

特性        

下载

在线样例 Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

在django中使用bootstrap

新建static\bootstrap5目录,解压后的Bootstrap文件,拷贝项目里就好。

在template文件里引用css文件


Bootstrap     

        Bootstrap 是一个非常流行的前端开发框架,用于快速构建响应式和移动优先的网站。

官网

Bootstrap中文网

特性        

        它由Twitter的开发团队创建并在2011年首次发布,现已成为开源社区广为使用的工具。Bootstrap的核心特性包括:

  1. 移动优先: Bootstrap 从手机和平板设备开始设计,然后扩展到桌面设备,确保你的网站在任何设备上都能良好展示。
  2. 响应式设计: 使用栅格系统、可折叠的组件和响应式实用程序,Bootstrap使页面元素能够根据屏幕尺寸自动调整布局。
  3. 预定义样式: 提供了一套丰富的CSS样式和组件,如按钮、表格、表单、导航栏、警告框等,让你能快速搭建界面。
  4. JavaScript插件: 包含了多个基于jQuery的JavaScript插件,如模态框、下拉菜单、轮播、提示框等,增强了交互性。
  5. 自定义: 提供了SASS源文件,允许开发者轻松定制Bootstrap的变量、组件和布局,以适应项目特定的设计需求。
  6. 图标库: 集成了Glyphicons图标集(Bootstrap 3中),而在Bootstrap 4及以后版本中推荐使用Font Awesome或其他图标库。
  7. 社区和文档: Bootstrap拥有庞大的开发者社区和详尽的文档,无论是初学者还是高级开发者都能快速上手并找到解决方案。

        要使用Bootstrap,你可以在项目中通过CDN链接直接引入Bootstrap的CSS和JS文件,或者下载Bootstrap的源代码自行编译和定制。最新版本的Bootstrap(目前是5.x系列)还进一步提升了对现代浏览器的支持,引入了Flexbox和Grid布局系统,移除了对IE浏览器的支持,并增加了对Web Components的支持。

下载

选择一个版本

下载 

解压后的文件,拷贝项目里就好。

在线样例 Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

在django中使用bootstrap

新建static\bootstrap5目录,解压后的Bootstrap文件,拷贝项目里就好。

在template文件里引用css文件

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head><meta charset="UTF-8"><title>部门管理</title><link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}"><script src="{% static 'bootstrap5/js/bootstrap.bundle.min.js' %}"></script><script src="{% static 'jquery-3.7.1.min.js' %}"></script>
</head>

        这段代码是一个典型的Django模板开头部分,用于加载静态资源并初始化一个基本的HTML结构,特别适用于使用Bootstrap和jQuery的网页。下面是这段代码的解析:

  • {% load static %}:这是Django模板标签,用来加载静态文件。在Django中,静态文件包括CSS、JavaScript、图片等非Django处理的文件。
  • <link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}">:这一行是链接Bootstrap的CSS样式表。{% static %}标签告诉Django去静态文件目录中查找指定的文件。这里假设你的Bootstrap CSS文件位于静态文件夹的bootstrap5/css/子目录下。{% static %}会从settings.py中读取。这样做的唯一好处是,如果static有变化,改起来方便。但谁会改变这个东西呢。
  • <script src="{% static 'bootstrap5/js/bootstrap.bundle.min.js' %}"></script>:这一行是引入Bootstrap的JavaScript文件,使用的是捆绑了Popper.js的Bootstrap bundle版本。同样的,文件路径也是相对于静态文件根目录。
  • <script src="{% static 'jquery-3.7.1.min.js' %}"></script>:这一行引入了jQuery库,版本号为3.7.1。Bootstrap依赖于jQuery来实现一些交互功能,所以需要提前加载。确保你的静态文件夹中确实存放了这个版本的jQuery文件,并且路径正确。

        请注意,这些静态文件路径(如bootstrap5/css/和bootstrap5/js/)是示例路径,实际项目中可能根据你的静态文件组织结构有所不同。此外,确保你的Django项目已经正确配置了静态文件的存储和URL设置,以便Django能够正确找到并服务这些静态资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/851846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL-窗口函数合集

目录 1.窗口函数简介2.窗口的定义3.相关题目示例3.1 PERCENT_RANK()2346 以百分比计算排名 3.2 FIRST_VALUE()/LAST_VALUE()/NTH_VALUE()2388 将表中的空值更改为前一个值 1.窗口函数简介 MySQL 开窗函数&#xff08;Window Functions&#xff09;是 MySQL 8.0 版本引入的一个…

k8s metrics-server服务监控pod 的 cpu、内存

项目场景&#xff1a; 需要开启指标服务&#xff0c;依据pod 的 cpu、内存使用率进行自动的扩容或缩容 pod 的数量 解决方案&#xff1a; 下载 metrics-server 组件配置文件&#xff1a; wget https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/…

植物大战僵尸杂交版 MacBook 苹果电脑下载安装详细教程

最近老是看到别人玩植物大战僵尸杂交版&#xff0c;可是找了一圈发现都是PC版本的&#xff0c;原来游戏作者只做了一个PC版本&#xff0c;还好最终没有放弃终于在 Mac 上安装上了植物大战僵尸杂交版 版本是 2.0.88 真的蛮好玩的就是关卡有亿点点难&#xff0c;我最爱玩无尽模式…

一站式解决ComfyUI安装、调试和界面操作,附安装包 C001

点击打开以上网页&#xff0c;页面往下拉&#xff0c;找到“Direct link to download”&#xff0c;点击即可下载官方安装包。 下载完成后&#xff0c;将安装包移动到你想要安装的地方&#xff0c;解压&#xff08;推荐使用7-Zip&#xff09;&#xff0c;然后点击“run_nvidia_…

C++中的观察者模式

目录 观察者模式&#xff08;Observer Pattern&#xff09; 实际应用 股票价格监控系统 发布-订阅系统 总结 观察者模式&#xff08;Observer Pattern&#xff09; 观察者模式是一种行为型设计模式&#xff0c;它定义了对象间的一对多依赖关系。当一个对象的状态发生改变…

无需插件脚本,IDEA配置多服务一键启动

分享本教程的初衷是本人在本地调试时业务场景中需要调用多个服务&#xff0c;并且每次为了找到需要启动的服务花了很多不必要的时间&#xff0c;我相信很多同为开发的小伙伴也有和我一样的困扰。但是学会这招后多个服务需要同时启动时仅需一键即可搞定。接下来让我们一步步设置…

C++方法封装成dll及C#调用示例

1,编译生成dll时可能出现错误&#xff0c;解决办法&#xff1a;pch.h文件头部&#xff0c;添加声明 #define _CRT_SECURE_NO_WARNINGS 2, c头文件声明 extern "C" __declspec(dllexport) char* getvalue(const char * param1, const char * param2); 3, c方法实现…

【PasteSpider】的集群组件【PasteCluster】(让你的项目快速支持集群模式)的思路及实现(含源码)

PasteSpider是什么? 一款使用.net编写的开源的Linux容器部署助手&#xff0c;支持一键发布&#xff0c;平滑升级&#xff0c;自动伸缩&#xff0c;Key-Value配置&#xff0c;项目网关&#xff0c;环境隔离&#xff0c;运行报表&#xff0c;差量升级&#xff0c;私有仓库&…

vue在hash路由模式下实现点击定位滑动

背景&#xff1a;一般是使用锚点来实现dom的定位&#xff0c;但在hash模式下&#xff0c;这种方式不行&#xff0c;会刷新路由&#xff0c;没法实现dom定位的效果。 其实scrollIntoView就可以解决这个问题&#xff0c;scrollIntoView可以将调用它的元素滚动到浏览器窗口的可见…

物联网网关和飞鸟物联平台如何助力其实现智能化升级,提升生产效率-天拓四方

随着工业4.0时代的到来&#xff0c;物联网技术逐渐成为推动工业转型升级的关键力量。物联网网关作为连接工业设备与网络的核心枢纽&#xff0c;在工业自动化、数据收集与分析等方面发挥着越来越重要的作用。本案例将围绕一家知名制造企业&#xff0c;展示物联网网关和飞鸟物联平…

vue中v-bind控制class和style

当使用v-bind指令控制class和style时&#xff0c;可以通过动态绑定的方式根据不同的条件来添加或移除class&#xff0c;以及改变元素的样式。 1. 控制class 通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。 对象语法&#xff1a;使用…

关于ImportError: attempted relative import with no known parent package解决

问题 我的项目结构如下&#xff1a; my_project/ ├── utils/ │ ├── __init__.py │ └── config.py └── scripts/├── __init__.py└── train.py当我在train.py中 尝试导入config中的模块时&#xff0c;即 from ..utils.config import *&#xff0c;报错…

提升消费者满意度的五星售后服务认证

在当今竞争激烈的市场环境中&#xff0c;消费者满意度是企业取得成功的重要因素。五星售后服务认证作为一种权威性认证&#xff0c;可以显著提高消费者满意度&#xff0c;增强企业的竞争力。本文将从四个方面探讨五星售后服务认证如何提高消费者满意度。 五星售后服务认证是由国…

SpringCash

文章目录 简介引入依赖application.yml配置常用注解使用1. 启动类添加注解使用方法上添加注解 简介 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能底层可以使用EHCache、Caffeine、Redis实现缓存。 注解一般放在Controller的方法上&#xff0c;CachePut 注解一…

高精度定位技术的必要性与实际应用

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;高精度精准定位技术已成为一项不可或缺的基础技术&#xff0c;其应用范围涉及军事、航空、智能交通、无人驾驶、智慧城市建设等众多领域。高精度精准定位不仅为人们的日常生活带来极大便利&#xff0c;还对提升国家的科技…

鸿蒙轻内核A核源码分析系列六 MMU协处理器(1)

在前面系列分析虚实映射时&#xff0c;涉及到了一些MMU协处理器与相关的汇编代码没有深入讲解。本文来专门分析那些协处理器与汇编代码。 本文中所涉及的源码&#xff0c;以OpenHarmony LiteOS-A内核为例&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_l…

mysql性能优化知识点

MySQL性能优化是一个多方面的议题&#xff0c;涉及数据库设计、查询优化、服务器配置、索引管理等多个层面。 以下是一些关键的优化策略&#xff1a; 1、优化简介 使用SHOW STATUS语句查询一些MySQL数据库性能参数&#xff0c;格式如下&#xff1a; SHOW STATUS LIKE value;…

Presidents of America(1789-1860)

Presidents of America preface 美国总统&#xff0c;是美利坚合众国的国家元首、政府首脑与三军统帅&#xff0c;是当今世界权力最高的人。美国总统是根据1787年通过的美国宪法而设立&#xff0c;行使宪法赋予的行政权。截至目前&#xff0c;美国一共有过44位总统(45任&…

项目中的增删改查

1.增加&#xff1a; 接口定义&#xff1a;在Spring Boot的Controller&#xff08;控制层&#xff09;定义添加医院的接口&#xff0c;使用POST方法&#xff0c;并接收医院信息的JSON数据。数据校验&#xff1a;在接收到数据后&#xff0c;进行必要的数据校验&#xff0c;确保数…

运行mvn命令打包项目jar包报错?“Fatal error compiling: 无效的目标发行版: 19 ”, 让我来看看~

最近写实验&#xff0c;要打包项目&#xff0c;但是不管是在cmd运行“mvn clean package -Dmaven.test.skiptrue”命令&#xff0c;还是在idea上去操作&#xff0c;都出现了这样的一个错误&#xff1a; [EROR] Failed to exeoute goal org.apache.maven.plugins:maven-comnpile…