学习 Bootstrap 5 之 Text

学习 Bootstrap 5 之 文本 文本 (Text)1. 文本对齐方式 (Text alignment)(1). 居左 (text-start)(2). 居中 (text-center)(3). 居右 (text-end)(4). 响应式 (text-{断点}-{start | center | end})(5). 对比 2. 包裹文本(1). 包裹 class = "text-wrap"(2). 不包裹 class = "text-nowrap" 3. Word break4. 文本转换 (Text transform)(1). 全部大写 class = "text-uppercase"(2). 全部小写 class = "text-lowercase"(3). 首字母大写 class = "text-capitalize"(4). 对比 5. 字体大小 (Font size).fs-N 类 6. 字体粗细和斜体 (Font weight and italics)(1). 粗体 class = "fw-bold"(2). 相对于父元素的粗体 class = "fw-bolder"(3).普通粗细文本 class = "fw-normal"(4). 细体 class = "fw-light"(5). 细体 class = "fw-lighter"(6). 斜体 class = "fst-italic"(7). 普通文本 class = "fst-normal"(8). 对比 7. 行高 (Line height)(1). class = "lh-1"(2). class = "lh-sm"(3). class = "lh-base"(4). class = "lh-lg" 8. 等宽字体 (Monospace)9. 重置颜色 (Reset color)10. 文本修饰 (Text decoration)(1). 文本下划线 class = "text-decoration-underline"(2). 文本穿过线 class = "text-decoration-line-through"(3). 文本无修饰 class = "text-decoration-none"(4). 对比

文本 (Text)

Bootstrap 5 官方文档

1. 文本对齐方式 (Text alignment) (1). 居左 (text-start) (2). 居中 (text-center) (3). 居右 (text-end) (4). 响应式 (text-{断点}-{start | center | end}) (5). 对比

文本居左 文本居中 文本居右 2. 包裹文本 (1). 包裹 class = “text-wrap”

可以看出即使宽度很小, 也被包裹在里面了, 宽度大了会默认居中

包裹文本, 区域宽度: 10px; 包裹文本, 区域宽度: 200px; (2). 不包裹 class = “text-nowrap”

可以看出, 区域长度过大时, 也会包裹文本, 宽度大了会默认也会居中

不包裹文本, 10px 不包裹文本, 100px 不包裹文本, 500px 3. Word break

使用 .text-break类, 可以防止长字符串的文本破坏组件的布局 可以看出, 没有使用.text-break类的 (下面的), 延申出去了, 使用的则自动换行了

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 4. 文本转换 (Text transform)

针对英文字母

(1). 全部大写 class = “text-uppercase” (2). 全部小写 class = “text-lowercase” (3). 首字母大写 class = “text-capitalize” (4). 对比

Lowercased text. Uppercased text. i am a student. 5. 字体大小 (Font size) .fs-N 类

N是 1, 2, 3, 4, 5, 6

类字体大小.fs-12.5 rem.fs-22 rem.fs-31.75 rem.fs-41.5 rem.fs-51.25 rem.fs-61 rem

.fs-1 text .fs-2 text .fs-3 text .fs-4 text .fs-5 text .fs-6 text 6. 字体粗细和斜体 (Font weight and italics) (1). 粗体 class = “fw-bold” (2). 相对于父元素的粗体 class = “fw-bolder” (3).普通粗细文本 class = “fw-normal” (4). 细体 class = “fw-light” (5). 细体 class = “fw-lighter” (6). 斜体 class = “fst-italic” (7). 普通文本 class = “fst-normal” (8). 对比

粗体 粗体(相对于父元素) 普通粗细文本 细体 细体(相对于父元素) 斜体 普通文本 7. 行高 (Line height) (1). class = “lh-1” (2). class = “lh-sm” (3). class = “lh-base” (4). class = “lh-lg”

这是一个很长的段落，用来显示元素的行高如何受到实用程序的影响。 这是一个很长的段落，用来显示元素的行高如何受到实用程序的影响。 这是一个很长的段落，用来显示元素的行高如何受到实用程序的影响。 这是一个很长的段落，用来显示元素的行高如何受到实用程序的影响。 8. 等宽字体 (Monospace)

使用 .font-monospace类设置等宽字体 第一行是等宽字体 第二行是默认字体

This is in monospace This is in monospace 9. 重置颜色 (Reset color)

使用 .text-reset类重置颜色

reset link 10. 文本修饰 (Text decoration) (1). 文本下划线 class = “text-decoration-underline” (2). 文本穿过线 class = “text-decoration-line-through” (3). 文本无修饰 class = “text-decoration-none” (4). 对比

文本下划线 文本穿过线 超