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

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

news 2026/2/10 18:37:17

目录

  • 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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2026/2/10 3:44:54

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53