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

学习Bootstrap 5的第八天

news 2025/9/6 6:26:59

目录

加载器

彩色加载器

实例

闪烁加载器

实例

加载器大小

实例

加载器按钮

实例

分页

分页的基本结构

实例

活动状态

实例

禁用状态

实例

分页大小

实例

分页对齐

实例

面包屑（Breadcrumbs）

实例

加载器

彩色加载器

在 Bootstrap 5 中，要创建一个加载效果，可以使用 .spinner-border 类。这个类会创建一个基本的加载动画，可以使用它来指示数据正在加载或处理中。注意：可以使用文本颜色类设置不同的颜色。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>彩色加载器</h1><div class="spinner-border text-muted"></div><div class="spinner-border text-primary"></div><div class="spinner-border text-success"></div><div class="spinner-border text-info"></div><div class="spinner-border text-warning"></div><div class="spinner-border text-danger"></div><div class="spinner-border text-secondary"></div><div class="spinner-border text-dark"></div><div class="spinner-border text-light"></div></div></body>
</html>

运行结果（动态的）

闪烁加载器

可以使用Bootstrap提供的.spinner-grow类来创建一个“增长”效果的加载器。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>闪烁加载器</h1><div class="spinner-grow text-muted"></div><div class="spinner-grow text-primary"></div><div class="spinner-grow text-success"></div><div class="spinner-grow text-info"></div><div class="spinner-grow text-warning"></div><div class="spinner-grow text-danger"></div><div class="spinner-grow text-secondary"></div><div class="spinner-grow text-dark"></div><div class="spinner-grow text-light"></div></div></body>
</html>

运行结果（动态的）

加载器大小

在Bootstrap中，设置加载效果的大小可以通过使用不同的spinner类来实现，Bootstrap 5 提供.spinner-border-sm或.spinner-grow-sm类来改变加载效果的大小。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>闪烁加载器</h1><div class="spinner-border spinner-border-sm text-muted"></div><div class="spinner-border spinner-border-sm text-primary"></div><div class="spinner-border spinner-border-sm text-success"></div><div class="spinner-border text-info"></div><div class="spinner-grow text-warning"></div><div class="spinner-grow spinner-grow-sm text-danger"></div><div class="spinner-grow spinner-grow-sm text-secondary"></div><div class="spinner-grow spinner-grow-sm text-dark"></div><div class="spinner-grow spinner-grow-sm text-light"></div></div></body>
</html>

运行结果（动态的）

加载器按钮

可以向按钮添加加载器，无论是否带有文本。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>加载器按钮</h1><button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span>Loading..</button><button class="btn btn-primary"><span class="spinner-grow spinner-grow-sm"></span>Loading..</button><button class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm"></span>Loading..</button><button class="btn btn-primary" disabled><span class="spinner-grow spinner-grow-sm"></span>Loading..</button></div></body>
</html>

运行结果（动态的）

分页

Bootstrap 5中的分页功能相对于Bootstrap 4在功能和性能上都有所提升。

分页的基本结构

网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类:

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>分页的基本结构</h1><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></div></body>
</html>

运行结果

活动状态

在Bootstrap中，可以通过在对应的<li>元素上添加.active类来高亮显示当前页。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>当前页页码状态</h1><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item active"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></div></body>
</html>

运行结果

禁用状态

在Bootstrap中，可以通过在<li>元素上添加.disabled类来使分页链接不可点击。这对于那些由于某种原因（例如，没有更多的页面可显示）而禁用的链接是非常有用的。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>禁用状态</h1><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></div></body>
</html>

在这个例子中，上一页链接已经被禁用，用户无法点击它。注意tabindex="-1"和aria-disabled="true"这两个属性：它们是为了确保禁用的链接无法通过键盘导航到达，并且辅助技术（如屏幕阅读器）知道这个链接已经被禁用。 

运行结果

分页大小

Bootstrap 5允许通过添加特定的类来改变分页条目的大小。.pagination-lg类可以使分页条目变大，而.pagination-sm类可以使分页条目变小。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>分页大小</h1><h2>默认大小：</h2><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul><h2>大型大小：</h2><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul><h2>小型大小：</h2><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></div></body>
</html>

运行结果

分页对齐

在Bootstrap中，可以使用一些实用工具类来改变分页的对齐方式。例如，可以使用.justify-content-center（居中对齐），.justify-content-end（右对齐）或.justify-content-start（左对齐）类来改变分页条目的水平对齐方式。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>分页对齐</h1><h2>居中对齐：</h2><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul><h2>右对齐：</h2><ul class="pagination justify-content-end"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul><h2>左对齐：</h2><ul class="pagination justify-content-start"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></div></body>
</html>

运行结果

面包屑（Breadcrumbs）

在Bootstrap中，可以使用.breadcrumb和.breadcrumb-item类来创建一个面包屑导航。面包屑导航是一种在网站上显示用户当前位置的方法，通常显示在页面顶部或底部。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h1>面包屑导航</h1><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">部分</a></li><li class="breadcrumb-item active" aria-current="page">当前页面</li></ol></nav></div></body>
</html>

在这个例子中，.breadcrumb类被应用于<ol>元素，它表示面包屑导航的容器。每个<li>元素都使用.breadcrumb-item类，表示一个单独的面包屑链接。

注意，在Bootstrap 5中，必须使用<nav>和<ol>元素来创建面包屑导航，这是与早期版本的Bootstrap的一个主要区别。在<nav>元素上，应该使用aria-label属性提供一个对于屏幕阅读器用户有用的描述。在.breadcrumb-item上，可以添加active类来表示当前页面，也可以添加aria-current="page"属性来帮助辅助技术用户理解哪个页面是当前页面。

运行结果

相关文章：

学习Bootstrap 5的第八天

目录 加载器 彩色加载器 实例 闪烁加载器 实例 加载器大小 实例 加载器按钮 实例 分页 分页的基本结构 实例 活动状态 实例 禁用状态 实例 分页大小 实例 分页对齐 实例 面包屑&#xff08;Breadcrumbs&#xff09; 实例 加载器 彩色加载器 在 Bootstr…...

编程日记 2023/9/11 1:26:12

vue中自定义指令

什么是指令 在Vue.js中&#xff0c;指令是一种特殊的 token&#xff0c;用于在模板中以声明式方式将响应式数据绑定到 DOM 元素上&#xff0c;从而实现与 DOM 元素的交互和操作。指令以 “v-” 前缀开始&#xff0c;后跟指令的名称&#xff0c;例如 v-model、v-bind 和 v-on。…...

编程日记 2023/9/11 1:25:11

Python：安装Flask web框架hello world

安装easy_install pip install distribute 安装pip easy_install pip 安装 virtualenv pip install virtualenv 激活Flask pip install Flask 创建web页面demo.py from flask import Flask app Flask(__name__)app.route(/) def hello_world():return Hello World! 2023if _…...

编程日记 2023/9/11 1:24:08

小程序点击复制功能制作

在wxml文件中添加一个按钮或需要点击的元素&#xff0c;并绑定点击事件监听器2 <button bindtap"copyText">点击复制</button> 2 在对应的js文件中定义点击事件处理函数&#xff0c;并在函数中调用小程序的API进行复制操作&#xff0c; copyText(e){co…...

编程日记 2023/9/11 1:23:06

20230909java面经整理

1.java常用集合 ArrayList动态数组&#xff0c;动态调整大小&#xff0c;实现List接口 LinkedList双向链表&#xff0c;实现list和queue接口&#xff0c;适用于频繁插入和删除操作 HashSet无序&#xff0c;使用哈希表实现 TreeSet有序&#xff0c;使用红黑树实现 HashMap无序&…...

编程日记 2023/9/11 1:22:05

常用的css命名规则

一、命名规则说明&#xff1a; 1&#xff09;、所有的命名最好都小写 2&#xff09;、属性的值一定要用双引号(“”)括起来 3&#xff09;、给图片加上alt标签 4&#xff09;、尽量使用英文命名原则 5&#xff09;、尽量不缩写&#xff0c;除非一看就明白的单词 二、相对网页外…...

编程日记 2023/9/11 1:21:04

【Linux编程Shell自动化脚本】03 shell四剑客（find、sed、grep、awk）

文章目录 一、find1. 常用expression2. 时间参数3. 其他选项参数3.1 查找深度3.2 执行命令 二、sed1. 常用命令选项2. 常用动作脚本命令2.1 s 替换2.2 已匹配字符串标记&2.3 在当前行前后插入文本 a\ 和 i\2.4 p 打印指定行2.5 匹配行的方式2.5.1 以数字形式指定行区间2.5.…...

编程日记 2023/9/11 1:20:02

java的springboot框架中使用logback日志框架使用RabbitHandler注解为什么获取不到消费的traceId信息？

当使用 Logback 日志框架和 RabbitMQ 的 RabbitHandler 注解时&#xff0c;如果无法获取消费的 traceId 信息&#xff0c;可能是因为在处理 RabbitMQ 消息时&#xff0c;没有正确地将 traceId 传递到日志中。 为了将 traceId 传递到日志中&#xff0c;你可以利用 MDC&#xff…...

编程日记 2023/9/11 1:18:59

初探Vue.js及Vue-Cli

一、使用vue框架的简单示例 我们本次的vue系列就使用webstorm来演示&#xff1a; 对于vue.js的安装我们直接使用script的cdn链接来实现 具体可以参考如下网址&#xff1a; https://www.bootcdn.cn/ 进入vue部分&#xff0c;可以筛选版本,我这里使用的是2.7.10版本的&#xff…...

编程日记 2023/9/11 1:17:57

大数据课程K21——Spark的SparkSQL基础语法

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握Spark的SparkSQL通过方法来使用； ⚪ 掌握Spark的SparkSQL通过sql语句来调用； 一、SparkSQL基础语法——通过方法来使用 1. 查询 df.select("id","name").show()…...

编程日记 2023/9/11 1:16:56

【实践篇】Redis最强Java客户端(三)之Redisson 7种分布式锁使用指南

文章目录 0. 前言1. Redisson 7种分布式锁使用指南1.1 简单锁&#xff1a;1.2 公平锁&#xff1a;1.3 可重入锁&#xff1a;1.4 红锁&#xff1a;1.5 读写锁&#xff1a;1.6 信号量&#xff1a;1.7 闭锁&#xff1a; 2. Spring boot 集成Redisson 验证分布式锁3. 参考资料4. 源…...

编程日记 2023/9/11 1:15:55

卫星通话过后，卫星导航产业被彻底激活

华为新手机发布后&#xff0c;其主打的卫星通话功能备受热议。在卫星产业链发展的背后&#xff0c;下一个大产业在哪里让人颇为好奇。 目前&#xff0c;卫星导航颇被看好&#xff0c;或将引领下一个技术狂潮。它的特点是产业大、发展快、参与者多。继电动汽车、新能源和芯片产…...

编程日记 2023/9/11 1:14:52

【算法训练-链表 七】【排序】：链表排序、链表的奇偶重排、重排链表

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【链表的排序】&#xff0c;使用【链表】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&am…...

编程日记 2023/9/11 1:13:50

LGB的两种写法

方法一 import lightgbm as lgb import pandas as pd from sklearn.model_selection import train_test_split, KFold from sklearn.metrics import accuracy_score# 读取训练集和测试集数据 train_data pd.read_csv(train.csv) test_data pd.read_csv(test.csv)# 分割特征和…...

编程日记 2023/9/11 1:12:49

【Unity的HDRP下ShaderGraph实现权重缩放全息投影＿(内附源码)】

实现权重缩放全息投影 效果如下 效果如下 顶点位置偏移 链接&#xff1a; 提取码&#xff1a;1234...

编程日记 2023/9/11 1:11:45

透视俄乌网络战之二：Conti勒索软件集团（上）

透视俄乌网络战之一&#xff1a;数据擦除软件 Conti勒索软件集团&#xff08;上&#xff09; 1. Conti简介2. 组织架构3. 核心成员4. 招募途径5. 工作薪酬6. 未来计划参考 1. Conti简介 Conti于2019年首次被发现&#xff0c;现已成为网络世界中最危险的勒索软件之一&#xff0…...

编程日记 2023/9/11 1:10:43

【华为OD机试python】拔河比赛【2023 B卷|100分】

【华为OD机试】-真题 !!点这里！！ 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 公司最近准备进行拔河比赛，需要在全部员工中进行挑选。 选拔的规则如下： 按照身高优先、体重次优先的方式准备比赛阵容； 规定参赛的队伍派出10名选手。 请实现一个选拔队员的小程序。 输…...

编程日记 2023/9/11 1:09:41

05 CNN 猴子类别检测

一、数据集下载 kaggle数据集[10 monkey] 二、数据集准备 2.1 指定路径 from tensorflow import keras import tensorflow as tf import numpy as np import pandas as pd import matplotlib.pyplot as plttrain_dir /newdisk/darren_pty/CNN/ten_monkey/training/ valid_d…...

编程日记 2023/9/11 1:08:39

【C#】关于Array.Copy 和 GC

关于Array.Copy 和 GC //一个简单的 数组copy 什么情况下会触发GC呢[ReliabilityContract(Consistency.MayCorruptInstance, Cer.MayFail)]public static void Copy(Array sourceArray,long sourceIndex,Array destinationArray,long destinationIndex,long length);当源和目…...

编程日记 2023/9/11 1:07:35

Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测

目录 一、Vue框架1.1渐进式框架1.2 Vue的版本 二、VueAPI的风格三、Vue开发准备工作四、模板语法文本插值属性绑定条件渲染列表渲染key管理状态 四、事件处理定义事件事件参数事件修饰符 五、数组变化侦测 一、Vue框架 渐进式JavaScript框架&#xff0c;易学易用&#xff0c;性…...

编程日记 2023/9/11 1:06:35

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/8/22 3:50:41

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

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

编程新知 2025/7/12 9:05:51

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/8/19 15:38:50

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/9/3 11:04:39

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/9/3 20:41:41

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/2 19:12:02

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/7/8 17:11:44

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2025/9/2 16:53:06

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/9/2 16:50:58