【Java 进阶篇】深入了解 Bootstrap 插件

news2024/12/19 2:51:06

在这里插入图片描述

Bootstrap 是一个流行的前端框架，提供了各种强大的插件，用于增强网页和应用程序的功能和交互性。本篇博客将深入介绍 Bootstrap 插件，适用于那些刚刚开始学习前端开发的小白。

什么是 Bootstrap？

在深入探讨 Bootstrap 插件之前，让我们简要了解一下 Bootstrap 是什么。

Bootstrap 是一个开源的前端框架，最初由 Twitter 开发并维护，现在由社区继续维护。它提供了一组强大的工具、样式和组件，用于创建漂亮、响应式的网页和应用程序。Bootstrap 的目标是简化前端开发，使开发人员能够更轻松地构建具有一致性和现代感的用户界面。

Bootstrap 的主要优势包括：

  • 响应式设计：Bootstrap 可以轻松创建适应不同设备和屏幕尺寸的网页，确保用户在各种设备上都能够良好地浏览网站。
  • 丰富的组件：Bootstrap 提供了各种组件，包括导航条、模态框、标签页、警告框和插件，可以用于创建功能丰富的网页。
  • 易于定制：尽管 Bootstrap 提供了默认的样式和组件，但您可以轻松自定义它们，以满足特定项目的需求。
  • 活跃的社区：Bootstrap 拥有一个庞大的开发者社区，可以提供支持、插件和主题，帮助您更好地使用框架。

什么是 Bootstrap 插件？

Bootstrap 插件是一组 JavaScript 功能，用于增强网页和应用程序的交互性和功能性。这些插件可以用于添加轮播、模态框、下拉菜单、标签页、表单验证等功能，而无需编写复杂的自定义 JavaScript 代码。

Bootstrap 插件的目标是使前端开发更加容易，并且保持一致性。这些插件旨在提供可复用的组件，以便开发人员能够将它们轻松集成到自己的项目中。

接下来，我们将深入介绍一些常用的 Bootstrap 插件，以及如何使用它们。

Bootstrap 轮播（Carousel）

Bootstrap 轮播是一个常见的插件，用于创建轮播图片、广告横幅、客户 testimonial 等。轮播是网页上的滚动图片或内容，用户可以通过点击按钮或滑动手势切换内容。

基本的 Bootstrap 轮播结构

一个基本的 Bootstrap 轮播通常由以下部分组成：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ul>
    
    <!-- 轮播内容 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" alt="图片 1">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" alt="图片 2">
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" alt="图片 3">
        </div>
    </div>
    
    <!-- 轮播控制按钮 -->
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">上一页</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">下一页</span>
    </a>
</div>

让我们逐步解释上述代码的各部分：

  • <div id="myCarousel" class="carousel slide" data-ride="carousel">：这是轮播的容器，它具有必要的类和属性来定义轮播。
  • <ul class="carousel-indicators">：这是轮播指示符，用于显示轮播的当前页数和允许用户导航到特定页。
  • <div class="carousel-inner">：这是轮播内容的容器，其中包含轮播的各个项（图片或内容）。
  • <div class="carousel-item">：这是轮播的每个项，用户可以通过轮播控制按钮切换到不同的项。
  • <a class="carousel-control-prev" 和 <a class="carousel-control-next">：这些是轮播控制按钮，允许用户切换到上一页和下一页的项。

这个基本的轮播结构包含轮播指示符、轮播内容和轮播控制按钮。用户可以通过点击按钮或滑动手势来浏览不同的项。

自定义轮播

轮播可以根据不同的设计需求进行自定义。您可以更改轮播项的样式、显示的内容、轮播速度等。以下是一个示例，展示如何自定义轮播：

<div id="myCustomCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#myCustomCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCustomCarousel" data-slide-to="1"></li>
        <li data-target="#myCustomCarousel" data-slide-to="2"></li>
    </ul>
    
    <!-- 轮播内容 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="custom-image1.jpg" alt="自定义图片 1">
            <div class="carousel-caption">
                <h3>标题 1</h3>
                <p>描述 1</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="custom-image2.jpg" alt="自定义图片 2">
            <div class="carousel-caption">
                <h3>标题 2</h3>
                <p>描述 2</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="custom-image3.jpg" alt="自定义图片 3">
            <div class="carousel-caption">
                <h3>标题 3</h3>
                <p>描述 3</p>
            </div>
        </div>
    </div>
    
    <!-- 轮播控制按钮 -->
    <a class="carousel-control-prev" href="#myCustomCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">上一页</span>
    </a>
    <a class="carousel-control-next" href="#myCustomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">下一页</span>
    </a>
</div>

在这个示例中，我们自定义了轮播的内容，包括不同的图片、标题和描述。您还可以更改轮播指示符的样式、轮播控制按钮的图标等，以满足您的项目需求。

Bootstrap 模态框（Modal）

模态框是一个常见的插件，用于在网页上显示对话框、提示框或表单。模态框通常用于显示额外的信息或执行特定的操作，用户需要在模态框上进行交互。

基本的 Bootstrap 模态框结构

一个基本的 Bootstrap 模态框通常由以下部分组成：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

<!-- 模态框 -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">模态框标题</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <!-- 模态框主体 -->
            <div class="modal-body">
                <p>模态框内容在这里。</p>
            </div>
            
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

让我们逐步解释上述代码的各部分：

  • <button> 元素：这是触发模态框的按钮，用户点击它以打开模态框。
  • data-toggle="modal" 和 data-target="#myModal"：这些属性用于定义按钮的行为，以及指定要打开的模态框的 ID。
  • <div class="modal">：这是模态框的容器，它具有必要的类和属性来定义模态框。
  • <div class="modal-dialog">：这是模态框的对话框容器。
  • <div class="modal-content">：这是模态框的内容容器，包括头部、主体和底部。
  • <div class="modal-header">：这是模态框的头部，包含标题和关闭按钮。
  • <div class="modal-body">：这是模态框的主体，包含模态框的内容。
  • <div class="modal-footer">：这是模态框的底部，通常包含操作按钮。

这个基本的模态框结构包含了打开模态框的按钮、模态框的标题、内容和操作按钮。用户可以点击关闭按钮或模态框外部来关闭模态框。

自定义模态框

模态框可以根据不同的设计需求进行自定义。您可以更改模态框的样式、内容、操作按钮等。以下是一个示例，展示如何自定义模态框：

<!-- 触发自定义模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myCustomModal">
    打开自定义模态框
</button>

<!-- 自定义模态框 -->
<div class="modal" id="myCustomModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 自定义模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">自定义模态框标题</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <!-- 自定义模态框主体 -->
            <div class="modal-body">
                <p>自定义模态框内容在这里。</p>
            </div>
            
            <!-- 自定义模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

在这个示例中，我们自定义了模态框的样式、大小和内容。您还可以更改模态框的标题、操作按钮的颜色等，以满足您的项目需求。

Bootstrap 下拉菜单（Dropdown）

Bootstrap 下拉菜单是一个常见的插件，用于创建可展开的菜单，通常用于导航条中。下拉菜单可以包含链接、按钮或其他内容，用户可以点击或悬停在触发元素上来展开菜单。

基本的 Bootstrap 下拉菜单结构

一个基本的 Bootstrap 下拉菜单通常由以下部分组成：

<!-- 触发下拉菜单的按钮 -->
<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">选项1</a>
        <a class="dropdown-item" href="#">选项2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">选项3</a>
    </div>
</div>

让我们逐步解释上述代码的各部分：

  • <div class="dropdown">：这是下拉菜单的容器，它具有必要的类来定义下拉菜单。
  • <button> 元素：这是触发下拉菜单的按钮，用户点击它以展开菜单。
  • class="btn btn-primary dropdown-toggle"：这是按钮的样式类，它将按钮样式定义为 Bootstrap 的按钮样式，并且带有下拉菜单的切换行为。
  • data-toggle="dropdown"：这是按钮的属性，用于定义按钮的行为。
  • <div class="dropdown-menu">：这是下拉菜单的容器，包含菜单项。
  • <a class="dropdown-item">：这是下拉菜单中的菜单项，用户可以点击它们来执行操作。
  • <div class="dropdown-divider">：这是用于在下拉菜单中创建分隔线的元素。

这个基本的下拉菜单结构包含了触发按钮和菜单项。用户可以点击按钮来展开菜单，然后选择菜单项来执行操作。

自定义下拉菜单

下拉菜单可以根据不同的设计需求进行自定义。您可以更改菜单项的样式、内容、触发按钮的样式等。以下是一个示例，展示如何自定义下拉菜单：

<!-- 自定义触发下拉菜单的按钮 -->
<div class="dropdown">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        自定义下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">自定义选项1</a>
        <a class="dropdown-item" href="#">自定义选项2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">自定义选项3</a>
    </div>
</div>

在这个示例中，我们自定义了触发按钮的样式和菜单项的内容。您还可以更改分隔线的样式、菜单项的颜色等，以满足您的项目需求。

Bootstrap 标签页（Tab）

标签页是一个常见的插件，用于在网页上创建多个选项卡，用户可以切换不同的内容。标签页通常用于分组和导航相关的信息。

基本的 Bootstrap 标签页结构

一个基本的 Bootstrap 标签页通常由以下部分组成：

<!-- 标签页导航 -->
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1">标签 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">标签 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3">标签 3</a>
    </li>
</ul>

<!-- 标签页内容 -->
<div class="tab-content">
    <div id="tab1" class="tab-pane active">
        <p>标签 1 的内容在这里。</p>
    </div>
    <div id="tab2" class="tab-pane">
        <p>标签 2 的内容在这里。</p>
    </div>
    <div id="tab3" class="tab-pane">
        <p>标签 3 的内容在这里。</p>
    </div>
</div>

让我们逐步解释上述代码的各部分：

  • <ul class="nav nav-tabs">：这是标签页的导航，包含选项卡的标题。
  • <li class="nav-item">：这是导航中的每个选项卡。
  • <a class="nav-link"：这是选项卡的链接，用户点击它们以切换内容。
  • data-toggle="tab"：这是链接的属性，定义了链接的行为。
  • href="#tab1"：这是链接的 href 属性，用于指定要切换到的内容。
  • <div class="tab-content">：这是标签页的内容容器，包含不同选项卡的内容。
  • <div id="tab1" class="tab-pane active">：这是每个选项卡的内容容器，其中的 id 属性对应导航链接的 href。

这个基本的标签页结构包含了标签页导航和不同选项卡的内容。用户可以点击选项卡来切换到不同的内容。

自定义标签页

标签页可以根据不同的设计需求进行自定义。您可以更改选项卡的样式、内容、默认活动选项卡等。以下是一个示例，展示如何自定义标签页：

<!-- 自定义标签页导航 -->
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#custom-tab1">自定义标签 1</a        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#custom-tab2">自定义标签 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#custom-tab3">自定义标签 3</a>
    </li>
</ul>

<!-- 自定义标签页内容 -->
<div class="tab-content">
    <div id="custom-tab1" class="tab-pane">
        <p>自定义标签 1 的内容在这里。</p>
    </div>
    <div id="custom-tab2" class="tab-pane">
        <p>自定义标签 2 的内容在这里。</p>
    </div>
    <div id="custom-tab3" class="tab-pane">
        <p>自定义标签 3 的内容在这里。</p>
    </div>
</div>

在这个示例中，我们自定义了标签页导航的样式（使用了 nav-pills 类）、标签页的标题、以及默认活动选项卡。您还可以更改选项卡的样式、内容和切换效果，以满足您的项目需求。

Bootstrap 表单验证

表单验证是一个重要的前端功能，用于确保用户在提交表单时提供有效的数据。Bootstrap 提供了一些内置的表单验证类，可以帮助您轻松实现表单验证。

基本的 Bootstrap 表单验证结构

一个基本的 Bootstrap 表单验证通常由以下部分组成：

<form>
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" required>
    </div>
    <div class="form-group">
        <label for="email">电子邮件</label>
        <input type="email" class="form-control" id="email" required>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

让我们逐步解释上述代码的各部分：

  • <form> 元素：这是表单的容器。
  • <div class="form-group">：这是表单中的每个表单组，包含一个标签和一个输入字段。
  • <label for="username">：这是表单组的标签，用于描述输入字段的用途。
  • <input type="text" class="form-control" id="username" required>：这是输入字段，它具有类名 form-control，这是 Bootstrap 样式的一部分。required 属性指示该字段为必填字段。
  • <button type="submit" class="btn btn-primary">提交</button>：这是提交按钮，用户可以点击它以提交表单。

这个基本的表单验证结构包含了文本输入字段和必填字段。如果用户尝试提交空值，浏览器将显示验证错误消息。

自定义表单验证

表单验证可以根据不同的需求进行自定义。您可以添加更多验证规则、自定义错误消息、更改验证样式等。以下是一个示例，展示如何自定义表单验证：

<form>
    <div class="form-group">
        <label for="custom-username">自定义用户名</label>
        <input type="text" class="form-control" id="custom-username" required minlength="3">
        <div class="invalid-feedback">用户名必须至少包含 3 个字符。</div>
    </div>
    <div class="form-group">
        <label for="custom-email">自定义电子邮件</label>
        <input type="email" class="form-control" id="custom-email" required>
        <div class="invalid-feedback">请输入有效的电子邮件地址。</div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

在这个示例中，我们自定义了用户名字段的最小长度和电子邮件字段的错误消息。如果用户尝试提交不符合要求的数据，将显示自定义的错误消息。

Bootstrap 插件的 JavaScript 部分

Bootstrap 插件通常需要 JavaScript 来实现其交互功能。在前面的示例中，我们使用了 data-toggle 和其他属性来定义插件的行为，但这些行为通常需要 JavaScript 的支持。确保在项目中包含 Bootstrap 的 JavaScript 文件，以便插件正常运行。

您可以通过添加以下代码行来引入 Bootstrap 的 JavaScript 文件：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

这将在项目中加载 Bootstrap 的 JavaScript 文件，以确保插件能够正常工作。

总结

在本博客中，我们深入了解了 Bootstrap 插件，涵盖了轮播、模态框、下拉菜单、标签页和表单验证等常见插件。我们了解了它们的基本结构以及如何自定义它们以满足项目需求。此外，我们还提到了引入 Bootstrap 的 JavaScript 文件以支持插件的交互功能。

使用 Bootstrap 插件可以显著简化前端开发，加快项目的进展，同时确保用户获得出色的用户体验。希望这篇博客对那些刚刚开始学习前端开发的小白有所帮助。如果您对特定插件或主题有更多的兴趣，可以深入研究 Bootstrap 官方文档，以获取更多详细信息和示例代码。

无论您是正在学习前端开发还是想要加快项目的开发进程，Bootstrap 插件都是一个强大的工具，值得深入学习和探索。希望您能够利用这些知识创建出精美的网页和应用程序！

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

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

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

相关文章

QListWiget和QToolButton

QListWiget和QToolButton

1.简介 Qt 中用于项&#xff08;Item&#xff09;处理的组件有两类&#xff0c;一类是 Item Views&#xff0c;包括 QListView、QTreeView、 QTableView、QColumnView 等&#xff1b;另一类是 Item Widgets&#xff0c;包括 QListWidget、QTreeWidget 和 QTable Widget。 Ite…
阅读更多...
手机知识：安卓内存都卷到24GB了，为何iPhone还在固守8GB

手机知识：安卓内存都卷到24GB了，为何iPhone还在固守8GB

目录 一、系统机制 二、生态差异 三、总结 在刚刚过去的9月&#xff0c;年货iPhone 15系列正式发布&#xff0c;标准版不出意外还是挤药膏&#xff0c;除了镜头、屏幕有些升级&#xff0c;芯片用iPhone 14 Pro系列的&#xff0c;内存只有6GB&#xff1b;即使是集钛合金机身、…
阅读更多...
Json数据上传—＞对象转换—＞存入MongoDB（SpringData提供的规范）

Json数据上传—＞对象转换—＞存入MongoDB（SpringData提供的规范）

上传json 代码实现 RestController RequestMapping("/api/hosp") public class ApiController{Autowiredprivate HospitalService hospitalService;PostMapping("saveHospital")public Result saveHosp(HttpServletRequest request){Map<String,String…
阅读更多...
Jetpack：015-Jetpack的是脚手架

Jetpack：015-Jetpack的是脚手架

文章目录 1. 概念介绍2. 使用方法2.1 核心思想2.2 具体内容 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack中小红点相关的内容&#xff0c;本章回中将介绍 脚手架。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧&#xff01; 1. 概念介绍 我们在本章回中介…
阅读更多...
【试题038】 逻辑与和赋值表达式例题

【试题038】 逻辑与和赋值表达式例题

1.题目&#xff1a;设int n;&#xff0c;执行表达式(n2)&&(n1)&&(n0)后&#xff0c;n的值是&#xff1f; 2.代码分析&#xff1a; //设int n;&#xff0c;执行表达式(n2)&&(n1)&&(n0)后&#xff0c;n的值是? int main() {int n;printf("…
阅读更多...
Java中的static关键字

Java中的static关键字

一、static关键字的用途 在《Java编程思想》P86页有这样一段话&#xff1a; “static方法就是没有this的方法。在static方法内部不能调用非静态方法&#xff0c;反过来是可以的。而且可以在没有创建任何对象的前提下&#xff0c;仅仅通过类本身来调用static方法。这实际上正是s…
阅读更多...
C语言 ——宽字符

C语言 ——宽字符

前言&#xff1a; 过去C语⾔并不适合⾮英语国家&#xff08;地区&#xff09;使⽤。 C语⾔最初假定字符都是单字节的。但是这些假定并不是在世界的任何地⽅都适⽤。 C语⾔字符默认是采⽤ASCII编码的&#xff0c;ASCII字符集采⽤的是单字节编码&#xff0c;且只使⽤了单字节中…
阅读更多...
YOLOv8改进实战 | 更换主干网络Backbone之2023最新模型LSKNet，旋转目标检测SOTA

YOLOv8改进实战 | 更换主干网络Backbone之2023最新模型LSKNet，旋转目标检测SOTA

前言 传统的YOLOv8系列中，Backbone采用的是较为复杂的C2f网络结构，这使得模型计算量大幅度的增加，检测速度较慢，应用受限，在某些真实的应用场景如移动或者嵌入式设备，如此大而复杂的模型时难以被应用的。为了解决这个问题，本章节通过采用LSKNet轻量化主干网络作为Backb…
阅读更多...
【LangChain系列 11】Prompt模版——拼装组合

【LangChain系列 11】Prompt模版——拼装组合

原文地址&#xff1a;【LangChain系列 11】Prompt模版——拼装组合 本文速读&#xff1a; 多prompt模版组合 单prompt模版拼装 在平常业务开发中&#xff0c;我们常常需要把一些公共模块提取出来作为一个独立的部分&#xff0c;然后将业务中去将这些模块进行组合。在LLM应用…
阅读更多...
有哪些比较好用的协同办公软件

有哪些比较好用的协同办公软件

在疫情期间&#xff0c;协同办公大放异彩&#xff0c;解决了很多公司线上办公的问题&#xff0c;所以在后疫情时代&#xff0c;协同办公软件成为了提高工作效率和团队协作的重要工具。 随着科技的不断进步&#xff0c;越来越多的协同办公软件涌现出来。在本文中&#xff0c;我们…
阅读更多...
YOLOv7-PTQ量化部署

YOLOv7-PTQ量化部署

目录 前言一、PTQ量化浅析二、YOLOv7模型训练1. 项目的克隆和必要的环境依赖1.1 项目的克隆1.2 项目代码结构整体介绍1.3 环境安装 2. 数据集和预训练权重的准备2.1 数据集2.2 预训练权重准备 3. 训练模型3.1 修改模型配置文件3.2 修改数据配置文件3.3 训练模型3.4 mAP测试 三、…
阅读更多...
【数组】移除元素（暴力遍历×双指针√）

【数组】移除元素（暴力遍历×双指针√）

一、力扣题目链接 27.移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 你不需要考虑数组中超出新长度后面的元素。 二、思路 要知道数组的元素在内存地址中是连续的&#xff0c;不…
阅读更多...
Docker数据管理、端口映射、容器互联

Docker数据管理、端口映射、容器互联

目录 一、Docker 的数据管理&#xff1a; 1&#xff0e;数据卷&#xff1a; 1.1 宿主机目录/var/www/html 挂载到容器中的/data1&#xff1a; 1.2 测试&#xff1a; 2&#xff0e;数据卷容器&#xff1a; 2.1 创建一个容器作为数据卷容器&#xff1a; 2.2 挂载a1容器中的数据卷…
阅读更多...
【Ubuntu18.04】Livox Tele-15使用教程

【Ubuntu18.04】Livox Tele-15使用教程

Livox Tele-15使用教程 引言1 下载并安装Livox Viewer1.1 打开Livox Viewer程序1.2 设备ip链接 2 览沃Livox SDK二次开发并封装ROS2.1 览沃Livox SDK安装2.2 览沃Livox livox_ros_driver 安装2.3 Launch 配置文件描述 3 保存lvx格式的数据文件3.1 使用览沃Viewer保存lvx文件3.2…
阅读更多...
SD NAND对比TF卡优势（以CSNP4GCR01-AMW为例）

SD NAND对比TF卡优势（以CSNP4GCR01-AMW为例）

最近做的一个项目&#xff0c; 需要加大容量存储&#xff0c;这让我想到之前在做ARM的开发板使用的TF卡方案&#xff0c;但是TF卡需要携带卡槽的&#xff0c;但是有限的PCB板布局已经放不下卡槽的位置。 这个时候就需要那种能够不用卡槽&#xff0c;直接贴在板子上面&#xff0…
阅读更多...
曾仕强老师视频+音频+电子书合集百度网盘资源

曾仕强老师视频+音频+电子书合集百度网盘资源

需要的扫码添加获取&#xff1a;
阅读更多...
存储优化知识复习二详细版解析

存储优化知识复习二详细版解析

存储优化 知识复习二 一、 选择题 1、 对数据库调优的方法中&#xff0c;最困难但是最有成效的是( )。 A、优化表的架构设计 B、添加内存 C、索引优化 D、查询语句优化 【参考答案】A2、 防止与处理死锁的方法有&#xff08; &#xff09;。 A、尽量避免或尽快处理阻塞 B、访…
阅读更多...
ZKP5.2 PLONK IOP

ZKP5.2 PLONK IOP

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 5: The Plonk SNARK (Dan Boneh) 5.2 Proving properties of committed polynomials overview Polynomial equality testing with KZG KZG: determined commitment (if the function is equal, then the commitment is equa…
阅读更多...
复习mysql中的事务

复习mysql中的事务

一个事务的开始和结尾必须是 start transaction | commit; rollback 事务特性 1.原子性&#xff1a;多个操作打包成一个整体&#xff0c;要么全部执行&#xff0c;要么一个都不执行。 不过这里的“一个都不执行”并不是真正的全不执行&#xff0c;只是看起来与没执行一样。…
阅读更多...
会声会影2024有哪些新功能？好不好用

会声会影2024有哪些新功能？好不好用

比如会声会影视频编辑软件&#xff0c;既加入光影、动态特效的滤镜效果&#xff0c;也提供了与色彩调整相关的LUT配置文件滤镜&#xff0c;可选择性大&#xff0c;运用起来更显灵活。会声会影在用户的陪伴下走过20余载&#xff0c;经过上百个版本的优化迭代&#xff0c;已将操作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023