Bootstrap4 之栅格系统

news2024/9/28 19:27:48

Bootstrap4 之栅格系统

  • 参考
  • 描述
  • 栅格系统（网格系统）
      • 原理
      • 容器
          • .container 与视口宽度
      • 行
      • 列
      • 样式
  • 栅格等级
      • 网格
          • 宽度
          • 特点
            • 左对齐
            • 另起一行
            • 自适应
  • 布局
      • 对齐
          • 垂直对齐
            • 行
            • 列
          • 水平对齐
      • 排列
          • 响应式
          • 优先级
      • 偏移
  • 显隐

参考

项目描述
Bootstrap 入门经典珍妮弗、凯瑞恩
Bootstrap 基础教程赵丙秀
Bootstrap官方文档
哔哩哔哩Bootstrap4 从入门到实战

描述

项目描述
操作系统Windows 10 专业版
Edge109.0.1518.55 (正式版本) (64 位)
Bootstrap4.4.1

栅格系统（网格系统）

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着视口（浏览器的可视区域）尺寸的增加，系统会分为最多 12 列。
Bootstrap 默认的栅格系统平分为最多 12 份，在使用的时候可以根据具体情况通过重新编译 Less 源码来修改这个数值。12 列栅格系统是整个 Bootstrap 的核心功能，也是响应式设计核心理念的一个实现形式。

原理

栅格系统实现的原理非常简单，仅仅是通过定义容器大小，平分为 12 份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式栅格系统。

容器

网格中的每一行都需要安排在设置了 .container 或 .container-fluid 类的容器中，这些容器具有 Bootstrap 预设的样式，能够为其中的列提供适当的支持（内边距等样式）以更好的对页面进行布局。
.container 创建一个具有固定宽度（不同的视口范围对应不同的容器宽度）的容器，而 .container-fluid 将创建一个宽度时刻与视口宽度相等的容器。

这是使用 .container 类创建的容器：

.container

这是使用 .container-fluid 创建的容器：

.container-fluid

.container 与视口宽度

不同的视口范围将对应不同的最大容器（应用 .container 的容器）宽度，具体规则如下：

范围容器宽度
viewport < 768px.container 将使用视口宽度，此时的效果与 .container-fluid 容器相同。
768px <= viewport < 993px750px
992px <= viewport < 1200px970px
viewport >= 1200px1170px

行

在栅格系统中，使用行在容器内部创建一组列。行需要包含于 .container 中，以便为其赋予适合的对齐方式及内边距。

列

在栅格系统中，你需要向网页中添加的内容（文本，图片等）可以放置在列中；在栅格系统中，仅有列可以作为行的直接子元素。

样式

栅格系统中存在 Bootstrap 提供的默认样式：

  1. .column 的左右均存在 15px 的内边距，可以防止列中的内容紧挨着浏览器的边缘。
  2. .container 中同样也存在 15px 的内边距。
    .row（行） 是 .col--（列） 的容器，行的左右各有 -15px 的外边距用以抵消 .container 容器产生的 15px 的内边距。
    .container 是为了模拟 .column 产生的 15px 的内边距。这样设计的好处是可以使 列 中再包含 行 （此时，列与行的关系就相当于最开始时容器与行的关系）后无需做出其他改动依然能维持原有的样式风格。

栅格等级

不同的响应尺寸（视口宽度）对应不同的栅格等级。

Extra SmallSmallMediumLargeExtra Large
中译超小屏幕小屏幕中等屏幕大屏幕超大屏幕
响应尺寸< 576px>= 576px>= 768px>= 992>= 1200
最大容器宽度Auto540px720px960px1140px
列宽Auto45px60px80px95px
列数1212121212
适用于特小手机智能手机平板电脑手提电脑笔记本电脑
类前缀.col-*.col-sm-*.col-md-*.col-lg-*.col-xl-*

网格

宽度

你可以通过指定类前缀中的 * 为一个 1~12 范围内的数值，用以指定响应尺寸在对应的栅格等级，该网格所占据的列数。

网格宽度

例如，如下代码将在一行中创建三个网格，这三个网格将存在如下特点：

  1. 在中等屏幕及以上时，每一个网格将占据 4 列。
  2. 在小屏幕时，每一个网格将占据 3 列。
  3. 在超小屏幕时，每一个网格均占据 12 列，这是默认设置，你也可以指定类前缀 .col-* 中的 * 为一个 1~12 范围内的数值，用以指定在该响应尺寸下时，该网格所占据的列数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <!-- 导入 bootstrap.css 请将该样式表在其他样式表之前进行导入 -->
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 为 行 设置样式 */
        .row div{
            /* 行的高度 */
            height: 40px;
            /* 行内文字居中对齐 */
            text-align: center;
            line-height: 40px;
            /* 字体宽度 */
            font-weight: 600;
            /* 行内文字的颜色 */
            color: #fff;
        }

        /* 选中行中排位为奇数的列并为其指定背景颜色 */
        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        /* 选中行中排位为奇数的列并为其指定背景颜色 */
        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <!-- 创建容器 -->
    <div class="container">
        <!-- 创建行 -->
        <div class="row">
            <!-- 创建网格 -->
            <div class="col-md-4 col-sm-3">One</div>
            <div class="col-md-4 col-sm-3">Two</div>
            <div class="col-md-4 col-sm-3">Three</div>
        </div>
    </div>
    
    <!-- 使用 Bootstrap4 时，你需要导入 Jquery、Popper 以及 bootstrap -->
    <!-- 请不要将导入顺序进行颠倒 -->
    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

特点
左对齐

如果网格所占据的总列数小于 12 列但大于 0 列，那么网格没有占据的列将不会出现任何内容；由于存在空白的列，网格整体将左对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 600;
            color: #fff;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">

        <div class="row">
            <!-- 网格总宽度为 9 列，没有占满 12 列 -->
            <div class="col-sm-3">One</div>
            <div class="col-sm-3">Two</div>
            <div class="col-sm-3">Three</div>
        </div>

        <div class="row">
            <!-- 占据所有的列，与第 1 行形成对比 -->
            <div class="col-sm-4">One</div>
            <div class="col-sm-4">Two</div>
            <div class="col-sm-4">Three</div>
        </div>
    </div>
    
    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

另起一行
  1. 第一种情况
    如果网格所占据的列数超过 12 列，则多出部分的网格将分散到其他行中 （ 如果多出的网格整体（上一行多出的所有网格）放入下一行后，网格所占据的总列数仍超过 12 列，则多出部分的网格将继续放入下一行，以此类推。） ，直到装下所有网格。
<div class="row">
    <!-- 网格总宽度为 9 列，没有占满 12 列 -->
    <div class="col-sm-4">One</div>
    <div class="col-sm-4">Two</div>
    <div class="col-sm-8">Three</div>
</div>

效果：

效果

  1. 第二种情况
    如果单个网格的列数超过 12 列：

    • 若该网格中含有内容

      • 网格的宽度将为盛放内容所需要的最小宽度，网格的高度将为行高（默认）。
      <div class="row">
	<div class="col-sm-4">One</div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-36">Three</div>
</div>

      效果

      • 若网格中的内容或所占据的列的宽度超过当前行的剩余宽度（从当前网格的头部开始计算），则该网格将被移动到下一行（视觉上的下一行）中。
      <div class="row">
	<div class="col-sm-4">One</div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-8">Three</div>
</div>

      效果

      • 若网格中的内容或所占据的列的宽度超过容器宽度，则该网格将在下一行（视觉上的下一行）中展示且网格中多出容器的内容将会消失。
      <div class="row">
	<div class="col-sm-4"></div>
	<div class="col-sm-4">Two</div>
	<!-- 此网格中的内容随机产生，请勿多疑 -->
	<div class="col-sm-36">撒旦解放了就是浪费精力时间发链接十六分但是垃圾费垃圾费的实力解放螺丝钉解放分开发了数据分离技术垃圾分类收集了房间是浪费精力的设计费陆军第十六飞这里是超出部分</div>
</div>

      效果

    • 若该网格中不含有内容，则该网格将会消失。

    <div class="row">
 	<div class="col-sm-4"></div>
	<div class="col-sm-4">Two</div>
	<div class="col-sm-36"></div>
</div>

效果

自适应

如果你没有为列 col-- 中的第二个 * 指定一个值（该网格所占据的列数），则 Bootstrap 将会将当前容器的宽度平均分配到每一个网格中。

<div class="container">
    <div class="row">
        <div class="col-sm">One</div>
        <div class="col-sm">Two</div>
        <div class="col-sm">Three</div>
    </div>

    <div class="row">
        <div class="col-sm">One</div>
        <div class="col-sm">Two</div>
        <div class="col-sm">Three</div>
        <div class="col-sm">Four</div>
    </div>
</div>

效果：

效果

布局

对齐

垂直对齐
行

使用如下类可以指定行在容器中的对齐方式。

项目描述
.align-items-start顶部对齐（默认）
.align-items-center居中对齐
.align-items-end尾部对齐

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 设置行的样式 */
         .row{
            height: 120px;
            /* 为行设置边框，方便后续观察网格的对齐方式 */
            border: 1px solid aqua;
            /* 设置行的底边距为 15px */
            margin-bottom: 15px;
        }

        /* 设置行中的网格的样式 */
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 顶部对齐 -->
        <div class="row">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <!-- 居中对齐 -->
    <div class="container">
        <div class="row align-items-center">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <!-- 尾部对齐 -->
    <div class="container">
        <div class="row align-items-end">
            <div class="col-sm">One</div>
            <div class="col-sm">Two</div>
            <div class="col-sm">Three</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

列
项目描述
.align-self-start顶部对齐（默认）
.align-self-center居中对齐
.align-self-end尾部对齐

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
        /* 设置行的样式 */
         .row{
            height: 120px;
            /* 为行设置边框，方便后续观察网格的对齐方式 */
            border: 1px solid aqua;
            /* 设置行的底边距为 15px */
            margin-bottom: 15px;
        }

        /* 设置行中的网格的样式 */
        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 顶部对齐 -->
        <div class="row">
            <div class="col-sm">One</div>
            <div class="col-sm align-self-center">Two</div>
            <div class="col-sm align-self-end">Three</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

水平对齐
项目描述
.justify-content-start左对齐（默认）
.justify-content-center居中对齐
.justify-content-end右对齐
.justify-content-around网格两边的边距是相等的，因此中间的网格间的距离会是两边靠容器边缘的边距的两倍
.justify-content-between两端的网格紧靠容器边缘，中间的网格之间的距离相等

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 左对齐 -->
        <div class="row">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- 居中对齐 -->
        <div class="row justify-content-center">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- 右对齐 -->
        <div class="row justify-content-end">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- .justify-content-around -->
        <div class="row justify-content-around">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <div class="container">
        <!-- .justify-content-between -->
        <div class="row justify-content-between">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

排列

项目描述
.order-N你可以通过为列添加该类以调节列在该行中的顺序，N 的取值范围为 1~12 。
.order-first使用该类的列将被排在当前行（.row）的第一位。
.order-last使用该类的列将被排在当前行（.row）的最后一位。
响应式

由于 Bootstrap 是响应式的开发框架，所以你可以通过为上述类添加 sm、md、lg 以及 xl 中缀来实现网格在不同响应尺寸下网格以指定的排列顺序进行排列。

举个栗子：

如下示例中，第一个以及第四个网格将在栅格等级在 sm（包括）~xl 间互换位置，并在栅格等级为 xl 时恢复原位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 order-sm-last order-xl-first">One</div>
            <div class="col-sm-3 order-2">Two</div>
            <div class="col-sm-3 order-3">Three</div>
            <div class="col-sm-3 order-sm-last order-xl-last">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

优先级

如果你没有通过 order-*-N 为一行中的所有的列指定顺序，则通过 order-*-N 指定顺序的列将排列在没有指定顺序的列之后。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 order-3">One</div>
            <div class="col-sm-3">Two</div>
            <div class="col-sm-3">Three</div>
            <div class="col-sm-3 order-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

偏移

项目描述
.offset-N你可以通过为列添加该类以调节列在该行中向 右 的偏移量，N 的取值范围为 1~11 。

注：

由于 Bootstrap 是响应式的开发框架，所以你可以通过为上述类添加 sm、md、lg 以及 xl 中缀来实现网格在不同响应尺寸下网格以指定的跨度（偏移的列数）进行偏移。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-2">One</div>
            <div class="col-sm-2">Two</div>
            <div class="col-sm-2 offset-4">Three</div>
            <div class="col-sm-2">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

显隐

在进行页面布局时，为了实现响应式的需求以及网页的美观性：
在视口缩小时往往需要隐藏部分内容以避免页面过长影响体验；
在视口放大时往往需要显示部分内容以避免页面太过空旷影响美观。

类描述
.d-none隐藏当前行中的所有网格。
.d-block显示当前行中的所有网格。
.d-none .d-sm-block仅在响应尺寸对应的栅格等级为 xs 时隐藏。
.d-none .d-md-block仅在栅格等级为 xs 及 sm 时隐藏。
.d-none .d-lg-block仅在栅格等级为 xs、sm 及 md 时隐藏。
.d-none .d-xl-block仅在栅格等级为 xs、sm、md 及 lg 时隐藏。
.d-block .d-sm-none仅在响应尺寸对应的栅格等级为 xs 时显示。
.d-block .d-md-none仅在栅格等级为 xs 及 sm 时显示。
.d-block .d-lg-none仅在栅格等级为 xs、sm 及 md 时显示。
.d-block .d-xl-none仅在栅格等级为 xs、sm、md 及 lg 时显示。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bootstrap4 之栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <style>
         .row{
            height: 40px;
            border: 1px solid black;
            margin-top: 15px;
        }

        .row div{
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
        }

        .row div:nth-child(odd){
            background-color: yellowgreen;
        }

        .row div:nth-child(even){
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 d-none d-sm-block">One</div>
            <div class="col-sm-3 d-none d-md-block">Two</div>
            <div class="col-sm-3 d-none d-lg-block">Three</div>
            <div class="col-sm-3 d-none d-xl-block">Four</div>
        </div>
    </div>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

效果：

效果

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

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

相关文章

内存屏障由来的理解和使用《编程高手必学的内存知识》学习笔记 Day 5

内存屏障由来的理解和使用《编程高手必学的内存知识》学习笔记 Day 5

系列文章目录 这是本周期内系列打卡文章的所有文章的目录 《Go 并发数据结构和算法实践》学习笔记 Day 1《Go 并发数据结构和算法实践》学习笔记 Day 2《说透芯片》学习笔记 Day 3《深入浅出计算机组成原理》学习笔记 Day 4 文章目录系列文章目录前言一、概念理解&#xff08;…
阅读更多...
JUC面试（六）——Java锁

JUC面试（六）——Java锁

Java锁 公平锁和非公平锁 概念 公平锁 是指多个线程按照申请锁的顺序来获取锁&#xff0c;类似于排队买饭&#xff0c;先来后到&#xff0c;先来先服务&#xff0c;就是公平的&#xff0c;也就是队列 非公平锁 是指多个线程获取锁的顺序&#xff0c;并不是按照申请锁的顺…
阅读更多...
steam搬砖项目，每天1-2小时，月入1w+（内附教学资料）

steam搬砖项目，每天1-2小时，月入1w+（内附教学资料）

steam搬砖就非常合适&#xff0c;最大的优点&#xff0c;操作性简单&#xff0c;0门槛也不用担心&#xff0c;一台电脑就能搞定。利用空余时间完成就可以 话不多说&#xff0c;先上目录&#xff0c;以便大家阅读~ 一.steam搬砖玩法 1、steam搬砖项目介绍 2、项目原理与产出…
阅读更多...
ROS2机器人编程简述humble-第二章-Parameters .3.4

ROS2机器人编程简述humble-第二章-Parameters .3.4

ROS2机器人编程简述humble-第二章-Launchers .3.3机器人程序通常需要配置各类参数&#xff0c;官网和一些书中都有介绍。概述ROS中的参数与各个节点相关。参数用于在启动时&#xff08;以及运行时&#xff09;配置节点&#xff0c;而无需更改代码。参数的生存期与节点的生存期相…
阅读更多...
【区块链】深入剖析免费赚钱app的本质

【区块链】深入剖析免费赚钱app的本质

你对免费赚钱软件好奇吗&#xff1f;前言一、揭开“免费赚钱app”神秘面纱1.常见的赚钱app2.app真的在做慈善吗&#xff1f;3.羊毛党的价值4.真正的游戏规则二、区块链1.哈希算法2.互联网挖矿三、深入探讨“区块链”的套路1.免费赚钱app真正的价值2.虚拟货币的本质3.虚拟货币泡…
阅读更多...
Java设计模式-观察者模式/观察者模式适合那些场景？怎么使用

Java设计模式-观察者模式/观察者模式适合那些场景？怎么使用

继续整理记录这段时间来的收获&#xff0c;详细代码可在我的Gitee仓库SpringBoot克隆下载学习使用&#xff01; 6.7 观察者模式 6.7.1 定义 又称发布-订阅模式&#xff0c;定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象主体对象在状态变化…
阅读更多...
[前端笔记——CSS] 9.CSS处理文件的标准流程+DOM

[前端笔记——CSS] 9.CSS处理文件的标准流程+DOM

[前端笔记——CSS] 9.CSS处理文件的标准流程DOM1.CSS处理文件的标准流程2.关于DOM2.1 举个例子2.2 应用 CSS 到 DOM1.CSS处理文件的标准流程 当浏览器展示一个文件的时候&#xff0c;它必须兼顾文件的内容和文件的样式信息&#xff0c;CSS处理文件的标准流程如下&#xff1a; …
阅读更多...
06_FreeRTOS临界区代码保护

06_FreeRTOS临界区代码保护

目录 临界段代码保护简介 临界段代码保护函数介绍 任务级临界区函数详解 中断级临界区函数详解 临界段代码保护简介 什么是临界段:临界段代码也叫做临界区,是指那些必须完整运行,不能被打断的代码段 适用场合如: 1.外设:需严格按照时序初始化的外设:IIC、SPI等等 2.系统…
阅读更多...
国家发明专利：基于改进型黏菌优化算法的业务资源分配方法

国家发明专利：基于改进型黏菌优化算法的业务资源分配方法

国家发明专利&#xff1a;基于改进型黏菌优化算法的业务资源分配方法 摘要 本发明公开了一种基于改进型黏菌优化算法的业务资源分配方法&#xff0c;其步骤包括&#xff1a;1将生产任务分成若干个环节&#xff0c;构建有向环状分配网络&#xff1b;2构建工厂参数矩阵并归一化&…
阅读更多...
力扣98.验证二叉搜索树

力扣98.验证二叉搜索树

文章目录力扣98.验证二叉搜索树题目描述算法思路代码实现力扣98.验证二叉搜索树 题目描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 …
阅读更多...
领域驱动设计（DDD）的几种典型架构介绍

领域驱动设计（DDD）的几种典型架构介绍

我们生活中都听说了DDD&#xff0c;也了解了DDD&#xff0c;那么怎么将一个新项目从头开始按照DDD的过程进行划分与架构设计呢&#xff1f; 一、专业术语 各种服务 IAAS&#xff1a;基础设施服务&#xff0c;Infrastructure-as-a-service PAAS&#xff1a;平台服务&#xff0c…
阅读更多...
【Java寒假打卡】JavaWeb-Servlet基础

【Java寒假打卡】JavaWeb-Servlet基础

【Java寒假打卡】JavaWeb-Servlet基础介绍servlet快速入门servlet的执行过程servlet关系视图Servlet实现方式-继承HTTPSERVLETServlet的生命周期线程安全问题servlet的映射方式案例-多路径映射问题-指定名称的方式Servlet的创建时机默认Servlet介绍 servlet是运行在Java服务器…
阅读更多...
免费分享一套 SpringBoot + Vue + ElementUI 的人力资源管理系统，挺漂亮的

免费分享一套 SpringBoot + Vue + ElementUI 的人力资源管理系统，挺漂亮的

大家好&#xff0c;我是锋哥&#xff0c;看到一个不错的SpringBoot Vue ElementUI 的人力资源管理系统&#xff0c;分享下哈。 项目介绍 项目背景 人力资源管理是企业运营中必不可少的一环&#xff0c;它关系到企业的前途与发展。尤其对于中小微企业来说&#xff0c;对企业…
阅读更多...
积分分离PID控制算法及仿真-1

积分分离PID控制算法及仿真-1

在普通 PID 控制中引入积分环节的目的&#xff0c;主要是为了消除静差&#xff0c;提高控制精度。但在过程的启动、结束或大幅度增减设定时&#xff0c;短时间内系统输出有很大的偏差&#xff0c;会造成PID运算的积分积累&#xff0c;致使控制量超过执行机构可能允许的最大动作…
阅读更多...
Vue项目基础环境搭建完整步骤

Vue项目基础环境搭建完整步骤

使用vue官方脚手架(vue-cli) vue-cli简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统&#xff0c;是一个官方脚手架&#xff0c;可以帮助我们快速创建vue项目工程目录&#xff0c;目前最新版本4.x。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建…
阅读更多...
第三天总结 之 商品管理界面的实现 之 模糊查询 与 数据在页面展示

第三天总结 之 商品管理界面的实现 之 模糊查询 与 数据在页面展示

商品管理界面的实现 模糊查询 第一步&#xff1a; 明确 查询时 需要的 条件 即sql语句中 where 后的条件 如 &#xff1a; 根据前端 可以发现 模糊查询可以通过 商品名称 日期 商品类型 来查询 所以在对应的controller层下的GoodsFuzzySelectServlet中首先要获取这三个属性的…
阅读更多...
《深入浅出计算机组成原理》学习笔记 Day6

《深入浅出计算机组成原理》学习笔记 Day6

二进制编码1. “逢二进一”2. 字符串的表示参考1. “逢二进一” 把一个二进制数对应到十进制&#xff0c;就是把从右到左的第 N 位&#xff0c;乘上一个2 的 N 次方&#xff0c;然后加起来&#xff0c;就成了一个十进制数。从右到左的位置&#xff0c;是从 0 开始的。 例如&a…
阅读更多...
初识C语言:IDE的选择与使用【C语言】

初识C语言:IDE的选择与使用【C语言】

本文是本专栏【C语言】的第一篇文章&#xff0c;也是博主最近半年以来的更新第一篇文章&#xff0c;如果觉得有帮助&#xff0c;可以点赞支持一下&#xff01;另外本专栏最后会做一篇类似于【python爬虫】专栏最后的那篇整合的文章&#xff0c;把C语言的所有基础知识用一篇文章…
阅读更多...
深度学习 GNN图神经网络（三）模型思想及文献分类案例实战

深度学习 GNN图神经网络（三）模型思想及文献分类案例实战

如果你有一定神经网络的知识基础&#xff0c;想学习GNN图神经网络&#xff0c;可以按顺序参考系列文章&#xff1a; 深度学习 GNN图神经网络&#xff08;一&#xff09;图的基本知识 深度学习 GNN图神经网络&#xff08;二&#xff09;PyTorch Geometric&#xff08;PyG&#x…
阅读更多...
Nginx入门与应用

Nginx入门与应用

NginxNginx概述Nginx介绍Nginx下载和安装windowsLinuxNginx目录结构Nginx命令查看版本检查配置文件正确性启动和停止重新加载配置文件Nginx环境变量&#xff08;Linux&#xff09;Nginx配置文件结构Nginx具体应用部署静态资源反向代理负载均衡Nginx概述 Nginx介绍 Nginx是一款…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023