Bootstrap CSS类参考

• 

  所有 Bootstrap 类的完整列表

  所有 Bootstrap CSS 类的完整列表，包括描述和示例：

  类名	描述	示例	页面
  .active	向导航菜单添加可以激活当前链接选项	尝试一下	导航
  .active	向列表组中的列表项添加可以突出显示当前列表项	尝试一下	列表组
  .active	向按钮添加使按钮看起来像被按下	尝试一下	按钮
  .active	向下拉菜单中添加可以激活当前下拉菜单选项	尝试一下	下拉菜单
  .active	向分页中添加可以突出显示当前页面	尝试一下	分页
  .active	向轮播组中添加激活当前的轮播项	尝试一下	轮播
  .alert	创建一个警报消息框	尝试一下	警报框
  .alert-danger	红色警报；表示危险或潜在的负面行为	尝试一下	警报框
  .alert-dark	深灰色警报框	尝试一下	警报框
  .alert-dismissible	指示可关闭的警报框；与.close类一起，该类用于关闭警报（添加额外的填充）	尝试一下	警报框
  .alert-heading	向指定元素添加 color:inherit	尝试一下	警报框
  .alert-info	蓝绿色警报；表示中立的信息变化或行动	尝试一下	警报框
  .alert-light	浅灰色警报框	尝试一下	警报框
  .alert-link	用于警报内的链接以提供匹配的彩色链接	尝试一下	警报框
  .alert-primary	蓝色警报；表示重要的动作	尝试一下	警报框
  .alert-secondary	灰色警报；表示“较少”的重要动作	尝试一下	警报框
  .alert-success	绿色警报；表示成功或积极的行动	尝试一下	警报框
  .alert-warning	黄色警报；表示此操作应谨慎	尝试一下	警报框
  .align-baseline	元素与父级的基线对齐；这是默认值	尝试一下	实例
  .align-bottom	元素与直线上的最低元素对齐	尝试一下	实例
  .align-middle	元素放置在父元素的中间	尝试一下	实例
  .align-top	元素与直线上最高元素的顶部对齐	尝试一下	实例
  .align-text-top	元素与父元素字体的顶部对齐	尝试一下	实例
  .align-text-bottom	元素与父元素字体的底部对齐	尝试一下	实例
  .align-content-around	在“周围”对齐收集item项	尝试一下	flex布局
  .align-content-*-around	在“周围”对齐收集item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-content-center	在中心对齐收集item项	尝试一下	flex布局
  .align-content-*-center	在中心对齐收集item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-content-end	最后对齐收集item项	尝试一下	flex布局
  .align-content-*-end	最后对齐收集item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-content-start	从一开始对齐收集item项	尝试一下	flex布局
  .align-content-*-start	从一开始对齐收集item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-content-stretch	拉伸收集item项	尝试一下	flex布局
  .align-content-*-stretch	拉伸收集item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-items-start	从一开始就对齐单行item项	尝试一下	flex布局
  .align-items-*-start	从一开始就对齐单行item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-items-end	在末尾对齐单行item项	尝试一下	flex布局
  .align-items-*-end	在末尾对齐单行item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-items-center	在中心对齐单行item项	尝试一下	flex布局
  .align-items-*-center	在中心对齐单行item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-items-baseline	在基线处对齐单行item项	尝试一下	flex布局
  .align-items-*-baseline	在基线处对齐单行item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-items-stretch	拉伸单行item项	尝试一下	flex布局
  .align-items-*-stretch	拉伸单行item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-self-start	从头开始对齐弹性item项	尝试一下	flex布局
  .align-self-*-start	从头开始对齐弹性item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-self-end	在末端对齐弹性item项	尝试一下	flex布局
  .align-self-*-end	在末端对齐弹性item项，不同屏幕设备响应式	尝试一下	flex布局
  align-self-center	在中心对齐弹性item项	尝试一下	flex布局
  .align-self-*-center	在中心对齐弹性item项，不同屏幕设备响应式	尝试一下	flex布局
  .align-self-baseline	在基线与弹性item项对齐	尝试一下	flex布局
  .align-self-*-baseline	在基线与弹性item项对齐，不同屏幕设备响应式	尝试一下	flex布局
  .align-self-stretch	拉伸对齐弹性item项	尝试一下	flex布局
  .align-self-*-stretch	拉伸对齐弹性item项，不同屏幕设备响应式	尝试一下	flex布局
  .badge	创建一个圆形徽章（灰色圆圈-通常用作数字指示器）	尝试一下	徽章
  .badge-danger	红色徽章；表示危险或潜在的负面行为	尝试一下	徽章
  .badge-dark	黑暗徽章；深灰色警报框	尝试一下	徽章
  .badge-info	蓝绿色的徽章；表示中立的信息变化或行动	尝试一下	徽章
  .badge-light	浅色徽章；浅灰色警报框	尝试一下	徽章
  .badge-pill	使徽章更圆	尝试一下	徽章
  .badge-primary	蓝色徽章；表示重要的动作	尝试一下	徽章
  .badge-secondary	灰色徽章；表示“较少”的重要动作	尝试一下	徽章
  .badge-success	绿色徽章；表示成功或积极的行动	尝试一下	徽章
  .badge-warning	黄色徽章；表示此操作应谨慎	尝试一下	徽章
  .bg-danger	向元素添加红色背景色；表示危险或负面行为	尝试一下	颜色
  .bg-dark	为元素添加深灰色背景色	尝试一下	颜色
  .bg-info	将青色背景色添加到元素；代表一些信息	尝试一下	颜色
  .bg-light	向元素添加浅灰色背景色	尝试一下	颜色
  .bg-primary	为元素添加蓝色背景色；代表重要的事情	尝试一下	颜色
  .bg-secondary	将灰色背景色添加到元素；表示“较少”的重要动作	尝试一下	颜色
  .bg-success	为元素添加绿色背景色；表示成功或积极的行动	尝试一下	颜色
  .bg-warning	向元素添加黄色/橙色背景色；表示警告或负面行动	尝试一下	颜色
  .bg-warning	向元素添加黄色/橙色背景色；表示警告或负面行动	尝试一下	颜色
  .blockquote	引用来自其他来源的引用内容块的样式（添加较大的字体大小（1.25rem））	尝试一下	文字排版
  .blockquote-footer	在blockquote内设置源标题的样式（带缩进的浅灰色文本）	尝试一下	文字排版
  .border	为元素添加边框	尝试一下	实例
  .border-bottom-0	删除元素的底部边框	尝试一下	实例
  .border-top-0	删除元素的顶部边框	尝试一下	实例
  .border-left-0	删除元素的左边框	尝试一下	实例
  .border-right-0	删除元素的右边框	尝试一下	实例
  .border-0	删除元素的边框	尝试一下	实例
  .border-danger	在元素上添加红色边框（表示危险）	尝试一下	实例
  .border-dark	在元素上添加深色边框	尝试一下	实例
  .border-info	将青色边框添加到元素（指示信息）	尝试一下	实例
  .border-light	为元素添加浅灰色边框	尝试一下	实例
  .border-primary	为元素添加蓝色边框	尝试一下	实例
  .border-secondary	为元素添加灰色边框	尝试一下	实例
  .border-success	在元素上添加绿色边框（表示成功）	尝试一下	实例
  .border-warning	向元素添加橙色边框（指示警告）	尝试一下	实例
  .border-white	为元素添加白色边框	尝试一下	实例
  .breadcrumb	分页；指示当前页面在导航层次结构中的位置	尝试一下	分页
  .breadcrumb-item	样式列出面包屑中的项目或链接	尝试一下	分页
  .btn	创建一个基本按钮（灰色背景和圆角）	尝试一下	按钮
  .btn-block	创建一个块级按钮	尝试一下	按钮
  .btn-dark	深灰色按钮	尝试一下	按钮
  .btn-danger	红色按钮；表示危险或负面行为	尝试一下	按钮
  .btn-info	蓝绿色按钮；代表中立的信息变化或行动	尝试一下	按钮
  .btn-light	浅灰色按钮	尝试一下	按钮
  .btn-primary	蓝色按钮；表示重要的事情	尝试一下	按钮
  .btn-secondary	灰色按钮；表示“较少”的重要动作	尝试一下	按钮
  .btn-success	绿色按钮；表示成功或积极的行动	尝试一下	按钮
  .btn-warning	橙色按钮；表示警告或负面行动	尝试一下	按钮
  .btn-link	使按钮看起来像链接（获取按钮行为）	尝试一下	按钮
  .btn-lg	大按钮	尝试一下	按钮
  .btn-sm	小按钮	尝试一下	按钮
  .btn-outline-dark	深灰色边框/轮廓按钮	尝试一下	按钮
  .btn-outline-danger	红色边框/轮廓按钮；表示危险或负面行为	尝试一下	按钮
  .btn-outline-info	蓝绿色边框/轮廓按钮；代表中立的信息变化或行动	尝试一下	按钮
  .btn-outline-light	浅灰色边框/轮廓按钮	尝试一下	按钮
  .btn-outline-primary	蓝色边框/轮廓按钮	尝试一下	按钮
  .btn-outline-secondary	灰色边框/轮廓按钮；表示“较少”的重要动作	尝试一下	按钮
  .btn-outline-success	绿色边框/轮廓按钮；表示成功或积极的行动	尝试一下	按钮
  .btn-outline-warning	橙色边框/轮廓线按钮；表示警告或负面行动	尝试一下	按钮
  .btn-group	将按钮分组在一行上	尝试一下	按钮组
  .btn-group-lg	大按钮组（使按钮组中的所有按钮变大-增加字体大小和填充）	尝试一下	按钮组
  .btn-group-sm	小按钮组（使按钮组中的所有按钮变小）	尝试一下	按钮组
  .btn-group-vertical	使按钮组垂直堆叠显示	尝试一下	按钮组
  .btn-toolbar	将按钮组集合组合到按钮工具栏中，以实现更复杂的组件	尝试一下	按钮组
  .card	创建一张卡片	尝试一下	卡片
  .card-body	卡片内容的容器	尝试一下	卡片
  .card-columns	创建类似于砖石的纸牌网格	尝试一下	卡片
  .card-deck	容器以创建高度和宽度相等的卡片网格	尝试一下	卡片
  .card-header	卡片页头	尝试一下	卡片
  .card-footer	卡片页脚	尝试一下	卡片
  .card-group	容器以创建高度和宽度相等，没有侧边距的卡片网格	尝试一下	卡片
  .card-header-tabs	卡标题内的样式导航选项卡	尝试一下	卡片
  .card-header-pills	在卡头内设置导航药丸的样式	尝试一下	卡片
  .card-img-bottom	将图像放在卡的底部	尝试一下	卡片
  .card-img-top	将图像放在卡的顶部	尝试一下	卡片
  .card-img-overlay	将图像变成卡片背景；通常用于在图像顶部添加文本	尝试一下	卡片
  .card-link	向任何链接添加蓝色，并在卡内添加悬停效果	尝试一下	卡片
  .card-text	如果p元素是.card-body内的最后一个子元素（或唯一的子元素），则用于删除p元素的底边距	尝试一下	卡片
  .card-title	如果p元素是.card-向卡片内的任何标题元素添加标题	尝试一下	卡片
  .card-subtitle	.card-subtitle在.card-title之后使用，并将以下内容添加到元素中：margin-top：-.375rem; 底边距：0;	尝试一下	卡片
  .carousel	创建轮播（幻灯片放映）	尝试一下	轮播图
  .carousel-caption	为轮播中的每个幻灯片创建标题文本	尝试一下	轮播图
  .carousel-control-next	“下一个”轮播/项目链接的容器	尝试一下	轮播图
  .carousel-control-prev	“上一个”轮播/商品链接的容器	尝试一下	轮播图
  .carousel-control-next-icon	与.carousel-control-next一起使用以创建“下一个”图标/按钮（向右箭头）	尝试一下	轮播图
  .carousel-control-prev-icon	与.carousel-control-prev一起使用，以创建“上一个”图标/按钮（向左箭头）	尝试一下	轮播图
  .carousel-indicators	在每张幻灯片的底部添加小点/指示器（指示圆盘传送带中有多少张幻灯片，以及用户当前正在查看的幻灯片）	尝试一下	轮播图
  .carousel-inner	幻灯片容器	尝试一下	轮播图
  .carousel-item	指定每张幻灯片的内容	尝试一下	轮播图
  .clearfix	清楚浮动	尝试一下	实例
  .close	关闭按钮的首选图标，而不是字母“x”	尝试一下	警报框
  .col-auto	使表单列根据其内容自动调整大小	尝试一下	表单
  .col-*	为超小型设备创建列布局；*可以是1到12之间的数字	尝试一下	网格系统
  .col-sm-*	为小型设备创建列布局；*可以是1到12之间的数字	尝试一下	网格系统
  .col-md-*	为中型设备创建列布局；*可以是1到12之间的数字	尝试一下	网格系统
  .col-lg-*	为大型设备创建列布局；*可以是1到12之间的数字	尝试一下	网格系统
  .col-xl-*	为超大型设备创建列布局；*可以是1到12之间的数字	尝试一下	网格系统
  .collapse	表示可折叠的内容-可以隐藏或按需显示	尝试一下	折叠
  .collapse show	默认情况下显示可折叠的内容	尝试一下	折叠
  .container	固定宽度的容器，其宽度由屏幕站点确定；左右边距相等	尝试一下	容器
  .container-fluid	横跨屏幕整个宽度的容器	尝试一下	容器
  .container-*	响应式容器	尝试一下	容器
  .custom-control	自定义表单的包装器/容器	尝试一下	自定义表单
  .custom-control-input	自定义表单控件	尝试一下	自定义表单
  .custom-checkbox	自定义复选框的包装器/容器	尝试一下	自定义表单
  .custom-control-inline	内联（水平并排）定制的表单控件	尝试一下	自定义表单
  .custom-control-label	自定义标签，与自定义表单控件一起使用时	尝试一下	自定义表单
  .custom-file	自定义文件上传	尝试一下	自定义表单
  .custom-file-input	自定义文件上传	尝试一下	自定义表单
  .custom-file-label	自定义文件标签	尝试一下	自定义表单
  .custom-radio	自定义单选按钮的包装器	尝试一下	自定义表单
  .custom-range	自定义范围控制	尝试一下	自定义表单
  .custom-select	自定义选择菜单	尝试一下	自定义表单
  .custom-select-lg	大型自定义选择菜单	尝试一下	自定义表单
  .custom-select-sm	小型自定义选择菜单	尝试一下	自定义表单
  .custom-switch	自定义拨动开关	尝试一下	自定义表单
  .disabled	禁用按钮	尝试一下	按钮
  .disabled	禁用下拉菜单项	尝试一下	下拉菜单
  .disabled	禁用分页链接	尝试一下	分页
  .disabled	禁用列表组中的列表项	尝试一下	列表组
  .dropdown	创建一个可切换菜单，允许用户从预定义列表中选择一个值	尝试一下	下拉菜单
  .dropdown-divider	用于用细边框分隔下拉菜单中的链接	尝试一下	下拉菜单
  .dropdown-header	用于在下拉菜单中添加标题	尝试一下	下拉菜单
  .dropdown-item	创建一个下拉项（添加到.dropdown菜单内的链接或按钮）	尝试一下	下拉菜单
  .dropdown-item-text	用于将纯文本添加到下拉项，或用于默认链接样式的链接	尝试一下	下拉菜单
  .dropdown-menu	为下拉菜单容器添加默认样式	尝试一下	下拉菜单
  .dropdown-menu-right	右对齐下拉菜单	尝试一下	下拉菜单
  .dropdown-toggle	用于应该隐藏和显示（切换）下拉菜单的按钮	尝试一下	下拉菜单
  .dropleft	左对齐下拉列表	尝试一下	下拉菜单
  .dropright	右对齐下拉列表	尝试一下	下拉菜单
  .dropup	指示下拉菜单（向上而不是向下）	尝试一下	下拉菜单
  .d-block	创建一个块元素（添加display:block）	尝试一下	实例
  .d-*-block	在特定的屏幕宽度上创建一个块元素	尝试一下	实例
  .d-inline	使元素内联	尝试一下	实例
  .d-*-inline	在特定的屏幕宽度上创建一个元素内联	尝试一下	实例
  .d-inline-block	使元素内联块	尝试一下	实例
  .d-*-inline-block	在特定屏幕尺寸上使元素内联块	尝试一下	实例
  .d-flex	创建一个flexbox容器并将直接子级转换为flex项	尝试一下	flex布局
  .d-*-flex	在特定屏幕尺寸上创建Flexbox容器	尝试一下	flex布局
  .d-inline-flex	创建一个内联Flexbox容器	尝试一下	flex布局
  .d-*-inline-flex	在特定屏幕尺寸上创建内联Flexbox容器	尝试一下	flex布局
  .d-none	隐藏一个元素	尝试一下	实例
  .d-*-none	在特定的屏幕尺寸上隐藏元素	尝试一下	实例
  .d-table	使元素显示为表格	尝试一下	实例
  .d-*-table	在特定的屏幕尺寸上使元素显示为表格	尝试一下	实例
  .d-table-cell	使元素显示为表格单元格	尝试一下	实例
  .d-*-table-cell	在特定的屏幕尺寸上使元素显示为表格单元格	尝试一下	实例
  .d-table-row	使元素显示为表格行	尝试一下	实例
  .d-*-table-row	在特定的屏幕尺寸上使元素显示为表格行	尝试一下	实例
  .embed-responsive	嵌入式内容的容器；使视频或幻灯片在任何设备上都能正确缩放	尝试一下	实例
  .embed-responsive-16by9	创建长宽比为16:9的嵌入式内容	尝试一下	实例
  .embed-responsive-3by4	创建长宽比为3:4的嵌入式内容	尝试一下	实例
  .embed-responsive-item	在.embed-respond内部使用；很好地将视频缩放到父元素	尝试一下	实例
  .fade	关闭警报框时增加褪色效果	尝试一下	警报框
  .fade	在显示标签/药丸内容时添加淡入淡出效果	尝试一下	导航
  .fade	在打开模态时添加淡入淡出效果	尝试一下	模态框
  .fixed-bottom	使元素停留在屏幕底部（粘性/固定）	尝试一下	导航栏
  .fixed-top	使元素停留在屏幕顶部（粘性/固定）	尝试一下	导航栏
  .flex-column	创建垂直导航	尝试一下	导航
  .flex-column	创建垂直显示item项	尝试一下	flex布局
  .flex-*-column	在不同的屏幕尺寸上垂直显示item项：	尝试一下	flex布局
  .flex-column-reverse	创建垂直显示item项；反向显示	尝试一下	flex布局
  .flex-*-column-reverse	在不同的屏幕尺寸上垂直显示item项；反向显示	尝试一下	flex布局
  .flex-fill	强制它们相等的宽度	尝试一下	flex布局
  .flex-*-fill	不同屏幕尺寸上强制它们相等的宽度	尝试一下	flex布局
  .flex-grow-0|1	用于单个伸缩项目，以占用剩余的可用空间	无	flex布局
  .flex-nowrap	一行显示完item项	尝试一下	flex布局
  .flex-*-nowrap	不同屏幕尺寸一行显示完item项	尝试一下	flex布局
  .flex-shrink-0|1	如果需要，可用于单个伸缩item项使其收缩	无	flex布局
  .flex-row	可以水平（并排）显示item项；这是默认值	尝试一下	flex布局
  .flex-*-row	不同屏幕尺寸可以水平（并排）显示item项	尝试一下	flex布局
  .flex-row-reverse	可以水平（并排）反向显示item项；这是默认值	尝试一下	flex布局
  .flex-*-row-reverse	不同屏幕尺寸可以水平（并排）反向显示item项	尝试一下	flex布局
  .flex-wrap	Wrap包裹	尝试一下	flex布局
  .flex-*-wrap	不同屏幕尺寸Wrap包裹	尝试一下	flex布局
  .flex-wrap-reverse	Wrap反向包裹	尝试一下	flex布局
  .flex-*-wrap-reverse	不同屏幕尺寸Wrap反向包裹	尝试一下	flex布局
  .float-left	将元素浮动到左侧	尝试一下	实例
  .float-*-left	不同屏幕尺寸将元素浮动到左侧	尝试一下	实例
  .float-right	将元素浮动到右侧	尝试一下	实例
  .float-*-right	不同屏幕尺寸将元素浮动到右侧	尝试一下	实例
  .float-none	将元素不做浮动	尝试一下	实例
  .font-italic	斜体文本	尝试一下	文字排版
  .font-weight-bold	加粗文本。	尝试一下	文字排版
  .font-weight-bolder	粗体文本。	尝试一下	文字排版
  .font-weight-light	轻量文本。	尝试一下	文字排版
  .font-weight-lighter	较轻的文本。	尝试一下	文字排版
  .font-weight-normal	普通文本。	尝试一下	文字排版
  .form-check	复选框的容器；添加适当的填充	尝试一下	表单
  .form-check-inline	使复选框显示在同一行上	尝试一下	表单输入
  .form-check-input	具有适当边距的样式复选框	尝试一下	表单输入
  .form-check-label	确保与复选框一起使用的标签具有适当的页边距	尝试一下	表单输入
  .form-control	用于输入，文本区域和选择元素以跨越页面的整个宽度并使它们响应	尝试一下	表单
  .form-control-file	添加块宽：100％，输入字段为type=“file”	尝试一下	表单输入
  .form-control-lg	大型表单控件	尝试一下	表单输入
  .form-control-sm	小型表单控件	尝试一下	表单输入
  .form-control-plaintext	将表单控件设置为纯文本样式	尝试一下	表单输入
  .form-control-range	添加块宽：100％，输入类型范围type=“range”	尝试一下	表单输入
  .form-group	表单标签的容器	尝试一下	表单
  .form-inline	使表单与内联块控件左对齐（这仅适用于视口内宽度至少为768px的表单）	尝试一下	表单
  .form-row	响应列的容器	尝试一下	表单
  .h1 - .h6	设置 HTML 标题（h1 至 h6）的样式	尝试一下	文字排版
  .h-25	将元素的高度设置为25％	尝试一下	实例
  .h-50	将元素的高度设置为50％	尝试一下	实例
  .h-75	将元素的高度设置为75％	尝试一下	实例
  .h-100	将元素的高度设置为100％	尝试一下	实例
  .img-fluid	响应式图像（添加最大宽度：100％和高度：自动）	尝试一下	图片
  .img-thumbnail	设置图片缩略图(图片有边框)	尝试一下	图片
  .initialism	以较小的字体大小显示>abbr>元素内的文本	尝试一下	文字排版
  .input-group	通过在输入字段的前面或后面添加图标，文本或按钮作为“帮助文本”来增强输入的容器	尝试一下	表单输入组
  .input-group-prepend	输入组容器，用于在输入字段前面添加帮助文本	尝试一下	表单输入组
  .input-group-append	输入组容器，用于在输入字段后添加帮助文本	尝试一下	表单输入组
  .input-group-lg	大型输入组	尝试一下	表单输入组
  .input-group-sm	小型输入组	尝试一下	表单输入组
  .input-group-text	设置输入组中指定帮助文本的样式	尝试一下	表单输入组
  .input-lg	大型输入字段	尝试一下	表单输入组
  .input-sm	小型输入字段	尝试一下	表单输入组
  .invalid-feedback	创建用于经过验证的表单（红色文本颜色）的自定义验证消息	尝试一下	表单
  .is-invalid	验证表单元素（在输入字段中添加红色边框）；注意：对于服务器端	尝试一下	表单
  .is-valid	验证表单元素（在输入字段中添加绿色边框）；注意：对于服务器端	尝试一下	表单
  .invalid-tooltip	创建用于验证表单的自定义验证消息（红色工具提示）	尝试一下	表单
  .invisible	使元素不可见	尝试一下	实例
  .jumbotron	创建带有圆角的填充灰色标题/框，以扩大其中的文本的字体大小。	尝试一下	Jumbotron
  .jumbotron-fluid	创建不带圆角边框的全宽100%（灰色填充标题）	尝试一下	Jumbotron
  .justify-content-*	从头开始，在末端，居中，中间和“前后”对齐弹性item项	尝试一下	flex布局
  .justify-content-*-around	在不同屏幕尺寸上“对齐”周边项	尝试一下	flex布局
  .justify-content-*-between	在不同屏幕尺寸上“对齐”两侧边项	尝试一下	flex布局
  .justify-content-*-center	在不同屏幕尺寸的中心对齐弹性item项	尝试一下	flex布局
  .justify-content-*-end	在不同屏幕尺寸的末端对齐弹性item项	尝试一下	flex布局
  .justify-content-*-start	在不同屏幕尺寸的开头对齐弹性item项	尝试一下	flex布局
  .lead	增加段落的字体大小和行高	尝试一下	文字排版
  .list-group	为<li>元素创建带边框列表组	尝试一下	列表组
  .list-group	为<li>元素创建带边框列表组	尝试一下	列表组
  .list-group-flush	从列表组的列表项中删除一些边界和圆角	尝试一下	列表组
  .list-group-horizo​​ntal	显示列表项为水平而不是垂直（并排而不是彼此顶部）	尝试一下	列表组
  .list-group-horizo​​ntal-*	在不同屏幕尺寸下水平显示列表项，而不是垂直显示列表项	尝试一下	列表组
  .list-group-item	添加到列表组中的每个<li>元素	尝试一下	列表组
  .list-group-item-action	添加到列表组内的链接，使它们在悬停时突出显示（较暗的背景）	尝试一下	列表组
  .list-group-item-danger	列表组中列表项的红色背景色	尝试一下	列表组
  .list-group-item-dark	列表组中列表项的深灰色背景色	尝试一下	列表组
  .list-group-item-info	列表组中列表项的浅蓝色背景色	尝试一下	列表组
  .list-group-item-light	列表组中列表项的浅灰色背景色	尝试一下	列表组
  .list-group-item-primary	列表组中列表项的蓝色背景颜色	尝试一下	列表组
  .list-group-item-success	列表组中列表项的绿色背景色	尝试一下	列表组
  .list-group-item-warning	列表组中列表项的黄色背景颜色	尝试一下	列表组
  .list-inline	将所有列表项放在一行上（与每个<li>元素上的 .list-inline-item 一起使用）	尝试一下	列表组
  .list-inline-item	将所有列表项放在一行上（与.list-inline一起在父>ul>元素上使用）	尝试一下	列表组
  .list-unstyled	从<ul>或<ol>列表中删除所有默认的列表样式（项目符号，左边距等）样式。	尝试一下	列表组
  .mark	高亮文本：高亮文本	尝试一下	文字排版
  .media	将媒体对象与内容对齐	尝试一下	媒体对象
  .media-body	媒体内容的容器	尝试一下	媒体对象
  .modal	创建基本模态	尝试一下	模态框
  .modal-body	定义模态主体的样式。 在此处添加任何HTML标记（p，img等）	尝试一下	模态框
  .modal-content	设置模态的样式（边框，背景颜色等）	尝试一下	模态框
  .modal-dialog-centered	在页面内垂直和水平居中模态	尝试一下	模态框
  .modal-dialog-scrollable	在模式内添加滚动条	尝试一下	模态框
  .modal-header	模态的头（通常包含标题和关闭按钮）	尝试一下	模态框
  .modal-footer	模态的页脚（通常包含一个操作按钮和一个关闭按钮）	尝试一下	模态框
  .modal-lg	大模态（比默认宽）	尝试一下	模态框
  .modal-sm	小模态（较小的宽度）	尝试一下	模态框
  .modal-xl	特大模态	尝试一下	模态框
  .m-# / m-*-#	响应式边距类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .mt-# / mt-*-#	响应式margin-top类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .mb-# / mb-*-#	响应式margin-bottom类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .ml-# / ml-*-#	响应式margin-left类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .mr-# / mr-*-#	响应式margin-right类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .mx-# / mx-*-#	响应式margin左右边距类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .my-# / my-*-#	响应式margin上下边距类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .mx-auto	将元素水平居中	尝试一下	实例
  .nav nav-tabs	创建导航选项卡	尝试一下	导航
  .nav nav-pills	创建一个药丸菜单	尝试一下	导航
  .nav-justified	对齐宽度相等的标签/药丸链接	尝试一下	导航
  .navbar	创建一个导航栏	尝试一下	导航栏
  .navbar-nav	.navbar容器内用于导航链接的容器	尝试一下	导航栏
  .navbar-brand	添加到导航栏内的链接或标题元素中以表示徽标或标题	尝试一下	导航栏
  .navbar-collapse	折叠导航栏	尝试一下	导航栏
  .navbar-expand-*	响应式可折叠类-在小（sm），中（md），大（lg）或超大（xl）屏幕上垂直堆叠导航栏	尝试一下	导航栏
  .navbar-dark	向导航栏中的所有链接添加白色文本颜色	尝试一下	导航栏
  .navbar-light	向导航栏中的所有链接添加黑色文本颜色	尝试一下	导航栏
  .navbar-text	垂直对齐导航栏中的所有非链接元素（确保正确填充）	尝试一下	导航栏
  .navbar-toggler	设置应在小屏幕上打开导航栏的按钮的样式	尝试一下	导航栏
  .nav-link	用于在导航栏中设置链接/锚的样式	尝试一下	导航栏
  .nav-item	用于为导航栏中的列表项设置样式	尝试一下	导航栏
  .needs-validation	将验证样式添加到提交的表单	尝试一下	表单
  .no-gutters	删除列中的装订线/多余空间	尝试一下	网格
  .pagination	创建分页	尝试一下	分页
  .page-item	样式列出分页内的项	尝试一下	分页
  .page-link	分页内的样式链接	尝试一下	分页
  .pagination-lg	调整为大型的分页	尝试一下	分页
  .pagination-sm	调整为小型的分页	尝试一下	分页
  .pre-scrollable	使<pre>元素可滚动（最大高度为350px，并提供y轴滚动条）	尝试一下	分页
  .progress	进度条的容器	尝试一下	进度条
  .progress-bar	创建一个进度条	尝试一下	进度条
  .progress-bar-animated	动画进度条（与条纹一起使用）	尝试一下	进度条
  .progress-bar-striped	在进度条上添加条纹	尝试一下	进度条
  .p-# / p-*-#	响应式padding类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .pt-# / pt-*-#	响应式padding-top类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .pb-# / pb-*-#	响应式padding-bottom类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .pl-# / pl-*-#	响应式padding-left类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .pr-# / pr-*-#	响应式padding-right类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .px-# / px-*-#	响应式padding左右填充类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .py-# / py-*-#	响应式padding上下填充类别；*可以是sm，md，lg或xl；＃可以是0到5之间的数字	尝试一下	实例
  .rounded	将圆角添加到元素	尝试一下	实例
  .rounded-bottom	将底部圆角添加到元素	尝试一下	实例
  .rounded-top	将顶部圆角添加到元素	尝试一下	实例
  .rounded-circle	将元素成形为圆形（IE8和更早版本不支持）	尝试一下	实例
  .rounded-left	将左侧圆角添加到元素	尝试一下	实例
  .rounded-right	将右侧圆角添加到元素	尝试一下	实例
  .rounded-0	删除元素的圆角	尝试一下	实例
  .rounded-lg	将元素变大圆角	尝试一下	实例
  .rounded-sm	将元素变小圆角	尝试一下	实例
  .row	响应列的容器	尝试一下	网格
  .row-cols-*	设置应相邻显示的列数	尝试一下	网格
  .shadow	向元素添加阴影	尝试一下	实例
  .shadow-lg	向元素添加大阴影	尝试一下	实例
  .shadow-sm	向元素添加小阴影	尝试一下	实例
  .shadow-none	向元素删除阴影	尝试一下	实例
  .small	表示较小的文本（设置为父级大小的80％）	尝试一下	实例
  .spinner-border	创建一个加载器	尝试一下	加载器
  .spinner-border-sm	创建一个较小的加载器	尝试一下	加载器
  .spinner-grow-sm	创建一个较小的加载器，使其渐大渐小	尝试一下	加载器
  .spinner-grow	创建一个“增长”的加载器，使其渐大渐小	尝试一下	加载器
  .sr-only	在除屏幕阅读器之外的所有设备上隐藏元素	尝试一下	实例
  .sr-only-focusable	在除屏幕阅读器之外的所有设备上隐藏元素	尝试一下	实例
  .sticky-top	滚动到页面上方时，使该元素在页面顶部保持粘性/固定	尝试一下	导航栏
  .stretched-link	添加到卡片内的链接中，它将使整个卡片可单击	尝试一下	卡片
  .tab-content	与.tab-pane一起使用以创建可切换tab选项卡	尝试一下	导航选项卡
  .tab-pane	与.tab-content一起使用以创建可切换tab项	尝试一下	导航选项卡
  .table	向表格添加基本样式（填充，底部边框等）	尝试一下	表格
  .table-active	将灰色背景色添加到表行（tr或表单元格（td））（悬停时使用的相同颜色）	尝试一下	表格
  .table-bordered	在表格和单元格的所有侧面添加边框	尝试一下	表格
  .table-borderless	从表格中删除边框	尝试一下	表格
  .table-condensed	通过将单元格填充减半使表格更紧凑	无	表格
  .table-dark	在表中添加带有白色文本的黑色背景	尝试一下	表格
  .table-hover	创建一个可悬停的表格（在悬停的表格行上添加灰色背景色）	尝试一下	表格
  .table-responsive-*	使表格具有响应性（在需要时添加水平滚动条）；默认情况下，滚动条被添加到宽度小于992px的屏幕上的表格中（如果需要）；查看大于992px宽的内容时没有任何区别；但是，您可以使用sm | md | lg | xl来决定何时应在表格中获取滚动条，具体取决于屏幕宽度	尝试一下	表格
  .table-striped	将斑马条纹添加到表中	尝试一下	表格
  .text-break	防止长文本破坏布局	尝试一下	文字排版
  .text-left	表示左对齐的文本	尝试一下	文字排版
  .text-*-left	指示在小，中，大或超大屏幕上的左对齐文本	尝试一下	文字排版
  .text-center	表示居中对齐的文本	尝试一下	文字排版
  .text-*-center	指示在小，中，大或超大屏幕上居中对齐的文本	尝试一下	文字排版
  .text-right	表示右对齐的文本	尝试一下	文字排版
  .text-*-right	指示在小，中，大或超大屏幕上的右对齐文本	尝试一下	文字排版
  .text-decoration-none	从链接中删除下划线	尝试一下	文字排版
  .text-justify	表示对齐的文本	尝试一下	文字排版
  .text-monospace	等宽文本	尝试一下	文字排版
  .text-nowrap	表示没有自动换行	尝试一下	文字排版
  .text-lowercase	表示小写文本	尝试一下	文字排版
  .text-uppercase	表示大写的文本	尝试一下	文字排版
  .text-capitalize	表示大写文本	尝试一下	文字排版
  .text-reset	重置文本或链接的颜色（继承其父级的颜色）	尝试一下	文字排版
  .text-hide	隐藏文本	尝试一下	文字排版
  .text-danger	红色文字颜色；表示危险	尝试一下	颜色
  .text-info	浅蓝色文字颜色；指示信息	尝试一下	颜色
  .text-light	浅灰色文字颜色	尝试一下	颜色
  .text-muted	灰色文字颜色	尝试一下	颜色
  .text-primary	蓝色文字颜色；表示重要的事情	尝试一下	颜色
  .text-secondary	灰色文字颜色；表示“不太”重要	尝试一下	颜色
  .text-success	绿色文字颜色；表示成功	尝试一下	颜色
  .text-warning	黄色/橙色文本颜色；表示警告	尝试一下	颜色
  .text-white	白文本颜色	尝试一下	颜色
  .thead-dark	向表标题添加黑色背景色	尝试一下	表格
  .thead-light	将灰色背景色添加到表格标题	尝试一下	表格
  .toast	Toast 组件	尝试一下	Toast
  .toast-body	Toast 内容	尝试一下	Toast
  .toast-header	Toast 头部	尝试一下	Toast
  .valid-feedback	创建用于经过验证的表单（绿色文本颜色）的自定义验证消息	尝试一下	表单
  .valid-tooltip	创建用于已验证表单的自定义验证消息（绿色工具提示）	尝试一下	表单
  .visible	使元素可见	尝试一下	实例
  .was-validated	将验证样式添加到表单元素	尝试一下	表单
  .w-25	将元素的宽度设置为25％	尝试一下	实例
  .w-50	将元素的宽度设置为50％	尝试一下	实例
  .w-75	将元素的宽度设置为75％	尝试一下	实例
  .w-100	将元素的宽度设置为100％	尝试一下	实例