工具
Web 开发
Web 服务
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-*