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

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

news 文章来源：https://blog.csdn.net/wenhao_ir/article/details/132667178 2025/5/14 17:34:49

目录

  • 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

机器学习笔记之最优化理论与方法(六)无约束优化问题——最优性条件

机器学习笔记之最优化理论与方法——无约束优化问题[最优性条件] 引言无约束优化问题无约束优化问题最优解的定义 无约束优化问题的最优性条件无约束优化问题的充要条件无约束优化问题的必要条件无约束优化问题的充分条件 引言 本节将介绍无约束优化问题&#xff0c;主要介绍无…...

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

E5061B/是德科技keysight E5061B网络分析仪

181/2461/8938产品概述 是德科技E5061B(安捷伦)网络分析仪在从5 Hz到3 GHz的宽频率范围内提供通用的高性能网络分析。E5061B提供ENA系列常见的出色RF性能&#xff0c;还提供全面的LF(低频)网络测量能力&#xff1b;包括内置1 Mohm输入的增益相位测试端口。E5061B从低频到高频的…...

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

2.4 PE结构：节表详细解析

节表&#xff08;Section Table&#xff09;是Windows PE/COFF格式的可执行文件中一个非常重要的数据结构&#xff0c;它记录了各个代码段、数据段、资源段、重定向表等在文件中的位置和大小信息&#xff0c;是操作系统加载文件时根据节表来进行各个段的映射和初始化的重要依据…...

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

Vue2项目练手——通用后台管理项目第五节

Vue2项目练手——通用后台管理项目 首页组件布局面包屑&tag面包屑使用组件使用vuex存储面包屑数据src/store/tab.jssrc/components/CommonAside.vuesrc/components/CommonHeader.vue tag使用组件文件目录CommonTag.vueMain.vuetabs.js 用户管理页新增功能使用的组件页面布局…...

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

软件工程学术顶会——ESEC/FSE 2022 议题（网络安全方向）清单、摘要与总结

总结 本次会议中网络安全相关议题涵盖区块链、智能合约、符号执行、浏览器API模糊测试等不同研究领域。 热门研究方向: 1. 基于深度学习的漏洞检测与修复 2. 基于AI的自动漏洞修复 3. 模糊测试与漏洞发现 冷门研究方向: 1. 多语言代码的漏洞分析 2. 代码审查中的软件安全 3. 浏…...

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

从C语言到C++_36(智能指针RAII)auto_ptr+unique_ptr+shared_ptr+weak_ptr

目录 1. 智能指针的引入_内存泄漏 1.1 内存泄漏 1.2 如何避免内存泄漏 2. RAII思想 2.1 RAII解决异常安全问题 2.2 智能指针原理 3. auto_ptr 3.1 auto_ptr模拟代码 4. unique_ptr 4.1 unique_ptr模拟代码 5. shared_ptr 5.1 shared_ptr模拟代码 5.2 循环引用 6.…...

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

C++信息学奥赛1187：统计字符数

#include <bits/stdc.h> using namespace std; int main() {string arr;cin >> arr; // 输入一个字符串int n, a, max; // 定义变量n, a, maxchar ArrMax; // 定义字符变量ArrMaxn arr.length(); // 获取字符串长度max a 0; // 初始化max和a为0// 外层循环&…...

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

计算机毕设 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…...

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

vscode上搭建go开发环境

前言 Go语言介绍&#xff1a; Go语言适合用于开发各种类型的应用程序&#xff0c;包括网络应用、分布式系统、云计算、大数据处理等。由于Go语言具有高效的并发处理能力和内置的网络库&#xff0c;它特别适合构建高并发、高性能的服务器端应用。以下是一些常见的Go语言应用开发…...

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

10.（Python数模）（预测模型二）LSTM回归网络（1→1）

LSTM回归网络&#xff08;1→1&#xff09; 长短期记忆网络 - 通常只称为“LSTM” - 是一种特殊的RNN&#xff0c;能够学习长期的规律。 它们是由Hochreiter&#xff06;Schmidhuber&#xff08;1997&#xff09;首先提出的&#xff0c;并且在后来的工作中被许多人精炼和推广。…...

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