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

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

news 文章来源：https://blog.csdn.net/sngoo/article/details/139625401 2025/5/5 18:57:13

目录

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

欢乐钓鱼大师保姆级教程，云手机辅助攻略解析！

在这份攻略中&#xff0c;我们将为大家详细介绍如何在《欢乐钓鱼大师》中快速提升钓鱼技能和游戏进展&#xff0c;避免常见的新手误区和不必要的资源浪费。无论是钓鱼点的选择、装备的合理使用还是技能的优化&#xff0c;我们都会一一为您详细解析&#xff0c;帮助您成为一名优…...

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

数据结构：手撕代码——顺序表

目录 1.线性表 2.顺序表 2.1顺序表的概念 2.2动态顺序表实现 2.2-1 动态顺序表实现思路 2.2-2 动态顺序表的初始化 2.2-3动态顺序表的插入 检查空间 尾插 头插 中间插入 2.2-4 动态顺序表的删除 尾删 头删 中间删除 2.2. 5 动态顺序表查找与打印、销毁 查找 …...

编程日记 2024/6/14 22:53:54

jenkins使用注意问题

1.在编写流水线时并不知道当前处在哪个目录&#xff0c;导致名使用不当&#xff0c;以及文件位置不清楚 流水线任务默认路径是&#xff0c;test4_mvn为jenkins任务名 [Pipeline] sh (hide)pwd /var/jenkins_home/workspace/test4_mvn maven任务也是&#xff0c;看来是一样的…...

编程日记 2024/6/14 22:52:53

Kaggle -- Titanic - Machine Learning from Disaster

新手kaggle之旅&#xff1a;1 . 泰坦尼克号 使用一个简单的决策树进行模型构建&#xff0c;达到75.8%的准确率&#xff08;有点低&#xff0c;但是刚开始&#xff09; 完整代码如下&#xff1a; import pandas as pd import numpy as npdf pd.read_csv("train.csv&quo…...

编程日记 2024/6/14 22:49:50

蓝牙音频解码芯片TD5163介绍，支持红外遥控—拓达半导体

蓝牙芯片TD5163A是一颗支持红外遥控、FM功能和IIS音频输出的蓝牙音频解码芯片&#xff0c;此颗芯片的亮点在于同时支持真立体声&单声道、TWS功能、PWM、音乐频谱和串口AT指令控制等功能&#xff0c;芯片在支持蓝牙无损音乐播放的同时&#xff0c;还支持简单明了的串口发送A…...

编程日记 2024/6/14 22:46:47

windows 下 docker 入门

这里只是具体过程&#xff0c;有不清楚的欢迎随时讨论 1、安装docker &#xff0c;除了下一步&#xff0c;好像也没有其他操作了 2、安装好docker后&#xff0c;默认是运行在linux 下的&#xff0c;这时我们需要切换到windows 环境下&#xff0c; 操作&#xff1a;在右下角d…...

编程日记 2024/6/14 22:45:46

《别让“想太多”挡了你的骑行路，对比一下更丝滑》

在探索骑行的世界时&#xff0c;我们往往会被一些先入为主的想法所束缚。本文将带你对比骑行与其他运动和生活方式&#xff0c;揭示那些阻碍你爱上骑行的认知误区。 一、年龄不是界限&#xff1a;骑行与跑步的比较与跑步相比&#xff0c;骑行同样适合所有年龄段&#xff0c;但它…...

编程日记 2024/6/14 22:42:44

hadoop和hbase对应版本关系

https://hbase.apache.org/book.html#configuration...

编程日记 2024/6/14 22:41:43

现代X86汇编-C和ASM混合编程举例

端午假期安装好了vs c2022,并写了个简单的汇编代码&#xff0c;证明MASM真的可以运行。今天需要搞一个实实在在的C和ASM混合编程的例子&#xff0c;因为用纯汇编的求伯君写WPS的时代一去不复返了。个别关键函数用汇编&#xff0c;充分发挥CPU的特色功能&#xff0c;偶尔还是需要…...

编程日记 2024/6/14 22:39:39

485. 最大连续 1 的个数

给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,0,1,1,1] 输出&#xff1a;3 解释&#xff1a;开头的两位和最后的三位都是连续 1 &#xff0c;所以最大连续 1 的个数是 3.示例 2: 输入&#xff1a;nums […...

编程日记 2024/6/14 22:38:38