首页
Bootstrap5组件手册
CSS类
1.Bootstrap5自定义了一些CSS类
文字
Bootstrap 5 默认：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: 16px
line-height: 1.5
p{
margin-top: 0;
margin-bottom: 16px;
}
| 类 | 描述 |
|---|---|
| .fs-* | 字体大小（*值为1-6，1最大） |
| .fw-normal | 普通粗细 |
| .fw-bold | 粗体 |
| .fw-bolder | 相对父标签的粗体 |
| .fw-light | 细体(.fw-lighter) |
| .fst-normal | 普通文本 |
| .fst-italic | 斜体 |
| .lead | 突出的文本 |
| .small | 指定更小文本 (原字体的 85% ) |
| .text-center | 居中 |
| .text-start | 左对齐 |
| .text-end | 右对齐 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
| .text-nowrap | 内容超出部分不换行 |
| .text-wrap | 内容超出部分换行 |
| .text-lowercase | 设定文本小写 |
| .text-uppercase | 设定文本大写 |
| .text-capitalize | 设定单词首字母大写 |
| .list-unstyled | 移除默认的列表样式<ul> 和 <ol> |
| .list-inline | 能将所有列表项放置同一行(类似：display:inline-block) |
| .pre-scrollable | 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示，且将小写字母转换为大写字母 示例：展示<abbr title="提示信息" class="initialism">abc</abbr> 结果：展示ABC |
宽、高 width height
*号值：auto 25 50 75 100，数值表示百分比
w-* 宽
h-* 高
外边距 margin
*号值：auto 1-5
.m-* 上下左右（类似 margin:*;）
.mt-* 上
.mb-* 下
.ms-* 左
.me-* 右
.mx-* 左右（类似 margin-left:*;margin-right:*;）
.my-* 上下（类似 margin-top:*;margin-bottom:*;）
内边距 padding
*号值：auto 1-5
.p-* 上下左右
.pt-* 上
.pb-* 下
.ps-* 左
.pe-* 右
.px-* 左右
.py-* 上下
边框 border
.border 显示，四边框（如：border:1px solid #dee2e6） .border-top 显示，上边框 .border-bottom 显示，下边框 .border-start 显示，左边框 .border-end 显示，右边框 .border .border-top-0 不显示，上边框 .border .border-bottom-0 不显示，下边框 .border .border-start-0 不显示，左边框 .border .border-end-0 不显示，右边框 .border-* 边框宽度（*号值 1-5） 颜色： .border-danger.border-dark
.border-info
.border-primary
.border-secondary
.border-success
.border-warning
.border-light
浅色 .border-white
白色
圆角 rounded
.rounded 四边圆角 .rounded-* 四边圆角，圆角大小（*号值 1-3，） .rounded-top 上边圆角 .rounded-bottom 下边圆角 .rounded-start 左边圆角 .rounded-end 右边圆角 .rounded-circle 椭圆形（正方形下是圆形） .rounded-pill 药丸形（正方形下是圆形）
浮动 float
指定执行：（注： * 号处加以下标识，指定宽度下执行）
sm 平板--屏幕宽度大于 576px 执行
md 桌面显示器 - 屏幕宽度大于 768px 执行
lg 大桌面显示器 - 屏幕宽度大于 992px 执行
xl 特大桌面显示器 - 屏幕宽度大于 1200px 执行
xxl 超大桌面显示器 - 屏幕宽度大于 1400px 执行
| 直接执行 | 指定执行 | 描述 |
|---|---|---|
| .float-start | .float-*-start | 左浮动 |
| .float-end | .float-*-end | 右浮动 |
| .float-none | 无浮动 | |
| .clearfix | 清除浮动 |
弹性盒子 flexbox
指定执行：（注： * 号处加以下标识，指定宽度下执行）
sm 平板--屏幕宽度大于 576px 执行
md 桌面显示器 - 屏幕宽度大于 768px 执行
lg 大桌面显示器 - 屏幕宽度大于 992px 执行
xl 特大桌面显示器 - 屏幕宽度大于 1200px 执行
xxl 超大桌面显示器 - 屏幕宽度大于 1400px 执行
| 直接执行 | 指定执行 | 描述 |
|---|---|---|
| 基础类 | ||
| .d-flex | .d-*-flex | 指定标签为弹性盒子（自身为块级，其内标签同行排列） |
| .d-inline-flex | .d-*-inline-flex | 指定标签为弹性盒子（自身为行内级，其内标签同行排列） |
| 组合类 | ||
| .flex-row | .flex-*-row | 子标签，水平排列，左对齐（默认） |
| .flex-row-reverse | .flex-*-row-reverse | 子标签，水平排列，右对齐 |
| .flex-column | .flex-*-column | 子标签，垂直排列（设为块级） |
| .flex-column-reverse | .flex-*-column-reverse | 子标签，垂直排列，标签顺序反转（设为块级） |
| .justify-content-start | .justify-content-*-start | 子标签，左对齐（默认，多个<div>布局） |
| .justify-content-end | .justify-content-*-end | 子标签，右对其 |
| .justify-content-center | .justify-content-*-center | 子标签，居中 |
| .justify-content-between | .justify-content-*-between | 子标签，等分 |
| .justify-content-around | .justify-content-*-around | 子标签，等分（两边留位） |
| .flex-nowrap | .flex-*-nowrap | 子标签，不换行 |
| .flex-wrap | .flex-*-wrap | 子标签，可换行 |
| .flex-wrap-reverse | .flex-*-wrap-reverse | 子标签，可换行（反转排列） |
| .align-content-start | .align-content-*-start | |
| .align-content-end | .align-content-*-end | |
| .align-content-center | .align-content-*-center | |
| .align-content-between | .align-content-*-between | 子标签，内容，行高等距对齐 |
| .align-content-around | .align-content-*-around | |
| .align-content-stretch | .align-content-*-stretch | |
| .align-items-start | .align-items-*-start | 子标签，对齐方式 |
| .align-items-end | .align-items-*-end | |
| .align-items-center | .align-items-*-center | |
| .align-items-around | .align-items-*-around | |
| .align-items-stretch | .align-items-*-stretch | |
| 子标签用 | ||
| .flex-fill | .flex-*-fill | 等宽（同级标签都加，让宽度相同） 注：单加某个占据剩余宽度 |
| .flex-grow-0 | .flex-*-grow-0 | 不扩展 |
| .flex-grow-1 | .flex-*-grow-1 | 扩展（占据剩余宽度） |
| .flex-shrink-0 | .flex-*-shrink-0 | 不收缩 |
| .flex-shrink-1 | .flex-*-shrink-1 | 收缩 |
| .order-1 | .order-*-1 | 排序（指定HTML显示先后） 注：数值可变，0先展示，可选值0-12 |
| .ms-auto | .ms-*-auto | 左边距，自动 |
| .me-auto | .me-*-auto | 右边距，自动 |
| .align-self-stretch | .align-self-*-stretch | 对齐方式 |
| .align-self-start | .align-self-*-start | |
| .align-self-end | .align-self-*-end | |
| .align-self-center | .align-self-*-center | |
| .align-self-baseline | .align-self-*-baseline |