1.颜色
<div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
2.背景颜色
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
<div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
3.表格
.table 类来设置基础表格的样式, <table class="table">
.table-striped 类，您将在 <tbody> 内的行上看到条纹, <table class="table table-striped">
.table-bordered 类可以为表格添加边框
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
.table-dark 类可以为表格添加黑色背景
.table-dark 和 .table-striped 类可以创建黑色的条纹表格
.table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果
.table-sm 类用于通过减少内边距来设置较小的表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
.table-responsive-sm .table-responsive-md .table-responsive-lg .table-responsive-xl
<tr class="table-primary">: 通过指定意义的颜色类可以为表格的行或者单元格设置颜色
下表列出了表格颜色类的说明:
类名 描述
.table-primary 蓝色: 指定这是一个重要的操作
.table-success 绿色: 指定这是一个允许执行的操作
.table-danger 红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning 橘色: 表示需要注意的操作
.table-active 灰色: 用于鼠标悬停效果
.table-secondary 灰色: 表示内容不怎么重要
.table-light 浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景
4.图像形状
<img src="cinqueterre.jpg" class="img-fluid rounded">
.rounded 类可以让图片显示圆角效果
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 类用于设置图片缩略图(图片有边框)
.float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
.img-fluid 类来设置响应式图片
5.排版
<code> # 代码元素
<kbd> # 快捷键元素
<pre> # 预格式化的文本, 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4
<small> # 元素用于创建字号更小的颜色更浅的文本
<mark> # 为黄色背景及有一定的内边距
<blockquote class="blockquote">...</blockquote> # 引用
<abbr> # 元素的样式为显示在文本底部的一条虚线边框
.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
6. border 类可以添加或移除边框
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span> # 无顶部边框
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
7. 设置边框颜色
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
8. 添加圆角边框
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
9. 元素浮动
float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动
<div class="clearfix">
<span class="float-left">左浮动</span>
<span class="float-right">右浮动</span>
</div>
# 设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>
# 设置可见,禁止
<div class="visible">...</div> # 可见
<div class="invisible">...</div> # 禁止
# 设置内容溢出
<div class="overflow-auto">...</div> # 限高下, 带下拉框
<div class="overflow-hidden">...</div> # 限高下, 无下拉框,文字有限制
10.居中对齐
<span class="mx-auto"></span>
#
m - for classes that set margin
p - for classes that set padding
#
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
#
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
11. 设置宽度
使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) :
<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>
<img src="..." class="mw-100" alt="..."> # Max-width 100%
12. 设置高度
使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) :
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">高度 25%</div>
<div class="h-50 bg-warning">高度 50%</div>
<div class="h-75 bg-warning">高度 75%</div>
<div class="h-100 bg-warning">高度 100%</div>
<div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>
14.图文-figure
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
15. 图片替换文字 - Image replacement
<h1 class="text-hide" style="background-image: url('/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
16. 快速定位类-position
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
17. 设置阴影效果-shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
18. 字体权重与斜体
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
19. 文本修饰
<a href="#" class="text-decoration-none">Non-underlined link</a> # 没有装饰,下划线
