其他分享
首页 > 其他分享> > bootstrap5

bootstrap5

作者：互联网

bootstrap5

1、简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它是利用css3弹性盒子 + @media 查询 实现的响应式布局

关于@media语法

/*直接在css中的用法*/
@media mediatype and|not|only (条件) {
 CSS-Code;
}

/*或者也可以针对不同的媒体使用不同 stylesheets*/
<link rel="stylesheet" media="mediatype and|not|only (条件)" href="mystylesheet.css">
  • 媒体类型可选的值
值 描述
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
  • 条件可选的值
值 描述
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

示例1：设备屏幕宽度小于等于960px时应用css样式

@media screen and (max-device-width:960px){    
    body{
        background:red;
    }
}

示例2：浏览器宽度大于等于960px且小于等于1200px时使用样式

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

2、下载和安装

官网可以下载编译版本的js、css 或 源码版本的js、css，根据个人喜好来吧。

编译版本的：

image

源码版本的：

image

我这里以下载的编译后的版本为例，将其解压，我这里下载的bootstrap最新版本为5.x，解压后将bootstrap-5.1.1-dist 放到你的工程里，如我这里用的是vscode工具开发前端

image

然后建立一个html文件。内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap css 文件-->
    <link href="./bootstrap-5.1.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap的js库，包括所有已编译的插件 -->
    <script src="./bootstrap-5.1.1-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!--我们在看一看 这个h1样式 如何-->
    <h1>Hello, world!</h1>
</body>
</html>

bootstrap安装完毕。

3、Bootstrap CSS概览

3.1、移动设备优先

从Bootstrap 3开始之后，设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<!--width=device-width:表示网页内容宽度根据设备宽度自动适配
	initial-scale=1.0: 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.2、容器

Bootstrap 5 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

3.2.1、.container 类

用于创建固定宽度的响应式页面。

注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

超级小屏幕 <576px 小屏幕 ≥576px 中等屏幕 ≥768px 大屏幕 ≥992px 特大屏幕 ≥1200px 超级大屏幕 ≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

以下实例中，我们可以尝试调整浏览器窗口的大小来查看容器宽度在不同屏幕中等变化：

<style>
    /*加个边框，方便观看*/
    .container {
        border: 2px solid black;
    }
</style>
<div class="container">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一些文本。</p>
</div>

3.2.2、.container-fluid 类

用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）

<style>
    /*加个边框，方便观看*/
    .container,.container-fluid {
        border: 2px solid black;
    }
</style>
<div class="container-fluid">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>

3.2.3、flex 弹性布局

弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex赶紧回去补习css3

3.2.3.1、d-flex 、d-inline-flex
3.2.3.2、水平方向
3.2.3.3、垂直方向
3.2.3.4、沿x轴内容对齐
3.2.3.5、沿y轴的内容对齐
3.2.3.6、在换行情况下的对齐方式
3.2.3.7、是否换行
3.2.3.8、弹性子相关样式类
3.2.3.8.1、平均宽度
3.2.3.8.2、扩展
3.2.3.8.3、指定子元素对齐

示例1：

<div class="container ">
    <p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
    <!--
        p-*：是padding 挤压*个像素
        bg-secondary:这个是设置背景色
        text-white:这个设置的是文本颜色
    -->
    <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>

    <hr />
    <p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类,注意：这个盒子没撑满整行</p>
    <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>

    <hr />
    <p>
        默认.flex-row 可以设置弹性子元素水平显示。<br />
        使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反
    </p>
    <p>默认水平 左对齐</p>
    <div class="d-flex flex-row 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>
    <p>反转 右对齐</p>
    <div class="d-flex flex-row-reverse 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>

    <hr />
    <p>.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素</p>
    <p>垂直摆列</p>
    <div class="d-flex flex-column 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>
    <p>垂直反转摆列</p>
    <div class="d-flex flex-column-reverse 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>

    <hr />
    <p>
        内容排列方式<br />
        .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：
        start (默认), end, center, between 或 around:
    </p>
    <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>

    <hr />
    <p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的</p>
    <p>没有使用 .flex-fill </p>
    <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>
    <p>使用了 .flex-fill</p>
    <div class="d-flex p-3 bg-secondary text-white">
        <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>

    <hr />
    <p>.flex-grow-1 用于设置子元素使用剩下的空间</p>
    <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-grow-1">Flex item 3</div>
    </div>

    <hr />
    <p>包裹</p>
    <p>.flex-nowrap 不换行(默认)</p>
    <div class="d-flex flex-nowrap p-3 bg-secondary text-white">
        <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>
    <p>.flex-wrap 自动换行</p>
    <div class="d-flex flex-wrap p-3 bg-secondary text-white">
        <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>
    <p>.flex-wrap-reverse 反转</p>
    <div class="d-flex flex-wrap-reverse p-3 bg-secondary text-white">
        <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>


    <hr />
    <p>内容对齐,注意：这些类在只有一行的弹性子元素中是无效的,可以通过 flex-wrap让其自动换行</p>
    <p>.align-content-start</p>
    <div style="height: 300px;" class="d-flex flex-wrap  align-content-start p-3 bg-secondary text-white">
        <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>
    <p>.align-content-end</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-end p-3 bg-secondary text-white">
        <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>
    <p>.align-content-center</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-center p-3 bg-secondary text-white">
        <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>
    <p>.align-content-between</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-between p-3 bg-secondary text-white">
        <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>
    <p>.align-content-around</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-around p-3 bg-secondary text-white">
        <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>
    <p>.align-content-stretch</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-stretch p-3 bg-secondary text-white">
        <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>

    <hr />
    <p>子元素对齐</p>
    <p>如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：
        .align-items-start (默认) , .align-items-end, .align-items-center,
        .align-items-baseline, 和 .align-items-stretch</p>
    <p>.align-items-start</p>
    <div style="height: 300px;" class="d-flex align-items-start p-3 bg-secondary text-white">
        <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>
    <p>.align-items-end</p>
    <div style="height: 300px;" class="d-flex align-items-end p-3 bg-secondary text-white">
        <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>
    <p>.align-items-center</p>
    <div style="height: 300px;" class="d-flex align-items-center p-3 bg-secondary text-white">
        <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>
    <p>.align-items-baseline</p>
    <div style="height: 300px;" class="d-flex align-items-baseline p-3 bg-secondary text-white">
        <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>
    <p>.align-items-stretch</p>
    <div style="height: 300px;" class="d-flex align-items-stretch p-3 bg-secondary text-white">
        <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>

    <hr />
    <p>指定子元素对齐</p>
    <p>如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：
        .align-self-start , .align-self-end, .align-self-center,
        .align-self-baseline, 和 .align-self-stretch(默认)</p>
    <div style="height: 300px;" class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 border align-self-start">align-self-start</div>
        <div class="p-2 border align-self-end">align-self-end</div>
        <div class="p-2 border align-self-center">align-self-center</div>
        <div class="p-2 border align-self-baseline">align-self-baseline</div>
        <div class="p-2 border align-self-stretch">align-self-stretch(默认)</div>
    </div>
</div>

3.3、网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数：

image

Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

请确保每一行中列的总和等于或小于 12。

3.3.1、网格类

Bootstrap 5 网格系统有以下 6 个类:

3.3.2、网格系统规则

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

超小设备（.col也可适用所有设备） <576px 平板 ≥576px 桌面显示器 ≥768px 大桌面显示器 ≥992px 特大桌面显示器 ≥1200px超大桌面显示器 ≥1400px 超大桌面显示器 ≥1400px
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数量和 12
间隙宽度 1.5rem （一个列的每边分别 .75rem）
可嵌套 Yes
列排序 Yes

3.3.3、示例：

<style>
    /*加个边框，方便观看*/
    .container,.container-fluid {
        border: 1px solid black;
    }

    .row,
    .col,.col-1,.col-2,.col-4,.col-6,.col-12,
    .col-sm-4,
    .col-md-4{
        border: 1px solid black;
        margin: 0px;
    }
</style>
<!--网格的行必须在 Bootstrap容器类样式中 -->
<div class="container-fluid">
    <p>每个col的宽度平均分配并撑满,哪怕你超过12个</p>
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>

    <p>col-[1,12]的宽度平均分配并撑满,但是总计不能超过12,超过12就会 换行</p>
    <div class="row">
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>
    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
    <div class="row">
        <div class="col-12">col-12</div>
    </div>
    
    <p>col-sm- 平板 - 屏幕宽度等于或大于 576px,
        如果屏幕小于576px，那么将会堆叠排版</p>
    <div class="row">
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
    </div>

    <p>.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px,
        如果屏幕小于768px，那么将会堆叠排版</p>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>

    <p>
        组合使用,当屏幕 小于768px，将使用 col-6样式，跨6列。
        当屏幕大于768px时，将使用 col-md-4样式，跨4列。
    </p>
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
    </div>
    <div class="row">
        <div class="col-6 col-md-4">1</div>
        <div class="col-6 col-md-4">1</div>
        <div class="col-6 col-md-4">1</div>
    </div>
</div>

3.4、文字排版

3.4.1、<h1> - <h6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：

<div class="container">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <h1>h1 Bootstrap 标题</h1>
    <h2>h2 Bootstrap 标题</h2>
    <h3>h3 Bootstrap 标题</h3>
    <h4>h4 Bootstrap 标题</h4>
    <h5>h5 Bootstrap 标题</h5>
    <h6>h6 Bootstrap 标题</h6>
</div>

3.4.2、Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<div class="container">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
</div>

3.4.3、<small>

在 Bootstrap 5 中 HTML  元素用于创建字号更小的颜色更浅的文本:

<div class="container">
    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题 <small>副标题</small></h1>
    <h2>h2 标题 <small>副标题</small></h2>
    <h3>h3 标题 <small>副标题</small></h3>
    <h4>h4 标题 <small>副标题</small></h4>
    <h5>h5 标题 <small>副标题</small></h5>
    <h6>h6 标题 <small>副标题</small></h6>
</div>

3.4.4、<mark>

Bootstrap 5 定义  标签及 .marked 类为黄色背景及有一定的内边距:

<div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>

3.4.5、<abbr>

Bootstrap 5 定义 HTML  元素的样式为显示在文本底部的一条虚线边框:

<div class="container">
    <h1>缩写</h1>
    <p>abbr元素用于标记缩写或首字母缩略词:</p>
    <p>这个 <abbr title="世界卫生组织">WHO</abbr> 成立于 1948.</p>
</div>

3.4.6、<blockquote>

对于引用的内容可以在 

 上添加 .blockquote 类 :

<div class="container">
    <h1>Blockquotes</h1>
    <p>blockquote元素用于表示来自另一个源的内容:</p>
    <blockquote class="blockquote">
        <p>50年来，世界自然基金会一直在保护自然的未来。世界领先的保护组织，
            世界自然基金会在100个国家开展工作，得到美国120万会员和近5个国家的支持全球有100万人。</p>
        <footer class="blockquote-footer">来自于 世界自然基金会网站</footer>
    </blockquote>
</div>

3.4.7、<dl>

Bootstrap 5 定义 HTML 

 元素的样式如下:

<div class="container">
    <h1>Description Lists</h1>
    <p>dl元素用于描述列表:</p>
    <dl>
        <dt>咖啡</dt>
        <dd>- 拿铁</dd>
        <dd>- 玛奇朵</dd>
        <dd>- 康巴纳</dd>
        <dd>- 卡贝奇诺</dd>
        <dt>牛奶</dt>
        <dd>- 珍珠奶茶</dd>
        <dd>- 烧仙草</dd>
        <dd>- 芒果沙冰</dd>
    </dl>
</div>

3.4.8、<code>

Bootstrap 5 定义 HTML  元素的样式如下:

<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

3.4.9、<kbd>

Bootstrap 5 定义 HTML  元素的样式如下:

<div class="container">
    <h1>键盘输入</h1>
    <p>要指示通常通过键盘输入的输入，请使用kbd元素:</p>
    <p>使用 <kbd>ctrl + p</kbd> 组合键可以打开打印弹窗.</p>
</div>

3.4.10、<pre>

Bootstrap 5 定义 HTML 

 元素的样式如下:


<div class="container">
    <h1>多行代码</h1>
    <p>对于多行代码，请使用pre元素:</p>
    <pre>
    这段文本在pre标签内，这是第一行
    第二行，没有使用br标签
    第三行，没有使用br标签
    </pre>
</div>



3.4.11、更多的排版类






类名
描述






.lead
让段落更突出




.small
指定更小文本 (为父元素的 85% )




.text-left
左对齐（bootstrap5 这个貌似被干掉了）




.text-center
居中




.text-right
右对齐（bootstrap5 这个貌似被干掉了）




.text-justify
设定文本对齐,段落中超出屏幕部分文字自动换行




.text-nowrap
段落中超出屏幕部分不换行




.text-lowercase
设定文本小写




.text-uppercase
设定文本大写




.text-capitalize
设定单词首字母大写




.initialism
显示在  元素中的文本以小号字体展示，且可以将小写字母转换为大写字母




.list-unstyled
移除默认的列表样式，列表项中左对齐 ( 
     和 
       中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)





.list-inline
将所有列表项放置同一行






示例：


<div class="container">
    <p>使用 .lead 类让段落更突出：</p>
    <p class="lead">这个段落更突出。</p>
    <p>这是常规段落。</p>
    <hr />
</div>

<div class="container">
    <p>使用 .small 类让段落字体更小：</p>
    <p class="small">这个段落字体更小。</p>
    <p>这是常规段落。</p>
    <hr />
</div>

<div class="container">
    <p class="text-lowercase">英文小写显示：AbC.</p>
    <p class="text-uppercase">英文大写显示：abcd.</p>
    <p class="text-capitalize">首个英文大写显示：abc.</p>
    <hr />
</div>

<div class="container">
    <p>.list-unstyled样式能移出默认的列表样式和左边距（受该样式影响的只有直系儿子，孙子不受影响）。:</p>
    <ul class="list-unstyled">
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>黑茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <hr />
</div>

<div class="container">
    <p>默认情况下ul中的li等元素是会换行的，
        .list-inline配合.list-inline-item 可以让它们的li都在一行:</p>
    <ul class="list-inline">
        <li class="list-inline-item">咖啡</li>
        <li class="list-inline-item">茶</li>
        <li class="list-inline-item">牛奶</li>
    </ul>
    <hr />
</div>



3.5、颜色


3.5.1、文本颜色


Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light:


image


<div class="container">
    <h2>代表指定意义的文本颜色</h2>
    <p class="text-muted">柔和的文本。</p>
    <p class="text-primary">重要的文本。</p>
    <p class="text-success">执行成功的文本。</p>
    <p class="text-info">代表一些提示信息的文本。</p>
    <p class="text-warning">警告文本。</p>
    <p class="text-danger">危险操作文本。</p>
    <p class="text-secondary">副标题。</p>
    <p class="text-dark">深灰色文字。</p>
    <p class="text-body">默认颜色，为黑色。</p>
    <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
    <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>



3.5.2、背景色


提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。


image


<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的背景颜色。</p>
    <p class="bg-success text-white">执行成功背景颜色。</p>
    <p class="bg-info text-white">信息提示背景颜色。</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色。</p>
    <p class="bg-secondary text-white">副标题背景颜色。</p>
    <p class="bg-dark text-white">深灰背景颜色。</p>
    <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>



3.5、表格


3.5.1、表格类


下表样式可用于表格中：






类
描述






.table
为任意  添加基本样式 (只有横向分隔线) 内添加斑马线（灰白相间）形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态




.table-striped
在 




.table-bordered
为所有表格的单元格添加边框




.table-hover
在 




.table-borderless
可以设置一个无边框的表格




表格颜色类





.table-dark
可以为表格添加黑色背景




.table-primary
蓝色: 指定这是一个重要的操作




.table-success
绿色: 指定这是一个允许执行的操作




.table-danger
红色: 指定这是可以危险的操作




.table-info
浅蓝色: 表示内容已变更




.table-warning
橘色: 表示需要注意的操作




.table-active
灰色:




.table-secondary
灰色: 表示内容不怎么重要




.table-light
浅灰色，可以是表格行的背景




.table-dark
深灰色，可以是表格行的背景






示例：


<div class="container">
    <h2>.table 这个为bootstrap5默认的表格样式，如下：</h2>
    <table class="table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>白素贞</td>
                <td>母</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>妲己</td>
                <td>母</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>嫦娥</td>
                <td>女</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>
    <h2>
        table-striped 类，可以在 <code>&lt;tbody&gt;</code> 内的行上看到条纹，<br />
        table-bordered 类可以为表格添加边框 <br />
        table-hover 类可以为表格的每一行添加鼠标悬停效果<br />
        如下面的实例所示：
    </h2>
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>白素贞</td>
                <td>母</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>妲己</td>
                <td>母</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>嫦娥</td>
                <td>女</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>
</div>



3.6、表单


    

  • form-control //所有input都可使用
    • 

  • form-select //select使用
    • 

  • form-check-label  //一般使用于checkbox或radio的label上
    • 

  • form-check-input //一般使用与 checkbox 或 radio上
    • 



image


<form>
        输入框：<input type="text" class="form-control" placeholder="请输入名字"><br />
        下拉框：<select class="form-control">
            <option>java</option>
            <option>c#</option>
            <option>c++</option>
        </select> <br />
        多行文本框：<textarea class="form-control">

        </textarea> <br />
        单选：
        <label class="form-check-label"><input class="form-check-input" type="radio" name="sex" />男</label>
        <label class="form-check-label"><input class="form-check-input" type="radio" name="sex" />女</label><br />
        复选：
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />数学</label>
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />语文</label>
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />英语</label> <br />
    	文件：<input type="file" class="form-control"/> <br/>
		日期：<input type="date" class="form-control" value="2021-12-27"/>
    </form>



3.6.1、表单校验




特别注意： form上面必须有 .was-validated 此css类




image


<form action="#" class="was-validated">
    <div class="row">
        <div class="col-6">
            <!--利用 .input-group 将 label 和 input排列为一行-->
            <div class="input-group">
                <label class="form-label">姓名：</label>
                <!--
required:表示必填
当校验不通过:
bootstrap5会自动查找后面的兄弟元素，
css类为 .invalid-feedback 的元素显示出来
-->
                <input type="text" class="form-control" required />
                <div class="invalid-feedback">
                    请输入姓名
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="input-group">
                <label class="form-label">爱好：</label>
                <select class="form-select" required>
                    <option value="">请选择</option>
                    <option value="01">游泳</option>
                    <option value="02">打游戏</option>
                </select>
                <!--校验提示信息还可以使用 弹框的形式-->
                <div class="invalid-tooltip">
                    请输入姓名
                </div>
            </div>
        </div>
        <div class="col-6">
            <!--单选按钮/复选框等 也是可以校验的-->
            <label class="form-label">性别：</label>
            <input type="radio" id="man" name="sex" 
                   class="form-check-input" value="男" required/>
            <label class="form-check-label" for="man">
                男
            </label>
            <input type="radio" id="wumen" name="sex" 
                   class="form-check-input " value="女" required/>
            <label class="form-check-label" for="wumen">
                女
            </label>
            <div class="invalid-feedback">
                请选择性别
            </div>
        </div>

        <div class="col-6">
            <div class="input-group">
                <!--可以通过 .is-invalid 这个css类直接控制校验文本显示出来-->
                <label class="form-label">地区:</label> 
                <input type="text" class="form-control is-invalid">
                <div class="invalid-tooltip">
                    请输入省份
                </div>
            </div>
        </div>
        <div class="col-6">
            <!--文件上传也可以玩-->
            <div class="input-group">
                <label class="form-label">头像:</label> 
                <input type="file" class="form-control" required>
                <div class="invalid-feedback">
                    请选择头像
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="input-group">
                <label class="form-label">年龄:</label> 
                <input type="number" class="form-control" 
                       value="100" min="10" max="50">
                <div class="invalid-tooltip">
                    年龄必须是 10~50岁之前
                </div>
            </div>
        </div>

        <div class="col-12">
            <button class="btn btn-primary" type="reset">重置</button>
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </div>
</form>

<script>
    // 提交按钮
    document.querySelector("*[type='submit']").onclick = function(){
        //获取form
        let form = document.querySelector("form");
        //确保form表单上有 was-validated 这个css类，才能给你动态校验
        form.classList.add("was-validated");

        //校验函数，表单若校验通过，则返回true,反之返回false
        let valid = form.checkValidity();
        console.info("valid:",valid)
    };

    // 重置按钮
    document.querySelector("*[type='reset']").onclick = function(){
        //获取form
        let form = document.querySelector("form");
        //重置表单的话，只要移出 was-validated 这个css类即可
        form.classList.remove("was-validated");
    }
</script>



3.7、按钮


3.7.1、一般按钮


以下样式可用于<a>, <button>, 或 <input> 元素上：






类
描述






.btn
为按钮添加基本样式




.btn-default
默认/标准按钮




.btn-primary
原始按钮样式（未被操作）




.btn-success
表示成功的动作




.btn-info
该样式可用于要弹出信息的按钮




.btn-warning
表示需要谨慎操作的按钮




.btn-danger
表示一个危险动作的按钮操作




.btn-link
让按钮看起来像个链接 (仍然保留按钮行为)




.btn-lg
制作一个大按钮




.btn-sm
制作一个小按钮




.btn-xs
制作一个超小按钮,bootstrap5中已无此样式




.btn-block
块级按钮(拉伸至父元素100%的宽度)




.active
按钮被点击




.disabled
禁用按钮






示例：


<!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>



3.7.2、按钮组


可以在 
 元素上添加 .btn-group 类来创建按钮组。


示例：


<div class="container">
    <h2>按钮组</h2>
    <p> .btn-group 类用于创建按钮组:</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">索尼</button>
    </div>
</div>



3.7.3、垂直的按钮组


可以使用 .btn-group-vertical 类来创建垂直的按钮组


示例：


<div class="container">
    <h2>垂直按钮组</h2>
    <p>可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">索尼</button>
    </div>
</div>



3.7.4、内嵌按钮组及下拉菜单


.dropdown-toggle  :让按钮右上角多了个下标


data-bs-toggle="dropdown" : 让bootstrap对其绑定js相关事件处理


.dropdown-menu ：表明这是一个下拉菜单的样式


.dropdown-item :表明这是下拉菜单项的样式


示例：


<div class="container">
    <h2>内嵌按钮组</h2>
    <p>按钮组设置下拉菜单:</p>

    <div class="btn-group">
        <button type="button" 
                class="btn btn-primary dropdown-toggle" 
                data-bs-toggle="dropdown">手机</button>
        <!--下拉菜单-->
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">苹果</a></li>
            <li><a class="dropdown-item" href="#">三星</a></li>
            <li><a class="dropdown-item" href="#">索尼</a></li>
        </ul>
    </div>
</div>



3.8、图片


3.8.1、图片形状


    

  • .rounded 类可以让图片显示圆角效果
    • 

  • .rounded-circle 类可以设置椭圆形图片
    • 

  • .img-thumbnail 类用于设置图片缩略图(图片有边框):
    • 



示例：


<div class="container">
    <p>.rounded 类可以让图片显示圆角效果：</p>            
    <img class="rounded" src="./imgs/blhx.jpg" width="200" />
    
    <p>.rounded-circle 类可以设置椭圆形图片:</p>
    <img class="rounded-circle" src="./imgs/blhx.jpg" width="200" />

    <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>   
    <img class="img-thumbnail" src="./imgs/blhx.jpg" width="200" />
</div>



3.8.2、图片的对齐方式




.float-start 、.float-end 其实就是设置了浮动而已。




    

  • 居左和居右：使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐
    • 

  • 图片居中:使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐
    • 

  • 响应式图片

      

    • 图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应
      • 

    • 我们可以通过在  标签中添加 .img-fluid 类来设置响应式图片。
      • 

    

    • 



示例：


居左和居右


<div class="container">
    <p>使用 .float-start 类来设置图片右对齐，使用 .float-end 类设置图片左对齐:</p>
    <img class="float-start" src="./imgs/blhx.jpg" width="200" />
    <img class="float-end" src="./imgs/blhx.jpg" width="200" />
</div>



图片居中


<div class="container">
    <p>.mx-auto .d-block 类可以让图片居中</p>            
    <img class="mx-auto d-block" src="./imgs/blhx.jpg" width="200" />
</div>



响应式图片


<div class="container">
    <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
    <img class="img-fluid" src="./imgs/blhx.jpg" width="400" />
</div>





3.9、提示框


提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:


<div class="container">
    <h2>提示框</h2>
    <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
    <div class="alert alert-success">
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>
    <div class="alert alert-info">
        <strong>信息!</strong> 请注意这个信息。
    </div>
    <div class="alert alert-warning">
        <strong>警告!</strong> 设置警告信息。
    </div>
    <div class="alert alert-danger">
        <strong>错误!</strong> 失败的操作
    </div>
    <div class="alert alert-primary">
        <strong>首选!</strong> 这是一个重要的操作信息。
    </div>
    <div class="alert alert-secondary">
        <strong>次要的!</strong> 显示一些不重要的信息。
    </div>
    <div class="alert alert-dark">
        <strong>深灰色!</strong> 深灰色提示框。
    </div>
    <div class="alert alert-light">
        <strong>浅灰色!</strong>浅灰色提示框。
    </div>
</div>



我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。


<div class="container">
    <h2>关闭提示框</h2>
    <p>我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
    </p>
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>
    <div class="alert alert-info alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>信息!</strong> 请注意这个信息。
    </div>
    <div class="alert alert-warning alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>警告!</strong> 设置警告信息。
    </div>
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>错误!</strong> 失败的操作。
    </div>
    <div class="alert alert-primary alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>首选!</strong> 这是一个重要的操作信息。
    </div>
    <div class="alert alert-secondary alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>次要的!</strong> 显示一些不重要的信息。
    </div>
    <div class="alert alert-dark alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>深灰色!</strong> 深灰色提示框。
    </div>
    <div class="alert alert-light alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>浅灰色!</strong>浅灰色提示框。
    </div>
</div>



3.10、进度条


3.10.1、基本进度条


创建一个基本的进度条的步骤如下：


    

  • 添加一个带有 .progress 类的 。
    • 

  • 接着，在上面的  内，添加一个带有 class .progress-bar 的空的 。
    • 

  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
    • 



<div class="container">
    <h2>基本进度条</h2>
    <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>
    <div class="progress">
        <div class="progress-bar" style="width:70%">进度君已经到达70%，快抗不住啦。。。</div>
    </div>
</div>



3.10.2、混合色彩进度条


<div class="container">
        <h2>混合色彩进度条</h2>
        <p>进度条可以设置多种颜色:</p>
        <div class="progress">
            <div class="progress-bar bg-success" style="width:40%">
                安全线
            </div>
            <div class="progress-bar bg-warning" style="width:10%">
                警告线
            </div>
            <div class="progress-bar bg-danger" style="width:20%">
                危险线
            </div>
        </div>
    </div>



3.11、加载效果


3.11.1、一般加载效果


要创建加载中效果可以使用 .spinner-border 类:


<div class="container">
    <h2>加载中效果</h2>
    <p>要创建加载中效果可以使用 .spinner-border 类:</p>

    <div class="spinner-border"></div>
</div>



还可以配合文本类来实现不同的加载效果颜色：


<div class="container">
    <h2>不同颜色加载效果</h2>
    <p>可以使用文本颜色类设置不同的颜色：</p>

    <div class="spinner-border text-muted"></div>
    <div class="spinner-border text-primary"></div>
    <div class="spinner-border text-success"></div>
    <div class="spinner-border text-info"></div>
    <div class="spinner-border text-warning"></div>
    <div class="spinner-border text-danger"></div>
    <div class="spinner-border text-secondary"></div>
    <div class="spinner-border text-dark"></div>
    <div class="spinner-border text-light"></div>
</div>



3.11.2、闪烁的加载效果


使用 .spinner-grow 类来设置闪烁的加载效果:


<div class="container">
    <h2>闪烁的加载效果</h2>
    <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>

    <div class="spinner-grow text-muted"></div>
    <div class="spinner-grow text-primary"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-warning"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-secondary"></div>
    <div class="spinner-grow text-dark"></div>
    <div class="spinner-grow text-light"></div>
</div>



3.11.3、加载按钮示例


.spinner-border-sm 或 .spinner-grow-sm 类来会让加载效果变小一些


<div class="container">
    <h2>加载按钮</h2>
    <p>按钮添加正在加载按钮:</p>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
    </button>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
    </button>
</div>



3.12、分页

标签：Flex,元素,item,按钮,bootstrap5,导航,col
来源： https://www.cnblogs.com/Alax-LJJ/p/16026645.html