Bootstrap-HTML（三）Bootstrap5列表组全解析

news2025/2/23 19:13:21

Bootstrap-HTML（三）Bootstrap5列表组全解析

  • 前言
  • （一）HTML 列表基础回顾
    • 1.无序列表
    • 2.有序列表
    • 3.定义列表
  • 二、无样式的有序列表和无序列表
    • 内联列表
  • 三、Bootstrap5 列表组
    • 1.基础的列表组
    • 2.设置禁用和活动项
    • 3.链接项的列表组
    • 4.移除列表边框
    • 5.水平列表组
    • 6.创建编号列表组
    • 7.带徽章的列表组
    • 8.多种颜色列表项
    • 9.向列表组添加自定义内容：

前言

  • 在网页设计与开发中，Bootstrap5 为我们提供了一系列便捷且美观的组件，帮助我们快速搭建出富有吸引力和交互性的页面。今天，就让我们一起深入了解一下 Bootstrap5 中的列表

往期链接
Bootstrap-HTML（二）深入探索容器，网格系统和排版
https://blog.csdn.net/2402_83322742/article/details/144208040?spm=1001.2014.3001.5501
Bootstrap5-HTML（一）解锁前端开发新姿势，快速上手不是梦！
https://blog.csdn.net/2402_83322742/article/details/144205783?spm=1001.2014.3001.5501

（一）HTML 列表基础回顾

在 HTML 中，我们常见三种不同类型的列表：

  • 在Bootstrap中我们也可以使用列表
  • 可以使用 Bootstrap 创建列表
  • 可以创建三种不同类型的 HTML 列表：
    在这里插入图片描述

1.无序列表

  • 用于顺序无关紧要的项目列表，列表项标有项目符号，像 ⚬、● 等，语法结构为 <ul><li>列表项内容</li></ul>
<!DOCTYPE html>
<html lang="en">
<head> 
    <!-- 最新的 Bootstrap5 核心 css 文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- 图标文件 -->
    <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
    <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h2>购物清单（Bootstrap 无序列表）</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

2.有序列表

适用于顺序确实很重要的项目列表，其列表项用数字标记，例如 1、ⅵ 等，格式为 <ol><li>列表项内容</li></ol>

<!DOCTYPE html>
<html lang="en">
<head> 
    <!-- 最新的 Bootstrap5 核心 css 文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- 图标文件 -->
    <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
    <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>安装软件步骤（Bootstrap 有序列表）</h2>
    <ol>
        <li>下载安装包</li>
        <li>双击运行安装程序</li>
        <li>按照安装向导提示逐步完成配置和安装操作</li>
        <li>安装完成后，启动软件进行试用</li>
    </ol>
</div>
</body>
</html>

在这里插入图片描述

3.定义列表

  • 主要呈现术语列表及其相关描述，结构为 <dl><dt>术语</dt><dd>描述内容</dd></dl>。
<!DOCTYPE html>
<html lang="en">
<head> 
    <!-- 最新的 Bootstrap5 核心 css 文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- 图标文件 -->
    <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
    <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>HTML 标签解释（Bootstrap 定义列表）</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言（HyperText Markup Language），用于创建网页结构，是网页的基础骨架。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表（Cascading Style Sheets），主要用来控制网页的样式，比如页面布局、字体、颜色等外观表现。</dd>
        <dt>JavaScript</dt>
        <dd>一种脚本语言，能够为网页添加交互性，实现动态效果，如表单验证、页面动画等功能。</dd>
    </dl>
</div>
</body>
</html>

在这里插入图片描述

二、无样式的有序列表和无序列表

有时候，我们需要从列表项中去除默认样式像 ⚬、● 等
Bootstrap5 提供了便捷的方法，只需简单地将类 .list-unstyled 应用到相应的 <ul> 或 <ol> 元素即可

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h3>去点列表</h3>
    <ul class="list-unstyled">
      <li>HTML</li>
      <li>CSS</li>
      <li>Bootstrap</li>
    </ul>
  </div>
</body>

</html>

在这里插入图片描述

内联列表

若想使用有序列表或无序列表创建水平菜单（也就是将垂直方向的列表变为水平方向，一般用作菜单导航样式）
可以通过将类 .list-inline 添加到 <ul> 或 <ol> 并将类 .list-inline-item 添加到子 <li> 元素来实现。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <h3>内联列表</h3>
  <ul class="list-inline">
    <li class="list-inline-item">HTML</li>
    <li class="list-inline-item">CSS</li>
    <li class="list-inline-item">Bootstrap</li>
  </ul>
</body>

</html>

在这里插入图片描述

三、Bootstrap5 列表组

  • 列表组是非常实用且灵活的组件，它能以漂亮的方式展示元素列表。

1.基础的列表组

最基本的形式就是一个带有 .list-group 类的无序列表，且列表中的元素带有 .list-group-item 类，像这样：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>
</body>

</html>

在这里插入图片描述

2.设置禁用和活动项

我们可以通过添加类来指示列表项的不同状态。将类 .active 添加到 .list-group-item 类后面，就能表示当前项目元素是活动的；添加 .disabled 类，则可使其呈现禁用状态，

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group">
    <li class="list-group-item active">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item disabled">第三项</li>
</ul>
</body>

</html>

在这里插入图片描述

3.链接项的列表组

若要创建一个链接的列表项，可以将 <li> 替换为 <a>。如果希望鼠标悬停时显示灰色背景，还可以添加 .list-group-item-action 类，如下代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group">
    <a href="#" class="list-group-item list-group-item-action">第一项</a>
    <a href="#" class="list-group-item list-group-item-action">第二项</a>
    <a href="#" class="list-group-item list-group-item-action">第三项</a>
</ul>
</body>

</html>

在这里插入图片描述

4.移除列表边框

使用 .list-group-flush 类添加到 list-group 元素上，能够移除外边框和圆角，创建与其父容器边对边的列表组，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>
</body>

</html>

在这里插入图片描述

5.水平列表组

添加 .list-group-horizontal 类到 .list-group，列表项就会水平显示而不是垂直显示（并排而不是堆叠），如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
</ul>
</body>

</html>

在这里插入图片描述

6.创建编号列表组

通过在 .list-group 元素上添加类 .list-group-numbered，就能轻松创建带有元素编号的列表组，需要注意的是这里的数字是通过 CSS 生成，而非 <ol> 元素的默认浏览器样式哦，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ol class="list-group list-group-numbered">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
</ol>
</body>

</html>

在这里插入图片描述

7.带徽章的列表组

这其实就是将 Bootstrap 框架中的徽章组件和基础列表组件结合在一起的效果，只需在 .list-group-item 的基础上追加徽章组件 “badge”，示例如下

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group">
    <li class="list-group-item">第一项
        <small class="bg-primary badge">12</small>
    </li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
</ul>
</body>

</html>

8.多种颜色列表项

多数其他组件一样，我们可以在列表组项目上使用相应的类来对它们进行额外的背景色设置，以施加额外的强调。可用的颜色类有 .list-group-item-success、.list-group-item-secondary、.list-group-item-info、.list-group-item-warning、.list-group-item-danger、.list-group-item-primary、.list-group-item-dark、.list-group-item-light，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
</ul>
</body>

</html>

在这里插入图片描述

9.向列表组添加自定义内容：

Bootstrap5 在链接列表组的基础上增加了两个样式，.list-group-item-heading 用来定义列表项头部样式，.list-group-item-text 用来定义列表项主要内容，方便开发者自定义列表项里的内容，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 最新的 Bootstrap5 核心 css 文件 -->
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!-- 图标文件 -->
  <link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css">
  <!--最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-heading">网站服务</h4>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-heading">标题一</h4>
        <p class="list-group-item-text">这里面是内容一</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-heading active">标题二</h4>
        <p class="list-group-item-text">这里面是内容二</p>
    </a>
</div>
</body>

</html>

在这里插入图片描述

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【CSP CCF记录】202212-2第28次认证 训练计划

【CSP CCF记录】202212-2第28次认证 训练计划

题目 样例1输入 10 5 0 0 0 0 0 1 2 3 2 10 样例1输出 1 1 1 1 1 10 9 8 9 1 样例1解释 五项科目间没有依赖关系&#xff0c;都可以从第 1 天就开始训练。 10天时间恰好可以完成所有科目的训练。其中科目 1 耗时仅 1天&#xff0c;所以最晚可以拖延到第 10 天再开始训练&…
阅读更多...
java 18 异常处理

java 18 异常处理

一&#xff0c;异常概念 基本概念Java语言中&#xff0c;将程序执行中发生的不正常情况称为“异常”。(开发过程中的语法错误和逻辑错误不是异常) 执行过程中所发生的异常事件可分为两大类&#xff1a; 1&#xff09;Error(错误):Java虚拟机无法解决的严重问题。如:JVM系统内部…
阅读更多...
【Spark】 groupByKey与reduceByKey的区别

【Spark】 groupByKey与reduceByKey的区别

groupByKey 操作&#xff1a;将相同键的所有值收集到一个集合中。实现&#xff1a;不会在map端进行局部聚合&#xff0c;而是直接将所有相同键的数据传输到reduce端进行聚合。缺点&#xff1a;由于没有本地聚合&#xff0c;groupByKey会导致大量的数据传输和shuffle&#xff0c…
阅读更多...
房屋租赁系统源码 SpringBoot + Vue 实现全功能解析

房屋租赁系统源码 SpringBoot + Vue 实现全功能解析

这是一套使用 SpringBoot 与 Vue 开发的房屋租赁系统源码&#xff0c;站长分析过这套源码&#xff0c; 推测其原始版本可能是一个员工管理系统&#xff0c;经过二次开发后&#xff0c;功能被拓展和调整&#xff0c;现已完全适用于房屋租赁业务。 该系统功能完善&#xff0c;涉…
阅读更多...
【ArcGISPro】训练自己的深度学习模型并使用

【ArcGISPro】训练自己的深度学习模型并使用

本教程主要训练的是识别汽车的对象检测模型 所使用的工具如下（导出训练数据进行深度学习、训练深度学习模型、使用深度学习检测对象） 1.准备训练数据 1.1新建面矢量，构建检测对象 右键地理数据库->新建->要素类 选择面类型 1.2点击编辑窗口进行勾画汽车检测对象…
阅读更多...
鸿蒙特色实战3共享单车案例

鸿蒙特色实战3共享单车案例

1 案例截图 2 开发准备 本项目需要一台NEXT真机&#xff0c;并完成以下准备工作。 在AppGallery Connect&#xff08;简称AGC&#xff09;上&#xff0c;参考创建项目和创建应用完成HarmonyOS应用的创建&#xff0c;从而使用各类服务。 添加应用包名要注意&#xff1a;与新建…
阅读更多...
Thonny IDE + MicroPython + ESP32 + 0.96寸OLED（IIC） 显示任意字符

Thonny IDE + MicroPython + ESP32 + 0.96寸OLED（IIC） 显示任意字符

四针脚0.96英寸OLED显示屏模块的具体参数如下表所示。 参数名称 参数特性 分辨率 128x64像素 通信方式 IIC 驱动芯片 SSD1306 屏幕颜色 白色、蓝色或黄蓝双色 元件&#xff1a; 四针脚0.96英寸OLED显示屏模块 ESP32 DEVKIT_C开发板 杜邦线USB Type-C 接线&#xf…
阅读更多...
监控易助力IT运维再升级

监控易助力IT运维再升级

在当今数字化时代&#xff0c;企业对于IT系统的依赖程度日益加深&#xff0c;IT运维管理的重要性也随之凸显。作为首都的一家知名企业&#xff0c;北京某公司在业务快速发展的同时&#xff0c;也面临着IT系统规模不断扩大、运维管理复杂度不断提升的挑战。为了更好地应对这些挑…
阅读更多...
线程（二）——线程安全

线程（二）——线程安全

如何理解线程安全&#xff1a; 多线程并发执行的时候&#xff0c;有时候会触发一些“bug”&#xff0c;虽然代码能够执行&#xff0c;线程也在工作&#xff0c;但是过程和结果都不符合我们的开发时的预期&#xff0c;所以我们将此类线程称之为“线程安全问题”。 例如&#xff…
阅读更多...
prometheusgrafana实现监控告警

prometheusgrafana实现监控告警

Prometheus负责集群数据的监控和采集&#xff0c;然后传递给grafana进行可视化&#xff0c;集成睿象云可实现监控报警&#xff0c;为了方便操作&#xff0c;可以通过iframe嵌套grafana到指定的页面。 文章目录 1.Grafana集成Prometheus2.iframe内嵌grafana3.监控告警 1.Grafana…
阅读更多...
双绞线直连两台电脑的方法及遇到的问题

双绞线直连两台电脑的方法及遇到的问题

文章目录 前言一、步骤二、问题总结&#xff1a;问题1:遇到ping不通的问题。问题2:访问其他电脑上的共享文件时提示输入网络凭证问题3:局域网共享文件时提示“没有权限访问&#xff0c;请与网络管理员联系请求访问权限” 前言 办公室里有两台电脑&#xff0c;一台装了显卡用于…
阅读更多...
如何使用Java编写Jmeter函数

如何使用Java编写Jmeter函数

Jmeter 自带有各种功能丰富的函数&#xff0c;可以帮助我们进行测试&#xff0c;但有时候提供的这些函数并不能满足我们的要求&#xff0c;这时候就需要我们自己来编写一个自定义的函数了。例如我们在测试时&#xff0c;有时候需要填入当前的时间&#xff0c;虽然我们可以使用p…
阅读更多...
练8：递归

练8：递归

欢迎大家订阅【蓝桥杯Python每日一练】 专栏&#xff0c;开启你的 Python数据结构与算法 学习之旅&#xff01; 1 递归 在 Python 中&#xff0c;递归&#xff08;Recursion&#xff09; 是一种函数调用自身的编程技术。 递归通常用来解决可以分解为类似子问题的问题&#xff…
阅读更多...
Python金融大数据分析概述

Python金融大数据分析概述

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【海拥导航】&#x1f485; 想寻找共同学习交流&#xff0c;摸鱼划水的小伙伴&#xff0c;请点击【全栈技术交流群】 金融大数据分析在金融科技领域越来越重要&#xff0c;它涉及从海量数据中提取洞察&#xff0c;为金…
阅读更多...
WSL2下如何部署CosyVoice并开启API服务

WSL2下如何部署CosyVoice并开启API服务

环境： WSL2 英伟达4070ti 12G Win10 Ubuntu22.04 问题描述： WSL下如何部署CosyVoice并开启API服务 解决方案： CosyVoice 下载不顺的时候，最好提前开科学 一、部署 1.拉取源码 git clone –recursive https://github.com/FunAudioLLM/CosyVoice.gitwsl下拉取 gi…
阅读更多...
室联人形机器人：家政服务任务结构化、技术要点、深入应用FPGA的控制系统框架设计（整合版）

室联人形机器人：家政服务任务结构化、技术要点、深入应用FPGA的控制系统框架设计（整合版）

目录&#xff1a; 0 引言 1 人形机器人对室内家政服务任务的结构化 1.1人形机器人在室内家政服务中的比较优势 1.1.1 人形机器人拟人性的7个维度 1.1.2 拟人性在室内家政服务工作中的比较优势 1.1.3 潜在的重要用户&#xff1a;宠物爱好者 1.2 居所室内环境的特征与结构…
阅读更多...
基于 Apache Dolphinscheduler3.1.9中的Task 处理流程解析

基于 Apache Dolphinscheduler3.1.9中的Task 处理流程解析

实现一个调度任务&#xff0c;可能很简单。但是如何让工作流下的任务跑得更好、更快、更稳定、更具有扩展性&#xff0c;同时可视化&#xff0c;是值得我们去思考得问题。 Apache DolphinScheduler是一个分布式和可扩展的开源工作流协调平台&#xff0c;具有强大的DAG可视化界…
阅读更多...
物联网接入网关的数据安全和高效传输详解

物联网接入网关的数据安全和高效传输详解

物联网接入网关&#xff0c;作为连接物联网终端设备与云端或本地服务器的关键环节&#xff0c;不仅负责数据的汇聚与转发&#xff0c;更需确保数据在传输过程中的安全无虞与高效流畅。 一、数据安全&#xff1a;构筑坚实防线 1. 加密技术的应用 天拓四方物联网接入网关内置了…
阅读更多...
双指针算法（超详细版）

双指针算法（超详细版）

希望大家多多关注&#xff0c;有三必回 1.双指针 1.1快慢双指针 快慢双指针常用来解决循环问题&#xff0c;或是查找中间节点 1.1.1循环链表&#xff08;141. 环形链表 - 力扣&#xff08;LeetCode&#xff09;&#xff09; 解题思路&#xff1a; 1.定义快慢指针fast和slo…
阅读更多...
Rain后台权限管理系统，快速开发

Rain后台权限管理系统，快速开发

这段时间一直没有更新&#xff0c;因为在写一个脚手架&#xff0c;今天Rain项目终于完工&#xff0c;已经发布到github,免费使用 项目github链接 https://github.com/Rain-hechang/Rain 简介 前端采用Vue3.x、Element UI。 后端采用Spring Boot、Spring Security、Redis &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023