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

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

news 2026/2/7 13:54:35

目录

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/6 23:34:34

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/6 3:59:37

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51