Bootstrap 5 学习笔记

如果你需要修改 BootStrap 5 的 SCSS 代码 并生成自己所需要的 CSS 文件，那么应该保持这样的代码布局 — 把你自己的 SCSS 代码放在 custom.scss 中，而不是直接修改 BootStrap 的 SCSS 文件：

project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

实用工具

文本（Text）

文本对齐：

• text-start
  • text-sm-start
• text-center
• text-end

文本大小：

• fs-* (从 1- 6）

加粗和斜体：

• fw-bolder
• fw-bold
• fw-normal
• fw-light
• fw-lighter
• fst-italic
• fst-normal

fw-* 修改 fong-weight，fst-* 修改 font-style。

文本溢出：

• text-wrap - 溢出自动折行
• text-nowrap

大小写转换：

• text-lowercase
• text-uppercase
• text-capitalize - 首字母大写，不改变其他字母大小写

行高：

• lh-1
• lh-sm
• lh-base
• lh-lg

等宽字体：

• font-monospace

将文本或链接颜色置为与父元素相同：

• text-reset - 如让链接颜色不为默认，而与周围文本相同

文本装饰：

• text-decoration-underline
• text-decoration-line-through
• text-decoration-none - 如取消链接下划线

Badges

badge 取代了早先的 label 类。badge 需要搭配 bg-* 使用，如：

• badge bg-primary
• badge rounded-pill bg-primary - 圆角

badge 可以搭配 btn btn-* position-relative 实现右上角提示。

更新

• ml-*, mr-* 更新为 ms-*, me-* （left, right 更新为 start, end）
• pl-*, pr-* 更新为 ps-*, pe-*