学习 Bootstrap 5

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*一起使用