UI设计师-UI设计模式与组件库-Bootstrap_Bootstrap组件学习：排版组件、辅助类与图标.docx

PAGE1

PAGE1

Bootstrap排版组件基础

1子标题1.1：Bootstrap文本样式与对齐

在Bootstrap中，文本样式和对齐方式可以通过一系列方便的预定义类来轻松操作。让我们通过以下代码示例来了解如何应用这些类：

!--引入Bootstrap核心CSS文件--

linkrel=stylesheethref=/bootstrap/4.5.2/css/bootstrap.min.css

pclass=text-uppercase所有大写字母。/p

pclass=text-lowercase所有小写字母。/p

pclass=text-capitalize首字母大写。/p

pclass=text-center居中对齐的文本。/p

pclass=text-right右对齐的文本。/p

pclass=text-left左对齐的文本（默认对齐方式）。/p

在以上示例中：-.text-uppercase将文本转换为全部大写。-.text-lowercase将文本转换为全部小写。-.text-capitalize将文本的首字母转换为大写。-.text-center、.text-right和.text-left分别用于居中、右对齐和左对齐文本。

2子标题1.2：Bootstrap标题与显示级别

Bootstrap通过.h1至.h6和.display-1至.display-4类提供了标题的样式和显示级别：

!--引入Bootstrap核心CSS文件--

linkrel=stylesheethref=/bootstrap/4.5.2/css/bootstrap.min.css

!--从h1到h6--

h1一级标题/h1

h2二级标题/h2

h3三级标题/h3

h4四级标题/h4

h5五级标题/h5

h6六级标题/h6

!--从display-1到display-4--

h1class=display-1超大标题显示样式1/h1

h1class=display-2超大标题显示样式2/h1

h1class=display-3超大标题显示样式3/h1

h1class=display-4超大标题显示样式4/h1

.h1至.h6用于常规的标题层级，而.display-1至.display-4用于较大尺寸的标题，以突出显示。

3子标题1.3：Bootstrap段落与行内文本

Bootstrap允许通过类来调整段落和行内文本的样式：

!--引入Bootstrap核心CSS文件--

linkrel=stylesheethref==/bootstrap/4.5.2/css/bootstrap.min.css

pclass=lead使用.lead类让段落文本加粗并增大，适用于重要信息的展示。/p

psmall今天天气小i晴/i。/small使用small和i标签/i来创建更小的行内文本或斜体。/p

在以上示例中：-.lead类将段落文本变粗和增大，适合用于突出显示重要信息。-small和i标签分别用于创建更小的行内文本和斜体文本。

4子标题1.4：Bootstrap列表与描述性列表

Bootstrap提供了几种列表样式，包括无序列表（带有不同的列表样式）、有序列表、工具列表和描述列表：

!--引入Bootstrap核心CSS文件--

linkrel=stylesheethref=/bootstrap/4.5.2/css/bootstrap.min.css

!--无序列表--

ulclass=list-unstyled

li条目1/li

li条目2/li

li条目3/li

/ul

!--有序列表--

olclass=list-unstyled

li条目1/li

li条目2/li

li条目3/li

/ol

!--工具列表--

ulclass=list-inline

liclass=list-inline-item条目1/li

liclass=list-inline-item条目2/li

liclass=list-inline-item条目3/li

/ul

!--描述列表--

dlclass=row

dtclass=col-sm-3描述标题1/dt

ddclass=col-sm-9描述详细内容1/dd

dtclass=col-sm-3描述标题2/dt

ddclass=col-sm-9描述详细内容2/dd

/dl

在以上示例中：-使用.list-unstyled类可以去掉无序或有序列表的项目符号或数