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

Bootstrap的行、列布局设计(网络系统设计)

news 2025/9/13 20:25:12

目录

  • 00-基础知识
  • 01-等宽列布局
  • 02-指定某一列的宽度
  • 03-根据内容自动改变列的宽度
  • 04-五种预定义列宽度 `.col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*`
  • 05-不同视口宽度按不同的分列方案划分
  • 06-删除列内容的盒模型的外边距
  • 07-超过12列怎么办？
  • 08-重新排列各列的顺序
    • 08-1-利用类 .order-* 对列进行排序
    • 08-2-利用类 .order-first和类 .order-last 对列进行排序
  • 09-给列的位置添加偏移量(实现列偏移)
    • 09-1-使用.offset-md-*类实现列偏移
    • 09-2-利用类ml-auto、类mr-auto调整左右外边距实现列偏移
  • 10-行和列的嵌套

00-基础知识

01、Bootstrap的网格系统将屏幕宽度分为12列。

01-等宽列布局

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>等宽列布局网页效果</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">等宽列布局网页效果</h3>
<div class="row"><div class="col border py-3 bg-light">二分之一</div><div class="col border py-3 bg-light">二分之一</div>
</div>
<div class="row"><div class="col border py-3 bg-light">三分之一</div><div class="col border py-3 bg-light">三分之一</div><div class="col border py-3 bg-light">三分之一</div>
</div>
<div class="row"><div class="col border py-3 bg-light">四分之一</div><div class="col border py-3 bg-light">四分之一</div><div class="col border py-3 bg-light">四分之一</div><div class="col border py-3 bg-light">四分之一</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

02-指定某一列的宽度

示例代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置一个列宽布局</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">指定某一列的宽度</h3>
<div class="row"><div class="col border py-3 bg-light">左</div><div class="col-7 border py-3 bg-light">中</div><div class="col border py-3 bg-light">右</div>
</div>
<div class="row"><div class="col-3 border py-3 bg-light">左</div><div class="col border py-3 bg-light">中</div><div class="col border py-3 bg-light">右</div>
</div>
</body>
</html>

提问：Bootstrap的类col、类col-7、类col-3有何区别？
答：

  1. 类col：

    • 这是用于定义网格列的基本类。
    • 如果您只使用类col，它将默认为等宽的列，会自动均分可用的列宽，每列都会占用相同的空间。
    • 示例：<div class="col">...</div>

  2. 类col-7：

    • 这是一个具有数字后缀的类，例如col-7，它用于定义一个具有指定宽度的网格列。
    • 数字后缀表示列应该占用的网格列数。在这种情况下，col-7表示该列应该占用网格系统中的7列。
    • 该类允许您创建不等宽的列，以根据设计需要分配不同的宽度。
    • 示例：<div class="col-7">...</div>

  3. 类col-3：

    • 类col-3也是一个具有数字后缀的类，例如col-3，它用于定义一个具有不同宽度的网格列。
    • 数字后缀表示列应该占用的网格列数。在这种情况下，col-3表示该列应该占用网格系统中的3列。
    • 与col-7类似，col-3允许您创建不等宽的列，以满足设计需求。
    • 示例：<div class="col-3">...</div>
      代码运行效果如下：
      在这里插入图片描述

03-根据内容自动改变列的宽度

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>根据内容自动改变列的宽度</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script><style>h3 {color: red;}</style></head>
<body class="container">
<h3 class="mb-4">根据内容自动改变列的宽度</h3>
<div class="row"><div class="col border py-3 bg-light">左</div><div class="col-md-auto border py-3 bg-light">醉里且贪欢笑,要愁那得工夫。近来始觉古人书,信著全无是处。</div><div class="col border py-3 bg-light">右</div>
</div>
<div class="row justify-content-md-center"><div class="col border py-3 bg-light">左</div><div class="col-md-auto border py-3 bg-light">醉里且贪欢笑,要愁那得工夫。</div><div class="col border py-3 bg-light">右</div>
</div>
</body>
</html>

主要是通过类 col-md-auto 实现：
col-md-auto：

  • col-md-auto类用于定义一个列元素的宽度在中等屏幕（md屏幕尺寸，通常指的是大于等于768像素的屏幕宽度）下应该根据其内容自动调整。
  • 当应用了col-md-auto类的列元素包含文本或其他内容时，该列将自动调整其宽度，以适应其内容的大小。
  • 这个类通常用于创建响应式布局，使得在中等屏幕尺寸下，列的宽度可以根据内容的多少而自动调整，以确保内容不会溢出或显得过于拥挤。
    运行效果如下图所示：
    在这里插入图片描述

04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*

.col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*五种预定义宽度从小到大，分别为特小、小、中、中、特大。
当使用Bootstrap时，可以通过不同的CSS类来定义不同的列宽度。以下是五种常见的预定义列宽度类的示例代码：

  1. .col-*：在所有视口宽度尺寸上等分列宽。
<div class="container"><div class="row"><div class="col">1/3</div><div class="col">1/3</div><div class="col">1/3</div></div>
</div>
  1. .col-sm-*：在视口宽度尺寸大于等于576px时等分列宽，如果尺寸小于576px，则列堆叠在一起，即每个列占据整行的宽度。
<div class="container"><div class="row"><div class="col-sm">1/2</div><div class="col-sm">1/2</div></div>
</div>
  1. .col-md-*：在视口宽度尺寸大于等于768px时等分列宽，如果尺寸小于768px，则列堆叠在一起，即每个列占据整行的宽度。
<div class="container"><div class="row"><div class="col-md">1/4</div><div class="col-md">1/4</div><div class="col-md">1/4</div><div class="col-md">1/4</div></div>
</div>
  1. .col-lg-*：在视口宽度尺寸大于等于992px时等分列宽，如果尺寸小于992px，则列堆叠在一起，即每个列占据整行的宽度。
<div class="container"><div class="row"><div class="col-lg">1/2</div><div class="col-lg">1/2</div></div>
</div>
  1. .col-xl-*：在视口宽度尺寸大于等于1200px时等分列宽，如果尺寸小于1200px，则列堆叠在一起，即每个列占据整行的宽度。
<div class="container"><div class="row"><div class="col-xl">1/3</div><div class="col-xl">1/3</div><div class="col-xl">1/3</div></div>
</div>

这些示例代码演示了如何使用不同的列宽度类来创建响应式的网格布局，以在不同屏幕尺寸上呈现不同的列宽。

进阶示例代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>水平排列布局的网页效果</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">水平排列</h3>
<!--在视口尺寸大于等于576px时等分列宽-->
<div class="row"><div class="col-sm-8 border py-3 bg-light">col-sm-8</div><div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在视口尺寸大于等于768px时等分列宽-->
<div class="row"><div class="col-md-8 border py-3 bg-light">col-md-8</div><div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>
</body>
</html>

在上面的代码中，对于第1个div而言：

<div class="row"><div class="col-sm-8 border py-3 bg-light">col-sm-8</div><div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>

当视口宽度大于等于576px时，第1个<div class="row">中的列会按照以下方式显示：

  1. <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>：在小于576px的视口上，这个列会占据整行的宽度，但在大于等于576px的视口上，由于它使用了col-sm-8类，它会占据父容器的8/12（2/3）的宽度，剩余的4/12（1/3）的宽度留给了下一个列。

  2. <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>：在小于576px的视口上，这个列会占据整行的宽度，但在大于等于576px的视口上，由于它使用了col-sm-4类，它会占据父容器的4/12（1/3）的宽度，与上一个列一起填满整行。

因此，当视口宽度大于等于576px时，第一个<div class="row">中的列将水平排列，一个占据2/3的宽度，另一个占据1/3的宽度。
相关运行截图如下：
在这里插入图片描述
在这里插入图片描述

在上面的代码中，对于第2个div而言：

<div class="row"><div class="col-md-8 border py-3 bg-light">col-md-8</div><div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>

  1. 当视口宽度小于768px时，Bootstrap会默认将列堆叠在一起，每个列占据整行的宽度。因此，无论是<div class="col-md-8 border py-3 bg-light">col-md-8</div>还是<div class="col-md-4 border py-3 bg-light">col-md-4</div>都会占据整个宽度，一个在上面，一个在下面，呈垂直排列。

  2. 当视口宽度大于等于768px（在md级别及以上）时，第二个<div class="row">中的列会按照指定的列宽占据父容器的宽度。具体来说：

    • <div class="col-md-8 border py-3 bg-light">col-md-8</div>：会占据父容器的8/12（2/3）的宽度。

    • <div class="col-md-4 border py-3 bg-light">col-md-4</div>：会占据父容器的4/12（1/3）的宽度。

    这两个列会水平排列在同一行，一个占据2/3的宽度，另一个占据1/3的宽度。
    运行效果如下图所示：
    在这里插入图片描述

    在手机上实测的效果如下：
    在这里插入图片描述
    根据上面的介绍，可以知道，昊虹君的移动端浏览器的视口大小肯定是小于576px的。

在平板上实测的效果如下：
在这里插入图片描述
根据上面的介绍，可以知道，昊虹君的平板上浏览器的视口大小肯定是大于等于768px的。

05-不同视口宽度按不同的分列方案划分

在小于576px的设备上显示为一个全宽列和一个半宽列，在大于等于576px型设备上显示为一列，分别占8份和4份(一共12份)。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>不同视口宽度按不同的分列方案划分</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">不同视口宽度按不同的分列方案划分</h3>
<!--在小于576px的设备上显示为一个全宽列和一个半宽列，在大于等于576px型设备上显示为一列，分别占8份和4份(一共12份)-->
<div class="row"><div class="col-12 col-sm-8 border py-3 bg-light">.col-12 .col-sm-8</div><div class="col-6 col-sm-4 border py-3 bg-light">.col-6 .col-sm-4</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
在这里插入图片描述

06-删除列内容的盒模型的外边距

在这里插入图片描述
可以利用类no-gutters来消除列内容的左右页边距，即margin-left和margin-right。

Bootstrap 的 no-gutters 类用于去除列（col）内容之间的左右外边距，以便在水平方向上没有间隙。这样可以创建水平排列的列，使它们之间没有任何水平空白间隔，从而实现更紧凑的布局。这并不影响列上下的外边距，所以在垂直方向上仍然会有默认的上下外边距。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>删除列内容的左右外边距</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">删除列内容的左右外边距</h3><div class="row"><div class="col border py-3 bg-light">Column 1</div><div class="col border py-3 bg-light">Column 2</div>
</div><div class="row no-gutters"><div class="col border py-3 bg-light">Column 1</div><div class="col border py-3 bg-light">Column 2</div>
</div></body>
</html>

运行效果如下：
在这里插入图片描述

07-超过12列怎么办？

如果在一行中放置超过12列，则额外的列将在新行中显示。

08-重新排列各列的顺序

08-1-利用类 .order-* 对列进行排序

可以使用类 .order-* 对列进行排序，Bootstrap提供了 .order-1 到.order-12 共12个级别的顺序，在主流浏览器上都能生效。

注意：没有定义.order-* 类的元素默认排在最前面。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>重新排列各列的顺序</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">重新排列各列的顺序</h3>
<div class="row"><div class="col order-12 py-3 border bg-light">order-12</div><div class="col order-1 py-3 border bg-light">order-1</div><div class="col order-6 py-3 border bg-light">order-6</div><!--没有定义.order-* 类的元素默认排在最前面。--><div class="col py-3 border bg-light">col</div>
</div>
</body>
</html>

在这里插入图片描述

08-2-利用类 .order-first和类 .order-last 对列进行排序

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>使用order-first和order-last类</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-4">使用order-first和order-last类排列顺序</h3>
<div class="row"><div class="col order-last py-3 border bg-light">order-last</div><div class="col py-3 border bg-light">col</div><div class="col order-first py-3 border bg-light">order-first</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

09-给列的位置添加偏移量(实现列偏移)

09-1-使用.offset-md-*类实现列偏移

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>使用.offset-md-*类实现列偏移</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">使用.offset-md-*类实现列偏移</h3>
<div class="row"><div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row"><div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-3 .offset-md-3</div><div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-3 .offset-md-3</div>
</div>
<div class="row"><div class="col-md-4 py-3 border bg-light">.col-md-4</div><div class="col-md-4 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

09-2-利用类ml-auto、类mr-auto调整左右外边距实现列偏移

ml-auto类应用于元素的左边距，使这个元素向右移动，直到容器的边界或另一个元素接触，从而实现右对齐的效果。
mr-auto类应用于元素的右边距，使这个元素向左移动，直到容器的边界或另一个元素接触，从而实现左对齐的效果。
这两个类常用于在导航栏、按钮组和其他布局中调整元素的位置，以实现更好的视觉效果和用户体验。
示例代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>使用margin类实现列偏移</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">使用margin类实现列偏移</h3>
<div class="row"><div class="col-md-4 py-3 border bg-light">.col-md-4</div><div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>
<div class="row"><div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div><div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
</div>
<div class="row"><div class="col-auto mr-auto py-3 border bg-light">.col-auto .mr-auto</div><div class="col-auto py-3 border bg-light">.col-auto</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

10-行和列的嵌套

可以在某个行和列形成的方块中嵌套行和列，示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>行列嵌套布局网页效果</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">行列嵌套布局效果</h3>
<div class="row"><div class="col-6"><!--嵌套行和列--><div class="row border no-gutters"><div class="col-3"><img src="1.jpg" alt=""></div><div class="col-9 pl-3">哈密瓜主产于吐哈盆地（即吐鲁番盆地和哈密盆地的统称），它形态各异，风味独特，瓜肉肥厚，清脆爽口。</div></div></div><div class="col-6"><!--嵌套行和列--><div class="row border no-gutters"><div class="col-3"><img src="2.jpg" alt=""></div><div class="col-9 pl-3">葡萄为著名水果，生食或制葡萄干，并酿酒，酿酒后的酒脚可提酒石酸，根和藤药用能止呕、安胎。</div></div></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

相关文章：

Bootstrap的行、列布局设计(网络系统设计)

目录 00-基础知识01-等宽列布局02-指定某一列的宽度03-根据内容自动改变列的宽度04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*05-不同视口宽度按不同的分列方案划分06-删除列内容的盒模型的外边距07-超过12列怎么办&#xff1f;08-重新排列各列的顺序…...

编程日记 2023/9/5 15:30:56

1.1 计算机网络在信息时代中的作用

思维导图&#xff1a; 正文&#xff1a; 我的理解&#xff1a; 这段话是一本书或课程的第一章简介&#xff0c;它的目的是为读者或学生提供一个关于计算机网络基础知识的框架或大纲。 首先&#xff0c;它强调了这章是整本书的一个概览&#xff0c;会先介绍计算机网络在信息时…...

编程日记 2023/9/5 15:29:56

mysql CONCAT使用

问题 有一个查找数据的mysql语句&#xff1a;SELECT DISTINCT fund_id,version,statistic_date FROM fund_nv_divident WHERE version ( SELECT max(version) FROM fund_nv_divident) and statistic_date > ‘2023-06-04’ and fund_id not in (SELECT DISTINCT fund_id f…...

编程日记 2023/9/5 15:28:55

maven基础学习

什么是maven 构建 依赖 maven核心概念坐标 在黑窗口使用maven命令生成maven工程 pom.xml 想导入哪个jar包把它的坐标放到dependency里就可以 maven核心概念POM maven核心概念约定的目录结构 执行maven的构建命令 清理操作&#xff0c;clean 编译操作 compile 测试操作 test 打包…...

编程日记 2023/9/5 15:27:53

uniapp移动端地图，点击气泡弹窗并实现精准定位

记录移动端地图map组件的使用 需求记录&#xff1a; 移动端地图部分需要展示两个定位点&#xff0c;上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡&#xff0c;弹出定位点的信息。 效果图如下&#xff1a; map在nvue中的使用。直接用nvue可以直接…...

编程日记 2023/9/5 15:26:51

2023牛客暑期多校训练营7 CI「位运算」「根号分治+容斥」

C-Beautiful Sequence_2023牛客暑期多校训练营7 (nowcoder.com) 题意&#xff1a; 给定一个b序列&#xff0c;a序列满足 a [ i − 1 ] < a [ i ] a[i-1]<a[i] a[i−1]<a[i]且 a [ i ] ⊕ a [ i 1 ] b [ i ] a[i]\oplus a[i1]b[i] a[i]⊕a[i1]b[i]&#xff0c;求字…...

编程日记 2023/9/5 15:25:50

YOLOv5算法改进（10）— 替换主干网络之GhostNet

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。GhostNet是一种针对计算机视觉任务的深度神经网络架构&#xff0c;它于2020年由中国科学院大学的研究人员提出。GhostNet的设计目标是在保持高精度的同时&#xff0c;减少模型的计算和存储成本。GhostNet通过引入Ghost模块…...

编程日记 2023/9/5 15:24:49

Android Canvas的使用

android.graphics.Canvas 一般在自定义View中&#xff0c;重写 onDraw(Canvas canvas) 方法时用到。 /*** Implement this to do your drawing.** param canvas the canvas on which the background will be drawn*/Overrideprotected void onDraw(Canvas canvas) {super.onDra…...

编程日记 2023/9/5 15:23:48

AI批量写文章伪原创：基于ChatGPT长文本模型，实现批量改写文章、批量回答问题（长期更新）

import traceback import openai import osopenai.api_key = ""conversation=[{"role": "system", "content": "You are a helpful assistant."}] max_history_len = 20 first_message = Nonedir = rJ:\ai\input #要改写的文…...

编程日记 2023/9/5 15:22:46

git常用场景记录 | 拉取远程分支A合并到本地分支B - 删除上一次的commit

文章目录 git常用场景记录拉取远程分支A合并到本地分支B本地分支B存在未add与commit的代码 删除上一次的commit已经push到远程库 git常用场景记录 doing&#xff0c;最后更新9.5 拉取远程分支A合并到本地分支B 需求描述 在团队合作时&#xff0c;我自己的本地分支B功能已经实现…...

编程日记 2023/9/5 15:21:45

源码角度解析SpringBoot 自动配置

文章目录 前言一、了解相关注解1.Condition注解2.Enable注解 二、SpringBoot自动配置1.SpringBootApplication注解2.SpringBootConfiguration注解3.EnableAutoConfiguration注解4.Conditional注解 总结 前言 Spring Boot 自动配置是 Spring Boot 的核心特性之一&#xff0c;它…...

编程日记 2023/9/5 15:20:44

【原创】H3C路由器OSPF测试

网络拓扑图 路由器配置&#xff1a; 路由器1上接了4跟线&#xff0c;分别为这四个接口配置IP地址。 # interface GigabitEthernet0/0/0port link-mode routecombo enable copperip address 2.1.1.2 255.255.255.0 # interface GigabitEthernet0/0/1port link-mode routecombo…...

编程日记 2023/9/5 15:19:42

计算机视觉：轨迹预测综述

计算机视觉&#xff1a;轨迹预测综述 轨迹预测的定义轨迹预测的分类基于物理的方法&#xff08;Physics-based&#xff09;基于机器学习的方法&#xff08;Classic Machine Learning-based&#xff09;基于深度学习的方法&#xff08;Deep Learning-based&#xff09;基于强化学…...

编程日记 2023/9/5 15:18:40

三维跨孔电磁波CT数据可视化框架搭建

三维跨孔电磁波CT数据可视化框架搭建 文章目录 三维跨孔电磁波CT数据可视化框架搭建1、三维CT可视化结果2、matlab代码2.1、CT数据格式整理并保存2.2、三维可视化 利用matlab实现对跨孔电磁波CT实测数据反演&#xff0c;并搭建了三维CT数据可视化框架&#xff0c;可装填实测CT反…...

编程日记 2023/9/5 15:17:38

OC和Swift混编，导入头文件‘xxx-Swift.h‘ file not found

在OC的项目里加入Swift代码&#xff0c;创建完桥接文件后&#xff0c;需要倒入Swift头文件&#xff0c;头文件的格式为“项目名-Swift.h”。 如下图&#xff0c;我在Xcode上看到我的项目名为YichangPark&#xff0c;导入 #import "YiChangPark-Swift.h" 之后提示 “Y…...

编程日记 2023/9/5 15:16:37

一文读懂HOOPS Native平台：快速开发桌面端、移动端3D应用程序！

HOOPS Native Platform是用于在桌面和移动平台以及混合现实应用程序上构建3D工程应用程序的首要工具包。它由三个集成良好的软件开发工具包(SDK)组成&#xff1a;HOOPS Visualize、HOOPS Exchange、HOOPS Publish。HOOPS Visualize 是一个强大的图形引擎&#xff0c;适用于本机…...

编程日记 2023/9/5 15:15:35

Scrum工作模式及Scrum工具

Scrum工作模式是一种敏捷软件开发方法&#xff0c;其核心是团队合作和自我组织&#xff0c;旨在通过短周期的迭代开发&#xff0c;实现快速反馈和持续改进。 Scrum工作模式包括以下角色和活动&#xff1a; 1、产品负责人&#xff08;Product Owner&#xff09;&#xff1a;负…...

编程日记 2023/9/5 15:14:34

[ros][ubuntu]ros在ubuntu18.04上工作空间创建和发布一个话题

构建catkin工作空间 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src catkin_init_workspace cd ~/catkin_ws/ catkin_make 配置环境变量 echo "source ~/catkin_ws/devel/setup.bash" >> ~/.bashrc source ~/.bashrc 检查环境变量 echo $ROS_PACKAGE_PATH…...

编程日记 2023/9/5 15:13:33

我的区块链笔记

区块链 中心化的账本&#xff0c;个人节点和中心节点的地位不对等&#xff0c;中心节点说了算。去中心化&#xff0c;个人节点就是公平的&#xff0c;根据一套规则&#xff0c;叫做公比机制。 区块链的本质&#xff0c;就是数据存储方式 区块链使用密码学算法产生的区块&…...

编程日记 2023/9/5 15:12:32

Spring事务（ACID特性、隔离级别、传播机制、失效场景）

一、事务的ACID特性 原子性&#xff08;Atomicity&#xff09; 原子性是指事务是一个不可分割的工作单位&#xff0c;事务中的操作要么都发生&#xff0c;要么都不发生。一致性&#xff08;Consistency&#xff09; 事务前后数据的完整性必须保持一致。隔离性&#xff08;Isola…...

编程日记 2023/9/5 15:11:31

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/8/22 5:05:23

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/8/25 15:23:12

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/9/9 10:08:24

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2025/9/5 23:31:07

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/9/7 8:46:40

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2025/9/9 10:06:21