Bootstrap CSS类参考

Bootstrap 参考手册

Bootstrap CSS类参考

Bootstrap 警报框参考

Bootstrap 按钮参考

Bootstrap 轮播图参考

Bootstrap 折叠参考

Bootstrap 下拉菜单参考

Bootstrap 模态框参考

Bootstrap 弹出框参考

Bootstrap 滚动监听参考

Bootstrap Tab选项卡参考

Bootstrap Toasts 组件参考

Bootstrap 工具提示参考

下一节: Bootstrap 警报框参考

下一节

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

为

元素创建带边框列表组

尝试一下

列表组

.list-group

为

元素创建带边框列表组

尝试一下

列表组

.list-group-flush

从列表组的列表项中删除一些边界和圆角

尝试一下

列表组

.list-group-horizo​​ntal

显示列表项为水平而不是垂直（并排而不是彼此顶部）

尝试一下

列表组

.list-group-horizo​​ntal-*

在不同屏幕尺寸下水平显示列表项，而不是垂直显示列表项

尝试一下

列表组

.list-group-item

添加到列表组中的每个

元素

尝试一下

列表组

.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

将所有列表项放在一行上（与每个

元素上的 .list-inline-item 一起使用）

尝试一下

列表组

.list-inline-item

将所有列表项放在一行上（与.list-inline一起在父>ul>元素上使用）

尝试一下

列表组

.list-unstyled

从

或
列表中删除所有默认的列表样式（项目符号，左边距等）样式。

尝试一下

列表组

.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

使

元素可滚动（最大高度为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％
尝试一下
实例
下一节: Bootstrap 警报框参考
下一节
查看笔记 分享笔记
笔记内容：
称呼：
Email：
站点：
分享笔记 重置
分类导航
前端
Ajax 教程
Angular 教程
Aurelia 教程
Bootstrap 教程
ChartJS 教程
CSS 教程
ES6 教程
FontAwesome 教程
HTML 教程
HTML 字符集 教程
HTML 游戏 教程
JavaScript 教程
jQuery 教程
Less 教程
React 教程
Sass 教程
Stylus 教程
TypeScript 教程
Unity 教程
Vue.js 教程
WebAssembly 教程
XAML 教程
颜色 教程
服务端
C# 教程
C++ 教程
COBOL 教程
C语言 教程
Fortran 教程
Go 教程
Groovy 教程
Java 教程
JSP 教程
JVM 教程
Kotlin 教程
Lisp 教程
Lua 教程
Node.js 教程
Pascal 教程
Perl 教程
PHP 教程
Python 教程
Python 3 教程
Ruby 教程
Rust 教程
Scala 教程
Spring 教程
Spring Boot 教程
Spring Cloud 教程
VB.Net 教程
移动端
Android 教程
IOS 教程
Objective-C 教程
React Native 教程
Swift 教程
小程序 教程
数据库
Access 教程
DB2 教程
Mariadb 教程
Memcached 教程
MongoDB 教程
MySQL 教程
Neo4j 教程
PL/SQL 教程
PostgreSQL 教程
Redis 教程
SQL 教程
SQL Server 教程
SQLite 教程
T-SQL 教程
数据格式
Jackson 教程
JSON 教程
SVG 教程
XML 教程
开发工具
ActiveMQ 教程
Ant 教程
Apache HttpClient 教程
Apache POI PPT 教程
AWS 教程
Docker 教程
ElasticSearch 教程
ExpressJS 教程
GIT 教程
GitLab 教程
Google Maps 教程
Gradle 教程
Java NIO 教程
JavaFX 教程
JavaMail 教程
JDBC 教程
jMeter 教程
JPA 教程
jsoup 教程
Junit 教程
KoaJS 教程
Kubernetes 教程
Log4j 教程
Logstash 教程
Lucene 教程
Makefile 教程
Maven 教程
RESTful 教程
Sed 教程
SEO 教程
Servlet 教程
SLF4J 教程
Socket.IO 教程
Struts 教程
SVN 教程
TestNG 教程
UML 教程
UNIX / LINUX 教程
WebSocket 教程
WPF 教程
xStream 教程
区块链 教程
数据处理
Flink 教程
Flume 教程
Hadoop 教程
Hbase 教程
Hive 教程
Kafka 教程
Kibana 教程
MapReduce 教程
MATLAB 教程
MyBatis 教程
Pig 教程
R语言 教程
Solr 教程
Spark 教程
Storm 教程
Zookeeper 教程
大数据分析 教程
数据仓库 教程
数据挖掘 教程
计算机基础
HTTP 教程
IPv4 教程
IPv6 教程
Ubantu 教程
WebServices 教程
嵌入式系统 教程
操作系统 教程
数据结构和算法 教程
汇编语言 教程
物联网 教程
电子电路基础 教程
编译器设计 教程
网站开发 教程
计算机 教程
计算机基础 教程
计算机网络 教程
设计模式 教程
AI
CNTK 教程
Keras 教程
PyTorch 教程
TensorFlow 教程
人工智能 教程
机器学习 教程
Python 技术
Django 教程
Flask 教程
NumPy 教程
Pandas 教程
Pillow 教程
PyGTK 教程
PyQt5 教程
PySpark 教程
pytest 教程
Python -数据科学 教程
Python MySQL 教程
Python 取证 教程
Python 数据结构 教程
Python 文本处理 教程
Python 网络编程 教程
Python 网页抓取 教程
Python 设计模式 教程
RxPY 教程
SciPy 教程
Seaborn 教程
SymPy 教程
wxPython 教程
框架
Laravel 教程
Web 图标Icon 教程
Web2py 教程
WebGL 教程
WebRTC 教程
WordPress 教程
Yii 教程
Zend Framework 教程
SAP
Crystal Reports 教程