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

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>

在这里插入图片描述

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

rockit 学习、开发笔记(六)(VENC)

rockit 学习、开发笔记(六)(VENC)

前言 上节我们讲到了VDEC解码模块&#xff0c;那当然少不了VENC编码模块了&#xff0c;一般有编解码的需求都是为了压缩视频的大小&#xff0c;方便减少传输所占用的带宽。 概述 VENC 模块&#xff0c;即视频编码模块。本模块支持多路实时编码&#xff0c;且每路编码独立&am…
阅读更多...
使用Dapper创建一个简单的查询

使用Dapper创建一个简单的查询

1.先在NuGet上下载Dapper包 2.创建对应的model 代码如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 数据显示 {public class User{public int UserId { get; set; }public…
阅读更多...
wireshark网络安全流量分析基础

wireshark网络安全流量分析基础

网络安全流量分析领域中&#xff0c;wireshark和csnas是取证、安全分析的好工具&#xff0c;包括很多研究安全规则、APT及木马流量特征的小伙伴&#xff0c;也会常用到两个工具。这两款流量嗅探、分析软件&#xff0c;今天先介绍wireshark作为安全分析工具的基本使用。 2|002.…
阅读更多...
深度学习笔记25_LSTM实现糖尿病探索与预测

深度学习笔记25_LSTM实现糖尿病探索与预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 一、我的环境 1.语言环境&#xff1a;Python 3.9 2.编译器&#xff1a;Pycharm 3.深度学习环境&#xff1a;TensorFlow 2.10.0 二、GPU设置…
阅读更多...
使用docker创建cloudstack虚拟主机

使用docker创建cloudstack虚拟主机

文章目录 概要 环境准备&#xff1a; 1.使用rockyLinux&#xff1a;8镜像 2.配置yum源 3.添加vim cloudstack.repo为以下内容 4.前期我们已经搭好了cloudstack平台&#xff0c;这里需要映射几个目录到容器里面&#xff0c; 5.创建Dockerfile 6.构建镜像 7.使用命令创建…
阅读更多...
云计算对定制软件开发的影响

云计算对定制软件开发的影响

在当代数字世界中&#xff0c;云计算是改变许多行业&#xff08;包括定制软件开发&#xff09;的最伟大的革命性趋势之一。由于这些公司努力寻求更好、更多不同的方式来履行职责&#xff0c;因此云计算与传统的内部部署基础设施相比具有许多不可否认的优势。这种范式转变对定制…
阅读更多...
Ubuntu Linux用户与组的管理

Ubuntu Linux用户与组的管理

Ubuntu Linux操作系统- 第一弹 由猪猪侠开启Linux操作系统的学习 文章目录 前言Linux操作系统的发展Linux版本 Linux用户账户及其类型超级用户系统用户普通用户 Ubuntu超级用户权限与管理员Linux的超级用户权限解决方案Ubuntu管理员sudo命令su命令Ubuntu启用root登录 组账户及其…
阅读更多...
案例研究｜HYPER PaaS低代码工具携手DataEase嵌入式版，服务工业制造企业数智化转型

案例研究｜HYPER PaaS低代码工具携手DataEase嵌入式版，服务工业制造企业数智化转型

杭州星瀚智磐科技有限公司&#xff08;以下简称为“星瀚智磐”&#xff09;成立于2021年&#xff0c;是一家专注于低代码平台研发的高科技企业。星瀚智磐的核心产品HYPER PaaS低代码工具主要为制造业用户提供数字化解决方案。HYPER PaaS基于低代码平台简单的拖拉拽操作&#xf…
阅读更多...
Linux-实用操作

Linux-实用操作

文章目录 一. 各类实用小技巧(快捷键)1. ctrl c 强制停止2. ctrl d 退出登出3. history 查看历史命令4. !命令前缀&#xff0c;自动匹配上一个命令5. ctrl r&#xff0c;搜索历史命令6. ctrl a | e&#xff0c;光标移动到命令开始或结束7. ctrl ← | →&#xff0c;左右跳…
阅读更多...
部署项目报错

部署项目报错

vue2项目部署后 Error: Cannot find module /views/*** 1.起因 登录页、首页等静态页面可以正常进入&#xff0c;后端访问也正常&#xff0c;可以获取到验证码。 但是登录之后会发现首页空白或者进入不到首页 F12查看有报错信息&#xff1a;Error: Cannot find module ‘/v…
阅读更多...
微信小程序配置less并使用

微信小程序配置less并使用

1.在VScode中下载Less插件 2.在微信小程序中依次点击如下按钮 选择 从已解压的扩展文件夹安装… 3.选中刚在vscode中下载安装的插件文件 如果没有修改过插件的安装目录&#xff0c;一般是在c盘下C:\用户\用户名.vscode\extensions\mrcrowl.easy-less-2.0.2 我的路径是&#xf…
阅读更多...
gpt-computer-assistant - 极简的 GPT-4o 客户端

gpt-computer-assistant - 极简的 GPT-4o 客户端

更多AI开源软件&#xff1a; AI开源 - 小众AIhttps://www.aiinn.cn/sources gpt-computer-assistant是一个将 ChatGPT MacOS 应用程序提供给 Windows 和 Linux 的替代工作。因此&#xff0c;这是一个全新且稳定的项目。此时&#xff0c;您可以轻松地将其作为 Python 库安装&am…
阅读更多...
使用PPT科研绘图导出PDF边缘留白问题解决方案

使用PPT科研绘图导出PDF边缘留白问题解决方案

使用PPT画图导出PDF格式后&#xff0c;边缘有空白&#xff0c;插入latex不美观&#xff0c;解决方案为自定义PPT幻灯片母版大小&#xff0c;如题步骤为&#xff1a; 1、查看已制作好的图片的大小&#xff0c;即长度和宽度 2、选择自定义幻灯片大小 3、自定义幻灯片大小为第1…
阅读更多...
【PyTorch】（基础三）---- 图像读取和展示

【PyTorch】（基础三）---- 图像读取和展示

图像读取和展示 pytorch本身并不提供图像的读取和展示功能&#xff0c;利用pytorch执行计算机视觉任务的时候&#xff0c;通常是利用opencv等工具先进行图像处理&#xff0c;然后将结果转化成tensor类型传递给pytorch&#xff0c;在pytorch执行之后&#xff0c;也可以将tensor…
阅读更多...
智能合约

智能合约

06-智能合约 0 啥是智能合约&#xff1f; 定义 智能合约&#xff0c;又称加密合约&#xff0c;在一定条件下可直接控制数字货币或资产在各方之间转移的一种计算机程序。 角色 区块链网络可视为一个分布式存储服务&#xff0c;因为它存储了所有交易和智能合约的状态 智能合约还…
阅读更多...
LeetCode 热题100（十五）【动态规划】（3）

LeetCode 热题100（十五）【动态规划】（3）

15.7最长递增子序列&#xff08;中等&#xff09; 题目描述&#xff1a;leetcode链接 300. 最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元…
阅读更多...
Vector软件CANdb++的信号起始位Bug

Vector软件CANdb++的信号起始位Bug

问题现象 前几天导入DBC文件发现不对劲&#xff0c;怎么生成代码的起始地址都怪怪的&#xff0c;检查下工程里面的配置&#xff0c;还真的是这样&#xff0c;一路查到输入文件——DBC文件&#xff0c;发现是DBC文件就有错误&#xff1a;一些CAN报文之后8字节长度&#xff0c;也…
阅读更多...
初始Python篇（6）—— 字符串

初始Python篇（6）—— 字符串

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 字符串的常见操作 格式化字符串 占位符 f-string 字符串的 format 方法 字符串的编码与解码 与数据验证相关的方法 …
阅读更多...
【Axure视频教程】中继器表格——筛选后的条件判断

【Axure视频教程】中继器表格——筛选后的条件判断

今天教大家在Axure制作中继器表格筛选以及筛选后条件交互的原型模板&#xff0c;我们可以在输入框里输入员工姓名&#xff0c;点击查询按钮后可以筛选出对应的数据&#xff0c;筛选后会进行条件判断&#xff0c;如果筛选不到任何数据&#xff0c;就会显示提示弹窗。这个原型模板…
阅读更多...
白鲸开源即将在Doris Summit Asia 2024展示新议题！

白鲸开源即将在Doris Summit Asia 2024展示新议题！

一年一度的 Apache Doris 峰会再次启航&#xff0c;Doris Summit Asia 2024 现已开启报名&#xff0c;将于 2024 年 12 月 14 日在深圳正式举办。此次峰会&#xff0c;将对实时极速、存算分离、湖仓一体、半结构化数据分析、向量索引、异步物化视图等诸多特性进行全方位解读&am…
阅读更多...
最新文章

Copyright @ 2022~2023