m0_73839298的博客

特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）

• alert-warning（警告！可能需要注意的警告，浅黄色）• alert-danger（危险！危险或潜在的负面操作，浅红色）• alert-success（成功！成功或积极的动作，浅绿色）• alert-info（信息！中性的信息更改或操作，浅天蓝色）• alert-secondary（次要！• alert-primary（基本！• alert-light（浅白色！• alert-dark（深灰色！• alert-link（警告链接）• alert（警告框）所有的警告框颜色的效果图。

关闭警告实现思路：创建一个警告框alert，给警告框背景颜色alert-，警告框关闭alert-dismissible后，关闭需要按钮，所以创建一个按钮button，按钮需要用到按钮组件图标（X）btn-close，按钮需要关闭用到data-bs-dismiss属性，当按钮被点击时关闭什么？这里是关闭警告，所以属性值填写为"alert"alert-dismissible（警告框关闭）• fade show（淡入淡出效果）

• btn-outline-light text-dark（浅色，浅白色）• btn-outline-secondary（次要，灰色）• btn-outline-primary（主要，蓝色）• btn-out1ine-success（成功，绿色）• btn-outline-warning（警告，黄色）• btn-outline-danger（危险，红色）• btn-out1ine-info（信息，天蓝色）• btn-out1ine-dark（深色，深绿）• btn-info（信息，天蓝色）

• btn-group-vertical（垂直按钮组）• btn-group-lg（大型按钮组）• btn-group-sm（小型按钮组）• btn-group（水平按钮组）

4.在第二个按钮组的按钮后，添加下拉菜单通过一个名为 "dropdown-menu""的下拉列表项 "" 实现，其中包含了多个 "" 标签，ul>li>a，作为下拉菜单的项目，其中ul中包含多个li，li包含a，li这些项目a具有相同的类（dropdown-item）即下拉列表的下拉链接项，表示它们具有相同的样式。这个按钮组中的按钮具有与前面按钮相同的类（"btn btn-primary"），此外还有一个 "dropdown-toggle"类，表示这个按钮可以作为下拉菜单的触发器，

• bg-secondary（次要，灰色）• bg-secondary（次要，灰色）• bg-warning（警告，黄色）• bg-warning（警告，黄色）• bg-danger（危险，红色）• bg-light（浅色，浅白色）• bg-danger（危险，红色）• bg-light（浅色，浅白色）• bg-info（信息，天蓝色）• bg-info（信息，天蓝色）• bg-dark（深色，黑色）• bg-dark（深色，黑色）• bg-（默认，白色）• bg-（默认，白色）

class="badge rounded-pill bg-black":徽章，显示为胶囊徽章，一个带有颜色为黑色的胶囊徽章，用于显示胶囊徽章的内容。1.何为按钮胶囊徽章，按钮胶囊徽章即:按钮包含胶囊徽章，Button>badge rounded-pill。"type="button":表示这是一个普通的按钮，而非提交表单的按钮。"type="button":表示这是一个普通的按钮，而非提交表单的按钮。1.何为按钮徽章，按钮徽章即:按钮包含徽章，Button>badge。3.在容器中的按钮里面添加一个徽章。

• progress-bar（进度条）• bg-secondary（灰色）• progress（进度条容器）• bg-success（绿色）• bg-warning（橙色）• bg-danger（红色）• bg-light（浅白色）• bg-info（天蓝色）• bg-white（白色）• bg-dark（黑色）• bg（默认，蓝色）所有的进度条颜色的效果图。进度条容器高度和宽度。

• spinner-border-lg（大型旋转加载器）• spinner-border-sm（小型旋转加载器）• spinner-grow-lg（大型渐变加载器）• spinner-grow-sm（小型渐变加载器）• text-secondary（红色）• text-warning （橙色）• text-primary（蓝色）• text-info （天蓝色）• text-danger（红色）• text-light（浅白色）• text-muted（灰色）• text-dark（黑色）

• disable（禁用，显示为不可点击）• active（活动，显示为按下状态）

• justify-content-center（分页居中）• justify-content-end（右对齐）• disabled（禁用，显示为不可点击)• pagination-lg（大型分页）• pagination-sm（小型分页）• active（活动，显示为按下状态）

面包屑容器代码图面包屑项代码图基本的面包屑代码图效果图。

• list-group-item-secondary（浅灰色）• list-group-item-success（浅绿色）• list-group-item-warning（浅黄色）• list-group-item-primary（浅蓝色）• list-group-item-danger（浅红色）• list-group-item-info（浅天蓝色）• list-group-item-light（浅白色)• list-group-item-dark（浅黑色）• 列表组，默认是带边框的。

4.其中列表组项li给一些属性，如d-flex，justify-content-between ,align-items-center，其中d-flex是一个容器来着，justify-content-between是让元素移动，align-items-center是让元素对齐方式如何显示。作用:定义了如何在父元素内的主轴上对齐子元素，"space-between"表示子元素将在主轴上均匀地分布，第一个子元素紧贴父元素边缘，最后一个子元素也紧贴父元素边缘，其余子元素之间的距离相等。

• text-secondary（次要文本，灰色）• card-img-button（卡片图像底部）• card-img-top（卡片图像顶部）• text-primary（重要，蓝色）• text-success（成功，绿色）• text-warning（警告，黄色）• text-danger（危险，红色）• text-muted（静音，灰色）• bg-secondary（灰色）• text-light（浅灰色）• text-white（白色）• text-dark（深灰色）• bg-info（天蓝色）

• dropdown-item-text（下拉文本）• dropdown（下，↓）• dropstart（左，←）• disabled（禁用）• dropend（右，→）• dropup（上，↑）• active（活动）

代码图基本的折叠代码图效果图折叠显示代码图效果图。

Accordion（手风琴）

• justify-content-center（居中)• justify-content-end（右对齐）

4.给其中一个导航菜单项nav-item设置名为dropdown的类，来表示导航菜单项具有下拉列表的功能，来表示导航菜单项是一个下拉列表，在超链接a中设置名为dropdown-toggle来表示下拉菜单样式，属于js属性，下拉列表是需要点击触发事件的，就设置data-bs-toggle，data-bs-toggle的意思就是表示当点击时触发什么事件？1.导航菜单用ul>li表示实现，首先创建一个导航菜单容器nav，并把导航菜单容器显示为导航菜单胶囊，使用nav-pills。什么是导航菜单选项卡下拉列表？

3.创建一个用于与导航菜单联系的面板容器tab-content，每个面板给id值用于与导航菜单的href相关联，每个面板设置一个固定容器container来表示每个面板属于一个容器内的内容，tab-pane来表示面板，还可以给面板设置是活动的，显示的，还是隐藏，活动是active，是默认是显示，隐藏是fade。1.使用ul>li>a，ul首先创建一个导航菜单容器nav，并把导航菜单设置为导航菜单选项卡nav-tabs，使用role="tablist"来表示这是一个导航栏。可切换的动态胶囊导航。

​​​​​​​所有的导航栏文本颜色效果图。特征:导航栏默认，垂直显示。所有的导航栏颜色效果图。代码图​​​​​​​。

品牌代码图效果图标志代码图效果图导航栏文本项目名称代码图效果图。

可折叠导航栏代码图效果图。

下拉菜单导航栏代码图效果图。

导航栏导航栏和按钮代码图效果图。

位置固定导航栏顶部代码图效果图位置固定导航栏底部代码图效果图粘性导航栏代码图效果图。

轮播图标题，使用carousel-caption，其中h标签是HTML标签的标题标签，h1~h6，h1最大，h6最小，用来表示轮播图的标题，其中p标签是HTML的段落标签，用来表示轮播图的段落文本内容。轮播图的指标/点中的active类：活动，注意！滑块在轮播图的位置，即滑块的索引，使用data-bs-slide-to=“”从0开始，比如3个图片就使用3个索引，0，1，2，以此类推。向前/向后翻页的图标，左/右，图标形状是向左/右的箭头，使用carousel-control-prev/next-icom。

• modal-fullscreen-sm-down （小型）• modal-fullscreen-xxl-down（特大）• modal-fullscreen-lg-down（大型）• modal-fullscreen-xl-down（超大）• modal-fullscreen-md-down（中）• modal-dialog-centered（居中）• modal-sm（小型模态）• modal-xl（超大模态）• modal-lg（大型模态）• fade（淡入淡出）

• data-bs-placement="right"（默认，右侧）• data-bs-placement="buttom（底部）• data-bs-placement="left"（左侧）• data-bs-placement="auto"（自动）• data-bs-placement="top"（顶部）工具提示必须用 JavaScript 初始化才能工作。--工具提示初始化代码-->触发工具提示出现的位置。

• data-bs-placement="right"（默认，右侧）• data-bs-placement="buttom（下方）• data-bs-placement="left"（左侧）• data-bs-placement="auto"（自动）• data-bs-placement="top"（上方）弹出框必须用 JavaScript 初始化才能工作。--弹出框初始化代码-->触发弹出框出现的位置。

• data-bs-dismiss=""（当被点击时关闭什么）• toast-dismissible（吐司关闭）吐司必须用 JavaScript 初始化才能工作。• show（显示）

可滚动区域基本的可滚动区域代码图效果图。

• offcanvas-bottom（底部）• offcanvas-start（左侧）• offcanvas-top（顶部）• offcanvas-end（右侧）

• align-content-stretch（平均分布，但会拉伸高度）• justify-content-between（最左，居中，最右）• align-content-between（平均分布，但高度更高）• align-items-stretch（平均分布，但会拉伸高度）• align-self-stretch（默认，顶部，但会拉伸高度）• justify-content-around（左，居中，右）• align-content-start（默认，顶部）

宽度占百分比• w-25• w-50• w-75• w-100代码图效果图宽度自动• w-auto代码图效果图最大宽度占百分比• mw-100代码图效果图最大宽度自动• mw-auto代码图效果图。

高度占百分比• h-25• h-50• h-75• h-100代码图效果图高度自动• h-auto代码图效果图最大高度占百分比• mh-100代码图效果图最大高度自动• mh-auto代码图效果图。

（margin-left，margin-right:左侧和右侧的外边距）（margin-top，margin-buttom:顶部和底部的外边距）（margin-buttom:底部的外边距）（margin-right:右侧的外边距）（margin-left:左侧的外边距）（margin-top:顶部的外边距）

（padding-left，padding-right:左侧和右侧的内边距）（padding-top，padding-buttom:顶部和底部的内边距）（padding-buttom:底部的内边距）（padding-right:右侧的内边距）（padding-left:左侧的内边距）（padding-top:顶部的内边距）