学习 Bootstrap 5
- 1. [列使用 (栅格布局系统)](https://blog.csdn.net/qq_37354060/article/details/122516540)
- 2. [列中的对齐方式 (列)](https://blog.csdn.net/qq_37354060/article/details/122510635)
- 3. [排版](https://blog.csdn.net/qq_37354060/article/details/122513202)
- 4. [背景颜色](https://blog.csdn.net/qq_37354060/article/details/122513202)
- 5. [边框](https://blog.csdn.net/qq_37354060/article/details/122513202)
1. 列使用 (栅格布局系统)
| 类 | 使用方法 | 效果 | 备注 |
|---|---|---|---|
.row |
<div class = “row”> | 该区域为行 | |
.col |
<div class = “col”> | 该区域为列 | 宽度均分 |
.col-N (1 ~ 12) |
<div class = “col-N”> | 该区域为列 | 宽度指定 |
.col-col-auto |
<div class = “col-auto”> | 该区域为列 | 宽度与内容相匹配 |
.row-cols-N (1 ~ 12) |
<div class = “row row-cols-N”> | 该区域为行 | 指定该行列的个数 |
.row-cols-auto |
<div class = “row row-cols-auto”> | 该区域为行 | 指定该行列的宽度与内容相匹配 |
2. 列中的对齐方式 (列)
| 类 | 作用对象 | 方向 | 适用范围 | 效果 |
|---|---|---|---|---|
.align-items-start |
行 | 垂直 | 该行所有列 | 居顶 |
.align-items-center |
行 | 垂直 | 该行所有列 | 居中 |
.align-items-end |
行 | 垂直 | 该行所有列 | 居底 |
.align-self-start |
列 | 垂直 | 该列 | 居顶 |
.align-self-center |
列 | 垂直 | 该列 | 居中 |
.align-self-end |
列 | 垂直 | 该列 | 居底 |
.justify-content-start |
行 | 水平 | 该行 | 居左 |
.justify-content-center |
行 | 水平 | 该行 | 居中 |
.justify-content-end |
行 | 水平 | 该行 | 居右 |
.justify-content-between |
行 | 水平 | 该行所有列 | 两端对齐 |
.justify-content-around |
行 | 水平 | 该行所有列 | 左右间距相等 |
.justify-content-end-evenly |
行 | 水平 | 该行所有列 | 等间距 |
3. 排版
| 类 | 适用标签 或 使用方法 | 效果 或 作用 |
|---|---|---|
.h1 ~ h6 |
<div> <p> <span> 等 | 拥有h标签样式 |
.text-muted |
<div> <p> <span> 等 | 副标题样式 |
.display-1 ~ .display-6 |
<div> <p> <span> 等 | 比h标签字体更大的样式 |
.lead |
<div> <p> <span> 等 | 段落突出 |
.initialism |
<addr title = “提示的内容” class = “initialism”>内容</addr> | 提示信息 鼠标悬浮效果 |
.list-unstyled |
<ul> <ol> | 无样式列表 |
.text-truncate |
<div> <p> <span> 等 | 区域溢出文本用省略号省略 |
| 原生标签 | Bootstrap 5 提供的类 | 效果 |
|---|---|---|
| <mark> | .mark | 突显文本 (背景变色) |
| <del> | 删除线 | |
| <s> | .text-decoration-line-through | 删除线 |
| <u> | .text-decoration-underline | 下划线 |
| <ins> | 下划线 | |
| <small> | .small | 小字文本 |
| <strong> | 加粗 | |
| <em> | 斜体 |
4. 背景颜色
| 类 | 适用标签 或 使用方法 | 效果 或 作用 |
|---|---|---|
.bg-{颜色} |
<div class = “bg-primary”></div> | 设置背景颜色 |
.bg-gradient |
<div class = “bg-gradient bg-primary”></div> | 设置渐变背景颜色 |
.bg-opacity-N (10, 25, 50, 75) |
<div class = “bg-primary bg-opacity-N”></div> | 设置背景颜色不透明度 |
5. 边框
| 类 | 适用标签 或 使用方法 | 效果 或 作用 | 备注 |
|---|---|---|---|
.border |
<div> | 设置区域四个边的边框 | |
.border-{top 或 start 或 end 或 bottom} |
<div> | 设置区域指定边的边框 | |
.border-0 |
<div class=“border border-0”>除去全边框</div> | 取消区域四个边的边框 | 与.border一起使用 |
.border-{top 或 start 或 end 或 bottom}-0 |
<div class=“border border-start-0”>除去左边框</div> | 取消区域指定边的边框 | 与.border一起使用 |
.border-{颜色} |
<div class=“border border-primary”>border-primary</div> | 设置区域边框颜色 | 与.border一起使用 |
.border-N (1 ~ 5) |
<div class=“border border-4”></div> | 设置区域边框颜色 | 与.border一起使用, N的单位为像素 |
.rounded |
<div class=“border rounded”>rounded</div> | 圆角边框 | 与.border一起使用 |
.rounded-{top 或 start 或 end 或 bottom} |
<div class=“border rounded-top”>rounded-top</div> | 某方向上的两个圆角边框 | 与.border一起使用 |
.rounded-circle |
<div class=”border rounded-circle “>rounded-circle</div> | 圆形边框 | 与.border一起使用, 长宽相等为正圆 |
.rounded-pill |
<div class=“border rounded-pill”>rounded-pill</div> | 药丸形边框 | 与.border一起使用 |
.rounded-N (1 ~ 3) |
<div class=“border rounded-3”>rounded-3</div> | 设置圆角边框角度 | 与.rounded*一起使用 |
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122804.html
