Bootstrap4 总结

news2025/2/24 0:57:02

文章目录

  • Bootstrap4 总结
    • 概述
    • 安装
      • 使用CDN
      • 使用源码
    • 屏幕尺寸的分割点
    • 响应式容器(Containers)
      • .container-fluid
      • .container
      • .container-{breakpoint}
    • 网格系统(Gird system)
      • 指定列宽
        • 实现8列布局
      • 等列宽
      • auto列宽
      • 响应式列
    • 响应式工具类
      • display属性
      • 其他工具类
    • 组件
      • 按钮
      • 按钮组
      • 轮播图
      • 面包屑导航
      • 弹窗

Bootstrap4 总结

概述

Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。

安装

使用CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

使用源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  </head>
  <body>
    <script src="./libs/jquery/jquery-3.5.1.js"></script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

屏幕尺寸的分割点

  • Bootstrap的一大核心是响应式，底层原理是使用媒体查询为布局和页面创建合理的断点，根据这些断点给不同屏幕尺寸设置不同的CSS样式。
  • Bootstrap4设置了5个断点来构建响应式系统，5个断点分别为：Extral-Small、Small、Medium、Large、Extra large。
断点中缀尺寸
Extra-SmallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px

响应式容器(Containers)

  • Containers容器是Bootstrap中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必须的。
  • Containers容器用于包含、填充、内容居中使用。
  • Bootstrap带有三个不同的Containers容器：
    • .container：它在每个断点处会设置不同的max-width。
    • .container-fluid：在所有断点处都是width: 100%。
    • .container-{breakpoint}：默认是width: 100%，直到指定断点才会修改响应的值。
Extra small <576pxSmall ≥576pxMedium ≥768pxLarge ≥992pxExtra large ≥1200px
.container100%540px720px960px1140px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%100%100%100%1140px
.container-fluid100%100%100%100%100%

.container-fluid

使用.container-fluid作为全宽度容器，横跨视口的整个宽度。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">我是box</div>
  </body>
</html>

在这里插入图片描述

.container

.container类是一个响应式的、固定宽度的容器，这意味着它的最大宽度在每个断点处都会改变。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="container">我是box</div>
  </body>
</html>

在这里插入图片描述

.container-{breakpoint}

它们允许您指定一个在达到指定断点之前宽度为100%的类，之后我们对每个较高的断点应用max-width。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="container-md">我是box</div>
  </body>
</html>

在这里插入图片描述

网格系统(Gird system)

  • 在我们在开发一个页面时，经常会遇到一些列表（例如，商品列表），这些列表通常都是通过行和列来排版。为了方便我们对这种常见列表的布局，Bootstrap框架对它进行了封装，封装为一个网格系统（Grid system）。
  • Bootstrap网格系统是用于构建移动设备优先的强大布局系统，可支持12列网格、5 个断点和数十个预定义类。
  • 网格系统是有container、row、col三部分组成，底层使用flexbox来布局，并且支持12列网格布局。
    • 底层使用了强大的flexbox来构建弹性布局，并支持12列的网格布局。从Bootstrap2开始，网格系统从16 列转向12列网格，原因之一是12列比以前的16列系统更灵活。
    • 12列网格这意味着我们可将一行分解为12、6、4、3、2和1份：
      • 1列，独占12等份
      • 2列，每列占6等份
      • 3列，每列占4等份
      • 4列，每列占3等份
      • 6列，每列占2等份
      • 12列，每列占1等份

指定列宽

底层是 flex: 0 0 x%，max-width: x%

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-1 item">1</div>
        <div class="col-1 item">2</div>
        <div class="col-1 item">3</div>
        <div class="col-1 item">4</div>
        <div class="col-1 item">5</div>
        <div class="col-1 item">6</div>
        <div class="col-1 item">7</div>
        <div class="col-1 item">8</div>
        <div class="col-1 item">9</div>
        <div class="col-1 item">10</div>
        <div class="col-1 item">11</div>
        <div class="col-1 item">12</div>
      </div>
      <div class="row mr">
        <div class="col-2 item">1</div>
        <div class="col-2 item">2</div>
        <div class="col-2 item">3</div>
        <div class="col-2 item">4</div>
        <div class="col-2 item">5</div>
        <div class="col-2 item">6</div>
      </div>
      <div class="row mr">
        <div class="col-3 item">1</div>
        <div class="col-3 item">2</div>
        <div class="col-3 item">3</div>
        <div class="col-3 item">4</div>
      </div>
      <div class="row mr">
        <div class="col-4 item">1</div>
        <div class="col-4 item">2</div>
        <div class="col-4 item">3</div>
      </div>
      <div class="row mr">
        <div class="col-6 item">1</div>
        <div class="col-6 item">2</div>
      </div>
      <div class="row mr">
        <div class="col-12 item">1</div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

实现8列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container mr">
      <h2>方式一：</h2>
      <div class="row">
        <div class="col item">1</div>
        <div class="col item">2</div>
        <div class="col item">3</div>
        <div class="col item">4</div>
        <div class="col item">5</div>
        <div class="col item">6</div>
        <div class="col item">7</div>
        <div class="col item">8</div>
      </div>
      <h2>方式二：</h2>
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-3 item">1</div>
            <div class="col-3 item">2</div>
            <div class="col-3 item">3</div>
            <div class="col-3 item">4</div>
          </div>
        </div>
        <div class="col-6">
          <div class="row">
            <div class="col-3 item">5</div>
            <div class="col-3 item">6</div>
            <div class="col-3 item">7</div>
            <div class="col-3 item">8</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

等列宽

底层是 flex-grow: 1, max-width: 100%。该类网格系统仅用flexbox布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col item">1</div>
        <div class="col item">2</div>
        <div class="col item">3</div>
        <div class="col item">4</div>
        <div class="col item">5</div>
        <div class="col item">6</div>
        <div class="col item">7</div>
        <div class="col item">8</div>
        <div class="col item">9</div>
        <div class="col item">10</div>
        <div class="col item">11</div>
        <div class="col item">12</div>
        <div class="col item">13</div>
        <div class="col item">13</div>
        <div class="col item">13</div>
        <div class="col item">13</div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

auto列宽

底层是 flex: 0 0 auto; width: auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-auto item">helloworld</div>
        <div class="col item">1</div>
        <div class="col item">2</div>
        <div class="col item">3</div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

响应式列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">1</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">2</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">3</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">4</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">5</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">6</div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

响应式工具类

display属性

当我们在开发响应式页面时，可能会有这样的需求：

  • 某个功能在PC端可见，但是在移动端不可见。

  • 因为移动端的屏幕比较小，是不能把PC端中所有的内容都展示出来，所以有些不重要的内容可能在移动端就被简化了。

  • 这时我们就可以借用响应式的工具来实现该功能。

使用响应工具类：

  • 隐藏元素可以给某个元素添加 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类中的任何一个。

  • 显示元素可以给某个元素添加 .d-block 类或 .d-{sm,md,lg,xl,xxl}-block 类中的任何一个。

屏幕尺寸类
在所有尺寸的屏幕上隐藏.d-none
只在 xs 尺寸的屏幕上隐藏.d-none .d-sm-block
只在 sm 尺寸的屏幕上隐藏.d-sm-none .d-md-block
只在 md 尺寸的屏幕上隐藏.d-md-none .d-lg-block
只在 lg 尺寸的屏幕上隐藏.d-lg-none .d-xl-block
只在 xl 尺寸的屏幕上隐藏.d-xl-none
在所有尺寸的屏幕上显示.d-block
只在 xs 尺寸的屏幕上显示.d-block .d-sm-none
只在 sm 尺寸的屏幕上显示.d-none .d-sm-block .d-md-none
只在 md 尺寸的屏幕上显示.d-none .d-md-block .d-lg-none
只在 lg 尺寸的屏幕上显示.d-none .d-lg-block .d-xl-none
只在 xl 尺寸的屏幕上显示.d-none .d-xl-block

其他工具类

快速浮动（Float）：

  • float-left

  • float-right

文本（Text）：

  • text-left、text-right、text-center

  • text-{sm、md、lg、xl}-left

边框：

  • borde border-top border-left …

  • border border-primary border-success

截断文本：

  • text-truncate

组件

按钮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="btn btn-primary">按钮一</div>
    <div class="btn btn-warning">按钮一</div>
    <div class="btn btn-info">按钮一</div>

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>

    <script src="./libs/jquery/jquery-3.5.1.js"></script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

在这里插入图片描述

按钮组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">8</button>
      </div>
    </div>

    <script src="./libs/jquery/jquery-3.5.1.js"></script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

在这里插入图片描述

轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  </head>
  <body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./images/0.jpg" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./images/1.jpg" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./images/1.jpg" class="d-block w-100" alt="..." />
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>

    <script src="./libs/jquery/jquery-3.5.1.js"></script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

在这里插入图片描述

面包屑导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .mt {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container mt">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </nav>
    </div>
  </body>
</html>

在这里插入图片描述

弹窗

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  </head>
  <body>
    <button id="btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <div class="modal" id="myModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./libs/jquery/jquery-3.5.1.js"></script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
    <script>
      $("#btn").click("click", function () {
        $("#myModal").modal("show");
      });
    </script>
  </body>
</html>

在这里插入图片描述

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

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

相关文章

还是搞不懂Anaconda是什么?读这一篇文章就够了

还是搞不懂Anaconda是什么?读这一篇文章就够了

文章目录 1 Anaconda介绍2 conda介绍3 安装Anaconda4 Anaconda的使用配置Anaconda源 5 创建虚拟环境并使用5.1 创建虚拟环境5.2 查看所有环境5.3 激活环境5.4 安装包5.4.1 conda方式5.4.2 pip方式5.4.3 从Anaconda.org安装包 5.5 查看该环境的所有包5.6 测试是否安装成功 6 退出…
阅读更多...
百分点科技蝉联中国数据治理解决方案市场第二

百分点科技蝉联中国数据治理解决方案市场第二

近日&#xff0c;IDC发布了《中国数据治理市场份额&#xff0c;2022》报告&#xff0c;报告显示&#xff0c;2022年中国数据治理解决方案市场相比2021年增长了7.4%&#xff0c;百分点科技仍然保持领先优势&#xff0c;蝉联数据治理解决方案市场第二。 中国数据治理市场是一个发…
阅读更多...
win7 修改粘滞键绕过开机密码（实操步骤详解）

win7 修改粘滞键绕过开机密码（实操步骤详解）

文章目录 win7 使用粘滞键绕过开机密码声明 win7 使用粘滞键绕过开机密码 趁现在还没完全启动关机断电 再次开机选择启动修复 取消系统还原&#xff0c;等待几分钟 查看隐私说明 进入记事本可以打开文件 打开文件可以在C盘修改系统文件 找到粘滞键程序修改名称 找到cm…
阅读更多...
leetcode_第17题_缺失的第一个正数——原地哈希

leetcode_第17题_缺失的第一个正数——原地哈希

题目 题目 分析 正常思路&#xff1a;另外制作一个哈希表&#xff0c;然后遍历就ok 但是这样不符合题目空间复杂度要求&#xff0c;所以采用原地哈希就可以了。 思路&#xff1a;把正常数字nums[i]交换存储到下标位置为nums[i]-1的地方&#xff0c;不正常数字不管。&#xff…
阅读更多...
Rdkit|最大公共子结构

Rdkit|最大公共子结构

github&#xff1a;地址 文章目录 Rdkit|最大公共子结构rdFMCS.FindMCS参数bondCompareatomComparematchValencesringMatchesRingOnlycompleteRingsOnlymatchChiralTag 高亮分子的不同子结构参考 Rdkit|最大公共子结构 rdFMCS.FindMCS mols: 分子对象maximizeBonds一个结构由…
阅读更多...
springboot 获取上传到minio服务器的文件大小

springboot 获取上传到minio服务器的文件大小

springboot 获取上传到minio服务器的文件大小 前言探究获取文件大小的方法实践及示例 前言 一般minio上传文件&#xff0c;会在上传时拿到文件大小&#xff0c;并保存在数据库中。若想直接从minio上获取&#xff0c;如何获取&#xff1f; 探究获取文件大小的方法 pom依赖 &l…
阅读更多...
ubuntu安装nginx

ubuntu安装nginx

1、apt-get安装nginx 1.1安装最好用root用户安装 不然很多文件权限的报错会让人崩溃 sudo su root apt-get install nginx nginx -v #查看安装版本 service nginx start #启动nginx 1.2查看网页&#xff0c;能看到nginx的页面 1.3核对nginx的文件 find / -name nginx 看…
阅读更多...
【UE4 C++】02-编译、生成当前的C++程序

【UE4 C++】02-编译、生成当前的C++程序

一、编译 编译快捷键&#xff1a; CtrlF7 如果不使用快捷键&#xff0c;可以点击顶部菜单栏中的下拉按钮&#xff0c;然后选择自定义 点击添加命令 点击“生成”&#xff0c;选择编译“”&#xff0c;点击“确定” 此时可以看到顶部菜单栏多了一个用于编译的按钮 二、生成 鼠…
阅读更多...
目标百万尼特亮度，这家公司用激光背光提升XR显示技术

目标百万尼特亮度，这家公司用激光背光提升XR显示技术

​亮度不足一直是AR/VR显示中想要解决的难题之一&#xff0c;目前的AR光源中有多种方案&#xff0c;比如Micro LED、LCoS、DLP等&#xff0c;尽管Micro LED在亮度等方面优势明显&#xff0c;但制造工艺还不成熟。总的来看&#xff0c;目前AR中高亮度解决方案还有很长一段路​要…
阅读更多...
Build input file cannot be found: .pch

Build input file cannot be found: .pch

xcode真机运行时&#xff0c;报错&#xff1a;Build input file cannot be found: /Users/mac/Desktop/projects/xxx/xxx.pch 实际查看发现&#xff0c;项目中的.pch文件存在&#xff0c;但运行时报错。修改配置里的.pch文件路径后&#xff0c;正常。
阅读更多...
聊聊用户故事与测试启发

聊聊用户故事与测试启发

这是鼎叔的第六十六篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注本公众号《敏捷测试转型》&#xff0c;星标收藏&#xff0c;大量原创思考文章陆续推出。 用户故事的概念于1998年被正式提出&#xff0c;在2001年开始逐步成熟。目前&#xff0c;…
阅读更多...
【G431】DAC+DMA输出正弦波

【G431】DAC+DMA输出正弦波

文章目录 前言1.CubeMx的配置步骤3.测试代码4.演示效果 总结 前言 之前有试过用纯的DAC输出正弦波但是效果不是很好&#xff0c;波形不连续&#xff0c;可以很明显的看出断层 之后尝试了DMA传输&#xff0c;发现波形明显变得更加顺滑。 1.CubeMx的配置步骤 下面以主频150MHz…
阅读更多...
Avalon总线协议（二）

Avalon总线协议（二）

4.Avalon中断接口 中断接口允许从组件(agent components)能够向主组件(host components)发送事件信号。 例如&#xff0c;DMA控制器可以在完成一个DMA传输后中断处理器。 4.1 中断发送器 中断发送器将单个中断信号驱动到中断接收器。irq信号的时序必须与其相关联时钟的上升…
阅读更多...
学位论文查找下载数据库

学位论文查找下载数据库

中文学位论文可去知网、万方查找下载。 外文学位论文可去ProQuest学位论文全文数据库查找下载。 没有知网、万方、ProQuest等数据库使用权限可去文献党下载器使用这些数据库查找下载学位论文。 文献党下载器首页下载客户端&#xff0c;登录客户端进入资源库&#xff0c;在资…
阅读更多...
Prometheus 联邦集群配置及应用

Prometheus 联邦集群配置及应用

目录 前言一、Prometheus 联邦配置1.1 安装 Prometheus1.2 配置 Prometheus 二、Prometheus 联邦验证 前言 什么是 Prometheus 联邦集群&#xff1f;又是在什么样的场景下应用呢&#xff1f;首先&#xff0c;我们知道 Prometheus 是一个强大的监控平台&#xff0c;它是针对容器…
阅读更多...
抖音seo源码--矩阵系统开发者日志

抖音seo源码--矩阵系统开发者日志

这是矩阵系统源码开发者的日志分享&#xff0c;我们致力于为开发者们提供优质的SEO源码。我们研究用户行为、数据分析和搜索引擎算法&#xff0c;以提高内容的搜索排名和曝光度。通过不断优化关键词、元数据和链接策略&#xff0c;我们帮助抖音用户更好地被发现和分享。这个日志…
阅读更多...
安卓JNI从0到1入门教程（二）

安卓JNI从0到1入门教程（二）

经过上一篇《安卓JNI从0到1入门教程&#xff08;一&#xff09;》介绍&#xff0c;我们对JNI有了初步认识&#xff0c;接下来我会从ndk-build方式和cmake方式分别来介绍怎么构建native库&#xff1a; 一、ndk-build ndk-build依赖配置文件Android.mk&#xff0c;存放代码的位…
阅读更多...
机器学习概括

机器学习概括

文章目录 一、机器学习是什么&#xff1f;二、模型训练YouTube流量预测1. 先写一个具有未知参数的函数&#xff08;Function&#xff09;2. 定义损失&#xff08;从训练数据进行计算&#xff09;3.最优化4.结果分析 Back to framework1.带有未知数的函数&#xff1a;2.定义损失…
阅读更多...
20.自定义tabBar(使用vant中的tabbar)

20.自定义tabBar(使用vant中的tabbar)

自定义tabBar就是不用官方提供的tabBar了&#xff0c;而是自己搞 目录 1 配置 2 使用vant组件库做TabBar 2.1 引入组件 2.2 使用组件 2.3 自定义图标 2.4 把info与store进行绑定 2.5 tab页面的切换 2.6 改变激活状态下的文本颜色 1 配置 首先你需要在项目根…
阅读更多...
4.2 “ P4G42_V1

4.2 “ P4G42_V1

P4G42_V1 产品参数 产品型号 P4G42_V1 尺寸(mm) 124*90*12mm&#xff08;不含安装支架&#xff09; 屏幕尺寸 4.2 inch 显示技术 电子墨水屏显示 显示区域(mm) 84.6(H) * 63.4(V) 分辨率(像素) 400*300 像素密度 120dpi 显示颜色 黑/白 外观颜色 白色&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023