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

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

news 2025/11/9 2:54:45

目录

  • 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

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/9/29 21:28:27

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/11/8 10:46:11

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/11/7 14:06:10

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/11/7 19:35:21

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/9/19 10:25:57

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/11/8 23:43:54

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/9/24 1:06:11

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2025/11/7 18:13:07

C#最佳实践：为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...

编程新知 2025/11/2 13:29:22