当前位置： 首页 > news >正文

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

news 2026/2/8 19:16:28

目录

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能够正确找到并服务这些静态资源。

相关文章：

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

目录 Bootstrap 官网 特性 下载 在线样例 Bootstrap 入门 Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 在django中使用bootstrap 新建static\bootstrap5目录&#xff0c;解压后的Bootstrap文件&#xff0c;拷贝项目里就好。 在template文件里引用css文…...

编程日记 2024/6/14 23:32:41

机器学习实验----支持向量机(SVM)实现二分类

目录 一、介绍 (1)解释算法 (2)数据集解释 二、算法实现和代码介绍 1.超平面 2.分类判别模型 3.点到超平面的距离 4.margin 间隔 5.拉格朗日乘数法KKT不等式 (1)介绍 (2)对偶问题 (3)惩罚参数 (4)求解 6.核函数解决非线性问题 7.SMO (1)更新w (2)更新b 三、代…...

编程日记 2024/6/14 23:30:38

STM32自己从零开始实操05:接口电路原理图

一、TTL 转 USB 驱动电路设计 1.1指路 延续使用芯片 CH340E 。 实物图 实物图 原理图与封装图 1.2数据手册重要信息提炼 1.2.1概述 CH340 是一个 USB 总线的转接芯片&#xff0c;实现 USB 与串口之间的相互转化。 1.2.2特点 支持常用的 MODEM 联络信号 RTS&#xff08;请…...

编程日记 2024/6/14 23:29:37

git子模块

1 子模块管理的关键文件和配置 在 Git 中使用子模块时&#xff0c;Git 会利用几个特殊的文件和配置来管理子模块。以下是涉及子模块管理的关键文件和配置&#xff1a; 1.1 .gitmodules 这是一个文本文件&#xff0c;位于 Git 仓库的根目录下。它记录了子模块的信息&#xff…...

编程日记 2024/6/14 23:28:36

stm32编写Modbus步骤

1. modbus协议简介&#xff1a; modbus协议基于rs485总线&#xff0c;采取一主多从的形式&#xff0c;主设备轮询各从设备信息&#xff0c;从设备不主动上报。 日常使用都是RTU模式&#xff0c;协议帧格式如下所示&#xff1a; 地址 功能码 寄存器地址 读取寄存器…...

编程日记 2024/6/14 23:27:35

基于 Transformer 的大语言模型

语言建模作为语言模型&#xff08;LMs&#xff09;的基本功能&#xff0c;涉及对单词序列的建模以及预测后续单词的分布。 近年来&#xff0c;研究人员发现&#xff0c;扩大语言模型的规模不仅增强了它们的语言建模能力&#xff0c;而且还产生了处理传统NLP任务之外更复杂任务…...

编程日记 2024/6/14 23:26:33

证照之星是一款很受欢迎的证件照制作软件

证照之星是一款很受欢迎的证件照制作软件&#xff0c;证照之星可以为用户提供“照片旋转、裁切、调色、背景处理”等功能&#xff0c;满足用户对证件照制作的基本需求。本站证照之星下载专题为大家提供了证照之星电脑版、安卓版、个人免费版等多个版本客户端资源&#xff0c;此…...

编程日记 2024/6/14 23:23:30

不定时更新 解决无法访问GitHub github.com 打不开 dns访问加速

1 修改hosts Windows 10为例,‪文件C:\Windows\System32\drivers\etc\hosts 管理员打开记事本来修改 文件-打开-“C:\Windows\System32\drivers\etc\hosts” 20.205.243.168 api.github.com 185.199.108.154 github.githubassets.com 185.199.108.133 raw.githubusercontent.…...

编程日记 2024/6/14 23:21:27

单向环形链表的创建与判断链表是否有环

单向环形链表的创建与单向链表的不同在于&#xff0c;最后一个节点的next需要指向头结点&#xff1b; 判断链表是否带环&#xff0c;只需要使用两个指针&#xff0c;一个步长为1&#xff0c;一个步长为2&#xff0c;环状链表这两个指针总会相遇。 如下示例代码&#xff1a; l…...

编程日记 2024/6/14 23:17:22

JVM堆栈的区别、分配内存与并发安全问题、对象定位

一、堆和栈的区别 堆&#xff08;Heap&#xff09;和栈&#xff08;Stack&#xff09;是两种基本的数据结构&#xff0c;它们在内存管理、程序执行流程控制等方面扮演着重要角色。在编程语言尤其是Java这样的高级语言环境中&#xff0c;堆和栈的概念被用来描述程序运行时的内存…...

编程日记 2024/6/14 23:16:21

Python教程：机器学习 - 百分位数（4）

什么是百分位数&#xff1f; 统计学中使用百分位数&#xff08;Percentiles&#xff09;为您提供一个数字&#xff0c;该数字描述了给定百分比值小于的值。 例如&#xff1a;假设我们有一个数组&#xff0c;包含住在一条街上的人的年龄。 ages [5,31,43,48,50,41,7,11,15,3…...

编程日记 2024/6/14 23:12:18

数据结构习题（快期末了）

一个数据结构是由一个逻辑结构和这个逻辑结构上的一个基本运算集构成的整体。 从逻辑关系上讲&#xff0c;数据结构主要分为线性结构和非线性结构两类。 数据的存储结构是数据的逻辑结构的存储映像。 数据的物理结构是指数据在计算机内实际的存储形式。 算法是对解题方法和…...

编程日记 2024/6/14 23:11:16

Http协议：Http缓存

文章目录 Cookie和Session缓存有效性检查整体流程总结Cookie和Session Cookie 客户端的缓存 Session 服务端的缓存，存储服务器与客户端一次会话的过程中的数据/资源 两者区别 是服务端与客户端的不同需求造成的 有效期 Cookie的有效期很长，Session的较短 原因：服务…...

编程日记 2024/6/14 23:08:13

idea插件开发之hello idea plugin

写在前面 最近一直想研究下自定义idea插件的内容&#xff0c;这样如果是想要什么插件&#xff0c;但又一时找不到合适的&#xff0c;就可以自己来搞啦&#xff01;这不终于有时间来研究下&#xff0c;但过程可谓是一波三折&#xff0c;再一次切身体验了下万事开头难。那么&…...

编程日记 2024/6/14 23:07:12

Sm4【国密4加密解密】

当我们开发金融、国企、政府信息系统时&#xff0c;不仅要符合网络安全的等保二级、等保三级&#xff0c;还要求符合国密的安全要求&#xff0c;等保测评已经实行很久了&#xff0c;而国密测评近两年才刚开始。那什么是密码/国密&#xff1f;什么是密评&#xff1f;本文就关于密…...

编程日记 2024/6/14 23:06:11

git如果将多次提交压缩成一次

将N个提交压缩到单个提交中有两种方式&#xff1a; git reset git reset的本意是版本回退&#xff0c;回退时可以选择保留commit提交。我们基于git reset的作用&#xff0c;结合新建分支&#xff0c;可以实现多次commit提交的合并。这个不需要vim编辑&#xff0c;很少有冲突。…...

编程日记 2024/6/14 23:05:10

android用Retrofit进行网络请求和解析

Retrofit 的原理 Retrofit的核心原理包括动态代理与Service Method的构建、注解解析与请求配置、网络请求执行与响应处理等。它是一个类型安全的HTTP客户端&#xff0c;用于Android和Java平台&#xff0c;通过将HTTP API转化为Java接口的方式&#xff0c;简化了网络请求的编写…...

编程日记 2024/6/14 23:03:07

list容器的基本使用

目录 前言一&#xff0c;list的介绍二&#xff0c;list的基本使用2.1 list的构造2.2 list迭代器的使用2.3 list的头插&#xff0c;头删&#xff0c;尾插和尾删2.4 list的插入和删除2.5 list 的 resize/swap/clear 前言 list中的接口比较多&#xff0c;与string和vector类似&am…...

编程日记 2024/6/14 23:02:06

34万汉语词语成语反义词ACCESS\EXCEL数据库

反义词就是两个意思相反的词&#xff0c;包括&#xff1a;绝对反义词和相对反义词。分为成对的意义相反、互相对立的词。如&#xff1a;真——假&#xff0c;动——静&#xff0c;拥护——反对。这类反义词所表达的概念意义互相排斥。或成对的经常处于并举、对待位置的词。如&a…...

编程日记 2024/6/14 23:01:03

yum方式更新Jenkins

目的 使用yum方式更新Jenkins。 步骤 查看最新可用版本 $ yum list jenkins Last metadata expiration check: 0:03:44 ago on Fri Jun 14 06:10:01 2024. Installed Packages jenkins.noarch 2.452.1-1.1 jenkins Available Pa…...

编程日记 2024/6/14 22:59:01

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2026/2/4 16:47:57