23.4 Bootstrap 框架5

news2024/11/25 16:31:49

2023-10-07_00028

1. 背景颜色

1.1 背景颜色样式

在Bootstrap 5中, 可以使用以下类来设置背景颜色:
* 1. .bg-primary:   设置为主要的背景颜色(#007bff, 深蓝色).
* 2. .bg-secondary: 设置为次要的背景颜色(#6c757d, 灰色).
* 3. .bg-success:   设置为成功的背景颜色(#28a745, 绿色).
* 4. .bg-danger:    设置为危险的背景颜色(#dc3545, 红色).
* 5. .bg-warning:   设置为警告的背景颜色(#ffc107, 黄色).
* 6. .bg-info:      设置为信息的背景颜色(#17a2b8, 青色).
* 7. .bg-light:     设置为浅色的背景颜色(#f8f9fa, 浅灰色).
* 8. .bg-dark:      设置为白色的背景颜色(#343a40, 深灰色).
* 9. .bg-dark:      用于将元素的背景颜色设置为白色.
* 10. .bg-transparent: 用于将元素的背景颜色设置为透明.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>背景颜色</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .container div {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <div class="bg-primary text-white">.bg-primary</div>
    <div class="bg-secondary text-white">.bg-secondary</div>
    <div class="bg-success text-white">.bg-success</div>
    <div class="bg-danger text-white">.bg-danger</div>
    <div class="bg-warning text-dark">.bg-warning</div>
    <div class="bg-info text-dark">.bg-info</div>
    <div class="bg-light text-dark">.bg-light</div>
    <div class="bg-dark text-white">.bg-dark</div>
</div>
</body>
</html>

image-20231006155737878

1.2 颜色渐变

在bootstrap 5中, .bg-gradient类可以设置背景颜色渐变.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>背景颜色渐变</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div>
</div>
</body>
</html>

image-20231006155909878

2. 边框

2.1 边框样式

在Bootstrap 5中, 用于设置边框的相关类名及其作用:

* 1. border: 简单的边框样式, 通常与其他类一起使用, 如: border border-primary.
* 2. border-<color>: 设置特定颜色的边框, 如: border-primary、border-secondary等.
* 3. border-<side>: 设置特定边的边框, 如: border-top, border-start, border-bottom, border-end, 只应用于相应的边.
* 4. border-<side>-0: 移除特定边的边框, 如: border-top-0, border-right-0, border-bottom-0, border-left-0.
* 5. border-<size>: 设置特定尺寸的边框, 有几个预定义的尺寸类可用, 如: border-1, border-2, border-3等.
     border-start: 用于设置元素的开始边的边框样式. start对应元素的右边框.
     border-end: 用于设置元素的结束边的边框样式. end对应元素的左边框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>边框</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        span {
            display: inline-block;
            width: 75px;
            height: 75px;
            margin: 6px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>

<div class="container mt-3">
    <span class="border border-primary"></span>
    <span class="border border-primary"></span>
    <span class="border border-primary border-top-0"></span>
    <span class="border border-primary border-end-0"></span>
    <span class="border border-primary border-bottom-0"></span>
    <span class="border border-primary border-start-0"></span>
    <br>

    <span class="border-primary border-top "></span>
    <span class="border-primary border-end"></span>
    <span class="border-primary border-bottom"></span>
    <span class="border-primary border-start"></span>
</div>

</body>
</html>

image-20231006160817235

2.2 圆角边框

在 Bootstrap 5中, 设置圆角边框的相关类名及其介绍:

* 1. .rounded: 用于添加一个圆角边框效果, 将元素的边角变得更圆滑.
      rounded-x: 用于设置圆角的大小, x取值范围0-5.
* 2. .rounded-top: 用于添加一个圆角边框效果, 只影响元素的顶部边角, 使其变得更圆滑.
* 3. .rounded-end: 用于添加一个圆角边框效果, 只影响元素的尾部(朝向右侧的边)边角, 使其变得更圆滑.
* 4. .rounded-bottom: 用于添加一个圆角边框效果, 只影响元素的底部边角, 使其变得更圆滑.
* 5. .rounded-start: 用于添加一个圆角边框效果, 只影响元素的起始(朝向左侧的边)边角, 使其变得更圆滑.
* 6. .rounded-circle: 类用于将元素变为一个圆形, 效果就像是将矩形的边角完全变圆.
* 7. .rounded-pill: 用于将元素变为一个类似椭圆形的形状, 边角变得更圆滑.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>圆角</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        div > div {
            display: inline-block;
            width: 75px;
            height: 75px;
            background-color: #7fbce1;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="rounded"></div>
    <div class="rounded-top rounded-4"></div>
    <div class="rounded-end rounded-4"></div>
    <div class="rounded-bottom rounded-4"></div>
    <div class="rounded-start rounded-4"></div>
    <div class="rounded-circle "></div>
    <div class="rounded-pill" style="height: 75px; width: 120px"></div>
</div>

</body>
</html>

image-20231006162226757

3. 浮动

3.1 浮动样式

在Bootstrap 5中, 用于设置浮动的相关类名及其作用:
* 1. .float-end: 用于将元素向右浮动.
     通过将该类应用于元素, 可以让元素靠右侧对齐, 并允许其他元素环绕在其左侧.
     
* 2. .float-start: 用于将元素向左浮动.
     通过将该类应用于元素, 可以让元素靠左侧对齐, 并允许其他元素环绕在其右侧.
     
* 3. .float-none: 不设置浮动, 元素将按照正常文档流排列.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>浮动</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        span {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <div class="border border-1">
        <span class="float-start border border-1"></span>
        <span class="float-end border border-1"></span>
    </div>
</div>
</body>
</html>

image-20231006174430167

3.2 清除浮动

在Bootstrap 5中, .clearfix类用于清除浮动效果.
当父元素包含浮动元素时, 可能会出现布局混乱的问题, 这时可以在父元素上应用.clearfix类来清除其子元素的浮动效果.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>清除浮动</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        span {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <div class="clearfix border border-1">
        <span class="float-start border border-1"></span>
        <span class="float-end border border-1"></span>
    </div>
</div>
</body>
</html>

image-20231006174741224

3.3 响应式浮动

在Bootstrap 5中, 响应式浮动相关的类名及其介绍:
* 1. .float-sm-end:  在小屏幕   (>=576px)时,  将元素向右浮动.
* 2. .float-md-end:  在中等屏幕 (>=768px)时,  将元素向右浮动.
* 3. .float-lg-end:  在大屏幕   (>=992px)时,  将元素向右浮动.
* 4. .float-xl-end:  在超大屏幕 (>=1200px)时, 将元素向右浮动.
* 5. .float-xxl-end: 在特大屏幕 (>=1400px)时, 将元素向右浮动.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>响应式浮动</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <div class="row">
    <div class="col-12">
      <div class="float-sm-end m-2 bg-info">小屏幕向右浮动</div>
    </div>
    <div class="col-12">
      <div class="float-md-end m-2 bg-info">中等屏幕向右浮动</div>
    </div>
    <div class="col-12">
      <div class="float-lg-end m-2 bg-info">大屏幕向右浮动</div>
    </div>
    <div class="col-12">
      <div class="float-xl-end m-2 bg-info">超大屏幕向右浮动</div>
    </div>
  </div>
</div>
</body>
</html>

GIF 2023-10-6 18-23-36

4. 宽度

在Bootstrap 5中, 可以使用.w-*类名来设置元素的固定宽度或最大宽度.

下面是一些常用的宽度类名的介绍:
- .w-25: 将元素的宽度设置为25%.
- .w-50: 将元素的宽度设置为50%.
- .w-75: 将元素的宽度设置为75%.
- .w-100: 将元素的宽度设置为100%.
- .mw-auto: 将元素的最大宽度设置为自动计算, 根据内容来确定宽度.
- .mw-100: 将元素的最大宽度设置为100%.

这些类名可以与其他Bootstrap类名一起使用, 例如网格系统的类名.col-*, 以实现自定义的宽度布局.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>宽度</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <div class="m-2 w-25 bg-info">宽度为 25%</div>
        </div>
        <div class="col-12">
            <div class="m-2 w-50 bg-info">宽度为 50%</div>
        </div>
        <div class="col-12">
            <div class="m-2 w-75 bg-info">宽度为 75%</div>
        </div>
        <div class="col-12">
            <div class="m-2 w-100 bg-info">宽度为 100%</div>
        </div>
    </div>
</div>


</body>
</html>

image-20231006190309504

5. 高度

在Bootstrap 5中, 可以使用.h-*类名来设置元素的固定高度或最大高度.

下面是一些常用的高度类名的介绍:
- .h-25: 将元素的高度设置为25%.
- .h-50: 将元素的高度设置为50%.
- .h-75: 将元素的高度设置为75%.
- .h-100: 将元素的高度设置为100%.
- .mh-auto: 将元素的最大高度设置为自动计算, 根据内容来确定高度.
- .mh-100: 将元素的最大高度设置为100%.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>高度</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <div class=" w-25 h-25 bg-info">高度为 25%</div>
        </div>
        <div class="col-12">
            <div class=" w-50 h-50 bg-info">高度为 50%</div>
        </div>
        <div class="col-12">
            <div class=" w-75 h-75 bg-info">高度为 75%</div>
        </div>
        <div class="col-12">
            <div class=" w-100 h-100 bg-info">高度为 100%</div>
        </div>
    </div>
</div>
</body>
</html>

image-20231006191419692

6. 间距

间距设置可以通过以下方式进行:
- {property}{sides}-{size}: 设置小屏幕(xs)的间距.
- {property}{sides}-{breakpoint}-{size}: 设置特定屏幕宽度(sm, md, lg, xl或xxl)的间距.
  property: 表示属性, 可以是m(margin, 外间距), p(padding, 内间距).
  sides:    表示方向, 可以是tb(下), s(左), e(右), x(水平), y(垂直), 或blank(所有方向).
  size:     表示大小, 可以是 0, 1, 2, 3, 4, 5或auto.
            0 - 设置 margin 或 padding 为 0
            1 - 设置 margin 或 padding 为 $spacer * .25
            2 - 设置 margin 或 padding 为 $spacer * .5
            3 - 设置 margin 或 padding 为 $spacer
            4 - 设置 margin 或 padding 为 $spacer * 1.5
            5 - 设置 margin 或 padding 为 $spacer * 3
            $spacer是Bootstrap中预定义的间距变量(默认为: 1rem, 一般为16px)
            在实际使用中, 你可以根据需要自定义这些变量的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>间距</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="mx-auto bg-info w-25 text-center">用户注册</div>

    <form>
        <div class="form-row">
            <div class="form-group">
                <!-- 设置 margin-top-->
                <p class="mt-2">
                    <label for="text">邮箱:</label>
                    <input type="text" class="form-control-sm" id="text" placeholder="email">
                </p>

                <!-- 设置 margin-top-->
                <label for="color" class="mt-2">颜色:</label>
                <input type="color" id="color" class="form-control-sm" style="width: 60px;padding: 4px;"
                       autocomplete="off"
                       value="#656565">
            </div>
        </div>
    </form>
</div>
</body>
</html>

image-20231006194129746

7. Flex布局

7.1 弹性布局样式

弹性盒子由容器和其内部的项目组成.
弹性容器内包含了一个或多个弹性子元素.

在Bootstrap 5中, d-flex类用于创建一个弹性盒子容器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>弹性布局</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <!--  使用 d-flex 类创建一个弹性盒子容器, 并设置三个弹性子元素-->
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007162118465

7.2 行内弹性容器

在Bootstrap 5中, d-inline-flex类用于创建一个行内的弹性容器, 该容器内的子元素将以弹性盒模型进行布局.
弹性盒模型可以让子元素在容器中自动调整大小, 并根据设定的规则进行排列.

具体来说, d-inline-flex类将一个元素的display属性设置为"inline-flex", 使其以行内的方式展示, 并具有弹性盒的特性.
使用d-inline-flex可以方便地创建一些灵活的布局, 比如一行排列的图标, 按钮, 文本等元素, 
它们可以自动适应容器的大小, 并根据需要进行调整和重新排列.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>行内弹性容器</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-inline-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007162835657

7.3 水平对齐

在Bootstrap 5中, 设置弹性子元素水平显示的相关类名及其介绍:
* 1. .flex-row: 默认, 设置子元素向右对齐.
* 2. .flex-row-reverse: 用于设置子元素向右对齐.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>水平方向对齐</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">

  <div class="d-flex flex-row bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>

  <div class="d-flex flex-row-reverse bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>

image-20231007163254863

7.5 垂直对齐

在Bootstrap 5中, 用户设置弹性子元素垂直显示的相关类名及其介绍:
* 1. .flex-column: 默认, 子元素沿着垂直方向从上到下排列显示.
* 2. .flex-column-reverse: 子元素按照倒序的方式从下到上排列显示.

* 设置之后, 子元素将会占据父容器的整行宽度, 并依次垂直排列显示.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>垂直方向对齐</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">

    <div class="d-flex flex-column mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>


    <div class="d-flex flex-column-reverse">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>

</body>
</html>

image-20231007164152191

7.6 内容排列

在Bootstrap 5中, .justify-content-*类用于修改弹性容器内子元素的排列方式.

相关类名及其介绍:
* 1. .justify-content-start: 默认, 表示子元素在容器的起始位置对齐.
* 2. .justify-content-center: 用于将子元素在容器的中间位置对齐.
* 3. .justify-content-end:   用于将子元素在容器的末尾位置对齐.
* 4. .justify-content-between: 这个类将子元素平均分配在容器内, 并在首尾两端留下空白间距.
* 5. .justify-content-around: 这个类将子元素平均分配在容器内, 并在它们之间以及首尾两端留下相等的空白间距.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>内容排列</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-flex justify-content-start bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-end bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-center bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-between bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-around bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007164816896

7.7 等宽

在Bootstrap 5中, .flex-fill类用于强制将弹性子元素的宽度设置为相等的值, 使它们在水平方向上占据相同的空间.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>等宽</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-flex">
        <div class="p-2 bg-info flex-fill">Flex item 1</div>
        <div class="p-2 bg-warning flex-fill">Flex item 2</div>
        <div class="p-2 bg-primary flex-fill">Flex item 3</div>
    </div>
</div>

</body>
</html>

image-20231007165025466

7.8 分配空间

7.8.1 扩展
在Bootstrap 5中, .flex-grow-*类用于设置弹性子元素在弹性容器中分配剩余空间的比例.

相关类名及其介绍:
* 1. .flex-grow-0: 使弹性子元素不具有扩展能力, 即不会分配任何剩余空间给该元素.
* 2. .flex-grow-1: 使弹性子元素可以根据剩余空间进行等比例扩展.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>扩展</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-flex mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <!-- 设置子元素使用剩下的空间 -->
        <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007172357752

7.8.2 收缩
在Bootstrap 5中, .flex-grow-*类用于定义弹性盒子项目在空间不足时的收缩比例.

相关类名及其介绍:
* 1. flex-shrink-1: 默认, 所有项目都具有这个类, 表示项目将按比例收缩以适应容器的空间.
* 2. flex-shrink-0: 表示该项目不会收缩.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .p-2 {
            width: 500px;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <div class="d-flex">
        <div class="flex-shrink-1 bg-info p-2">项目 1</div>
        <div class="flex-shrink-1 bg-warning p-2">项目 2</div>
        <div class="flex-shrink-1 bg-primary p-2">项目 3</div>
    </div>

    <div class="d-flex">
        <div class="flex-shrink-0 bg-info p-2">项目 1</div>
        <div class="flex-shrink-0 bg-warning p-2">项目 2</div>
        <div class="flex-shrink-0 bg-primary p-2">项目 3</div>
    </div>
</div>
</body>
</html>

image-20231007184545332

7.9 排序

在Bootstrap 5中, .order-*类可用于设置弹性子元素的排序.

相关类名及其介绍:
- .order-1: 将子元素的排序设置为1(最大的排序权重).
- ...
- .order-12: 将子元素的排序设置为12(最小的排序权重).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>排序</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-flex mb-3">
        <div class="p-2 order-3 bg-info">Flex item 1</div>
        <div class="p-2 order-2 bg-warning">Flex item 2</div>
        <div class="p-2 order-1 bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007185011445

7.10 外边距

在Bootstrap 5中, 用于设置子元素外边距的类名及其介绍:
* 1. .ms-auto: 设置子元素右外边距为auto, 即: margin-right: auto!important;.
* 2. .me-auto: 设置子元素左外边距为auto, 即: margin-left: auto!important;.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>外边距</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <div class="d-flex mb-3 bg-secondary">
        <!--  设置最大左边距    -->
        <div class="p-2 ms-auto bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex mb-3 bg-secondary">
        <div class="p-2  bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <!--  设置最大右边距    -->
        <div class="p-2 me-auto bg-primary">Flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007185512510

7.11 换行方式

在 Bootstrap 5中, 用于设置弹性容器的换行方式的相关类名及其介绍:
* 1. .flex-nowrap: 默认, 弹性容器的子元素将会在一行内保持水平排列, 不会自动换行到下一行.
* 2. .flex-wrap:  用于将弹性容器的子元素布局在单行或多行上, 以适应可用空间. 
* 3. .flex-wrap-reverse 类用于将弹性容器的子元素布局在反向的多行上。也就是说, 它会从下到上依次排列子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>换行</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
    <p><code>.flex-nowrap:</code></p>
    <div class="d-flex flex-nowrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
    <br>
    <p><code>.flex-wrap:</code></p>
    <div class="d-flex flex-wrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
    <br>
    <p><code>.flex-wrap-reverse:</code></p>
    <div class="d-flex flex-wrap-reverse bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
</div>
</body>
</html>

image-20231007190018496

7.12 内容对齐

在 Bootstrap 5中, 可以使用.align-content-*类来控制弹性容器中子元素在垂直方向上的堆叠方式.

相关类名及其介绍:
* 1. .align-content-start:   默认, 子元素堆叠在垂直方向上的起始位置.
* 2. .align-content-center: 子元素在垂直方向上居中对齐。
* 3. .align-content-end:    子元素堆叠在垂直方向上的结束位置.
* 4. .align-content-between:子元素均匀分布在垂直方向上, 两端贴紧容器边界.
* 5. .align-content-around: 子元素均匀分布在垂直方向上, 各元素之间有空隙.
* 6. .align-content-stretch:子元素在垂直方向上拉伸以填满整个容器.

* 这些类在只有一行的弹性子元素中是无效的, 需要搭配flex-wrap或flex-wrap-reverse类使用, 也可以说它说多行内容的对齐方法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>内容对齐</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">

    <p>.align-content-start (默认):</p>
    <div class="d-flex flex-wrap align-content-start bg-light" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
    <br>
    <p>.align-content-center:</p>
    <div class="d-flex flex-wrap align-content-center bg-light" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
    <br>
    <p>.align-content-end:</p>
    <div class="d-flex flex-wrap align-content-end bg-light" style="height:100px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
    </div>
    <br>
    <p>.align-content-around:</p>
    <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
        <div class="p-2 border">Flex item 18</div>
        <div class="p-2 border">Flex item 19</div>
        <div class="p-2 border">Flex item 20</div>
        <div class="p-2 border">Flex item 21</div>
        <div class="p-2 border">Flex item 22</div>
        <div class="p-2 border">Flex item 23</div>
        <div class="p-2 border">Flex item 24</div>
        <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-stretch:</p>
    <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
            <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
</div>
</body>
</html>

image-20231007191927651

7.13 子元素对齐

在Bootstrap 5中, .align-items-*类来控制弹性容器中的子元素在单行中的垂直对齐方式.

相关类名及其介绍:
* 1. .align-items-start: 子元素在单行中垂直对齐的起始位置.
* 2. .align-items-center：子元素在单行中垂直居中对齐.
* 3. .align-items-end: 子元素在单行中垂直对齐的结束位置.
* 4. .align-items-baseline：子元素在单行中以基线对齐.
* 5. .align-items-stretch：子元素在单行中拉伸以填充垂直空间, 默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>子元素对齐</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <p>.align-items-start:</p>
    <div class="d-flex align-items-start bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-center:</p>
    <div class="d-flex align-items-center bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-end:</p>
    <div class="d-flex align-items-end bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-baseline:</p>
    <div class="d-flex align-items-baseline bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-stretch (默认):</p>
    <div class="d-flex align-items-stretch bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
</div>
</body>
</html>

image-20231007192802946

7.14 指定子元素对齐

在 Bootstrap 5中, 可以使用.align-self-*类单独控制特定子元素的对齐方式.

相关类名及其介绍:
* 1. .align-self-start: 将特定子元素垂直对齐到起始位置.
* 2. .align-self-center: 将特定子元素垂直居中对齐.
* 3. .align-self-end: 将特定子元素垂直对齐到结束位置.
* 4. .align-self-baseline: 将特定子元素以基线对齐.
* 5. .align-self-stretch: 将特定子元素拉伸以填充垂直空间, 这是默认值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>指定子元素对齐</title>
    <link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="container mt-3">
    <p>.align-self-start:</p>
    <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-start">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-center:</p>
    <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-center">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-end:</p>
    <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-end">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-baseline:</p>
    <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-baseline">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-stretch (默认):</p>
    <div class="d-flex bg-light" style="height:150px">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border align-self-stretch">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
</div>
</body>
</html>

image-20231007193349658

7.15 响应式flex类


方向:
.flex-*-row	                根据不同的屏幕设备在水平方向显示弹性子元素.
.flex-*-row-reverse	        根据不同的屏幕设备在水平方向显示弹性子元素.
.flex-*-column	            根据不同的屏幕设备在垂直方向显示弹性子元素.
.flex-*-column-reverse	    根据不同的屏幕设备在垂直方向显示弹性子元素, 且方向相反.

内容对齐:
.justify-content-*-start	根据不同屏幕设备在开始位置显示弹性子元素(左对齐).
.justify-content-*-end	    根据不同屏幕设备在尾部显示弹性子元素(右对齐).	
.justify-content-*-center	根据不同屏幕设备在flex容器中居中显示子元素.
.justify-content-*-between	根据不同屏幕设备使用"between"显示弹性子元素.
.justify-content-*-around	根据不同屏幕设备使用"around"显示弹性子元素.

等宽:
.flex-*-fill	            根据不同的屏幕设备强制等宽.

扩展:
.flex-*-grow-0	            不同的屏幕设备不设置扩展.	 
.flex-*-grow-1	            不同的屏幕设备设置扩展.

换行方式:
.flex-*-nowrap	            不同的屏幕设备不设置包裹元素.	
.flex-*-wrap	            不同的屏幕设备设置包裹元素.	
.flex-*-wrap-reverse	    不同的屏幕设备反转包裹元素.


内容排列:
.align-content-*-start	    根据不同屏幕设备在起始位置堆叠元素.	
.align-content-*-end	    根据不同屏幕设备在结束位置堆叠元素.
.align-content-*-center	    根据不同屏幕设备在中间位置堆叠元素.	
.align-content-*-around	    根据不同屏幕设备, 使用"around"堆叠元素.	
.align-content-*-stretch	根据不同屏幕设备, 通过伸展元素来堆叠.

排序:
.order-*-0-12	            根据不同屏幕设备, 修改子元素的排序.

元素对齐:
.align-items-*-start	    根据不同屏幕设备, 让元素在头部显示在同一行.
.align-items-*-end	        根据不同屏幕设备, 让元素在尾部显示在同一行.
.align-items-*-center	    根据不同屏幕设备, 让元素在中间位置显示在同一行.
.align-items-*-baseline	    根据不同屏幕设备, 让元素在基线上显示在同一行.
.align-items-*-stretch	    根据不同屏幕设备, 让元素延展高度并显示在同一行.

单独一个子元素的对齐方式:
.align-self-*-start	        据不同屏幕设备, 让单独一个子元素显示在头部.
.align-self-*-end	        据不同屏幕设备, 让单独一个子元素显示在尾部.	
.align-self-*-center	    据不同屏幕设备, 让单独一个子元素显示在居中位置.	
.align-self-*-baseline	    据不同屏幕设备, 让单独一个子元素显示在基线位置.	
.align-self-*-stretch	    据不同屏幕设备, 延展一个单独子元素.

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

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

相关文章

[yolo系列：yolov7添加可变形卷积Deformable Conv V2]

[yolo系列：yolov7添加可变形卷积Deformable Conv V2]

yolo系列文章目录 文章目录 yolo系列文章目录一、可变形卷积是什么&#xff1f;二、使用步骤1.在models/common.py文件添加2.然后再yolo.py里面添加DCNv23.修改yolov7的yaml 总结参考文章 一、可变形卷积是什么&#xff1f; 可变形卷积即DCN&#xff08;缩写取自Deformable Con…
阅读更多...
uniapp：swiper-demo效果

uniapp：swiper-demo效果

单元格轮播 <swiper class"swiper1" :circular"true" :autoplay"true" interval"3000" previous-margin"195rpx" next-margin"195rpx"><swiper-item v-for"(item,index) in 5" :key"inde…
阅读更多...
平凡工作也能创造卓越：学习公文写作的逻辑与技巧

平凡工作也能创造卓越：学习公文写作的逻辑与技巧

平凡工作也能创造卓越&#xff1a;学习公文写作的逻辑与技巧 前言如何把平凡的工作写出光环1.个人不能超越集体2.工作成果的概括要准确3.描写平凡工作的难点痛点 书籍介绍关键点关键词 书籍亮点内容简介购买链接参与方式往期赠书回顾 前言 如何把平凡的工作写出光环 &#x1…
阅读更多...
查询两张表的信息 可能用到两张实体类 所以可以创建一个新的实体类来装 新的实体类可以有两个表的属性，或者继承复用父类。

查询两张表的信息 可能用到两张实体类 所以可以创建一个新的实体类来装 新的实体类可以有两个表的属性，或者继承复用父类。

找到赋值 找到不赋值
阅读更多...
C语言字符串查找函数和错误信息报告函数（strstr、strtok，strerror）

C语言字符串查找函数和错误信息报告函数（strstr、strtok，strerror）

文章目录 摘要1 strstr1.1 函数使用1.2 模拟实现 2. strtok2.1 函数介绍 3. strerror3.1 函数介绍3.2 strerror 与 perror 摘要 本篇文章介绍了C语言中常用的字符串处理函数&#xff0c;包括字符串查找函数 strstr 和字符串分割函数 strtok&#xff0c;以及错误信息报告函数 s…
阅读更多...
2023旅游产业内容营销洞察报告：如何升级经营模式，适配社媒新链路

2023旅游产业内容营销洞察报告：如何升级经营模式，适配社媒新链路

2023年我国旅游业强劲复苏&#xff0c;上半年旅游消费增长显著&#xff0c;政府出台一系列文旅扶持政策后&#xff0c;旅游业也在积极寻求数字化转型的升级方式。 上半年以旅游消费为代表的服务业对经济的增长贡献率超过60%&#xff0c;旅游企业普遍实现经营好转&#xff0c;企…
阅读更多...
Windows 10下安装运行ROS

Windows 10下安装运行ROS

Windows 10下安装运行ROS 官方教程 ROS on Windows installation 1 系统要求 Windows ROS需要64位的Windows 10 Desktop或Windows 10 IoT Enterprise。 请确保您已安装Powershell并在系统路径中 从实时病毒扫描程序中排除c:\opt(以及稍后的工作空间文件夹)&#xff0c;因为…
阅读更多...
KALI 各种工具的使用与介绍

KALI 各种工具的使用与介绍

KALI 各种工具的使用与介绍 一、工具介绍 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关…
阅读更多...
Linux CentOS7 yum仓库

Linux CentOS7 yum仓库

在windows下安装一个软件很轻松&#xff0c;只要双击setup或者.exe的文件&#xff0c;安装提示连续“下一步”即可&#xff0c;然而linux系统下安装一个软件似乎并不那么轻松&#xff0c;因为我们不是在图形界面下。 本文我们将讨论如何在linux下安装一个软件。 一、linux软件…
阅读更多...
【JavaEE初阶】 Thread类及常见方法

【JavaEE初阶】 Thread类及常见方法

文章目录 &#x1f334;Thread类的概念&#x1f333;Thread 的常见构造方法&#x1f384;Thread 的几个常见属性&#x1f340;start()-启动一个线程&#x1f332;中断一个线程&#x1f6a9;实例一&#x1f6a9;实例二&#x1f6a9;实例三 &#x1f38d;join()-等待一个线程&…
阅读更多...
如何选择UMLChina服务

如何选择UMLChina服务

服务口号&#xff1a;聚焦最后一公里 斐力庇第斯从马拉松跑回雅典报信&#xff0c;虽然已是满身血迹、精疲力尽&#xff0c;但他知道&#xff1a;没有出现在雅典人民面前&#xff0c;前面的路程都是白费。 学到的知识如果不能最终【用】于您自己的项目之中&#xff0c;也同样是…
阅读更多...
设备搭建（waf、蜜罐、ids和ips）

设备搭建（waf、蜜罐、ids和ips）

文章目录 防火墙waf网闸蜜罐idsips 防火墙 DMZ区域叫非军事化区减&#xff0c;DMZ有web服务或者MySQL服务&#xff0c;从互联网到dmz的流量一般不拦截&#xff08;因为需要互联网用户访问web服务&#xff09;&#xff0c;如果dmz沦陷&#xff0c;攻击者想要继续横向移动到内网…
阅读更多...
系统03：15min导图复习 文件管理

系统03：15min导图复习 文件管理

&#x1f433;前言 图源&#xff1a;文心一格 考研笔记整理&#xff0c;纯复习向&#xff0c;思维导图基本就是全部内容了&#xff0c;不会涉及较深的知识点~~&#x1f95d;&#x1f95d; 第1版&#xff1a;查资料、画思维导图~&#x1f9e9;&#x1f9e9; 编辑&#xff1a; …
阅读更多...
layui laydate实现日期选择并禁用指定的时间

layui laydate实现日期选择并禁用指定的时间

最终实现禁用2023-9-26这天的效果 官网地址 日期和时间组件文档 - layui.laydate 下面是实现的代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>layDate快速使用</title><link rel"stylesheet"…
阅读更多...
IPSG技术和IP组播

IPSG技术和IP组播

1&#xff0c;IPSG技术概述 实验&#xff1a; DHCP snooping IPSG 拓扑&#xff1a; 需求&#xff1a; 1&#xff0c;实现PC1 和PC2 动态获取IP地址 2, 在SW2 配置DHCP snooping 实现DHCP 服务器的安全 3, 在 连接PC 1 和 PC2 的 接口上 做IPSG &#xff0c;防止终端…
阅读更多...
AWD训练赛QWQ

AWD训练赛QWQ

使用D盾啥都没扫到&#xff0c;河马倒是扫了挺多东西&#xff0c;但是代码审计能力太差&#xff0c;不怎么看得懂 一般这里我们如果扫到那种很明显的一句话木马&#xff0c;直接删掉&#xff0c;爆出对手IP后尝试利用 代码审计能力不好&#xff0c;只能从网站页面入手 是一个登…
阅读更多...
集合的基本运算

集合的基本运算

集合的运算等式&#xff1a; 常用的集合运算不等式&#xff1a; 、 试题 A&#xff0c;B&#xff0c;C是集合&#xff0c;证明&#xff1a;(A-B)-CA-(B∪C) 【答案】 设A、B、C是集合&#xff0c;证明 (A∪B)-C(A-C)∪(B-C)。 【答案】 已知A{1,2,3}&#xff0c;A-B{1,2}&…
阅读更多...
【观察】天翼云政务大模型“慧泽”：推动政务服务再升级，加速智慧城市再进化...

【观察】天翼云政务大模型“慧泽”：推动政务服务再升级，加速智慧城市再进化...

进入2023年以来&#xff0c;AIGC的爆发式增长推动了全球步入一个全新时代——大模型时代&#xff0c;它不仅引发了AI产业的整体升级换代&#xff0c;同时大模型与行业和应用场景的深度融合&#xff0c;更加速了AI的“走深向实”。 其中&#xff0c;政务业务不仅是连接政府、企业…
阅读更多...
FinClip PC 终端支持更新，现已兼容抖音与支付宝小程序

FinClip PC 终端支持更新，现已兼容抖音与支付宝小程序

产品方面的相关动向 FinClip 全新升级&#xff01;现已兼容抖音小程序与支付宝小程序 自从 FinClip Studio 上线后&#xff0c;我们收到很多开发者对于“支持兼容抖音小程序与支付宝小程序”的需求反馈&#xff0c;现在 FinClip Studio 对抖音小程序和支付宝小程序的全面支持…
阅读更多...
槽道流CFD结果与理论解对比

槽道流CFD结果与理论解对比

目录 理论CFD验证code 理论 理论参考文献 对于槽道流&#xff0c;理论上近壁面时均速度为线性分布&#xff0c;远离壁面处为对数分布 在对数区&#xff0c;有两个未知参数&#xff0c;两个人标定了不同的两组数据。 可以看出还是有一定区别的。 CFD验证 CFD有两组数据&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023