用途:该技能面向 Bootstrap 5.3 的内容样式(Content),在用户询问 Bootstrap 排版、文本样式、标题样式、图片、表格等内容类问题时使用,帮助给出对应的类名与写法。
主要能力:
- Reboot 基线:规范化浏览器默认样式,为后续排版与内容样式提供一致基础。
- 排版:标准标题 h1–h6 及 .h1–.h6 类;.display-1 至 .display-6 展示型标题;.lead 引导段落;行内元素 mark、del、s、ins、u、small、strong、em;文本工具类 fs-1 至 fs-6、fw-、fst-、lh-、text-decoration-;对齐 text-start/center/end 及响应式对齐;换行与溢出 text-wrap、text-nowrap、text-truncate、text-break;引用 blockquote 与 blockquote-footer;列表 list-unstyled、list-inline;大小写转换 text-lowercase/uppercase/capitalize;等宽字体 font-monospace;text-reset 重置链接颜色。
- 图片:img-fluid 响应式图片、img-thumbnail 缩略图、float-start/float-end 对齐、d-block mx-auto 居中、picture 元素多源适配。
- 表格:.table 基础表格,table-primary 等变体,table-striped、table-striped-columns、table-hover、table-active、table-bordered、table-borderless、table-sm,表头 table-light/table-dark,table-group-divider 分组分隔线,caption 与 caption-top,tfoot 表尾,table-responsive 及断点响应式容器,align-middle/align-top/align-bottom 垂直对齐。
- figure:figure、figure-img、figure-caption 及右对齐标题。
使用方式:在 HTML 元素上添加对应 Bootstrap 类名即可,例如 <img class="img-fluid">、<table class="table table-striped">。技能附带参考文件(reboot-reference.md、typography-reference.md、images-reference.md、tables-reference.md、figures-reference.md)与示例文件(reboot-elements.html、typography-patterns.html、images-patterns.html、tables.html、figures-patterns.html)。
适用场景:使用 Bootstrap 5.3 构建页面内容区、需要快速套用排版与表格样式时。
限制:资料仅覆盖 Bootstrap 5.3 内容样式相关内容,未提供安装命令、收费、价格或平台信息;RFS 响应式字号默认开启,具体 Sass 定制细节需查阅对应参考文件。