内容布局
标题类
设置标题
用户在浏览网页时最先关注的就是文章的标题，Bootstrap 和普通的 HTML 页面一样，都是使用 <h1> 到 <h6> 标签来定义标题。同时 Bootstrap 还提供了一系列标题类和 display 类来设置标题样式。
<h1> ~ <h6> 标题描述具体如下表所示。
标签
描述
字体大小
计算比例
—级标题
36px
14px × 2.60
二级标题
30px
14px x 2.15
三级标题
24px
14px × 1.70
四级标题
18px
14px x 1.25
五级标题
14px
14px x 1
六级标题
12px
14px × 0.85
上表中，Bootstrap 标题的具体使用和平时的使用方法是一样的，从一级标题到六级标题，数字越大所代表的级别越小，文本也越小。
在Bootstrap中定义了 6 个类名 h1~h6 来让非标题元素实现标题效果，与 <h1> ~ <h6> 不同的是，使用类名 h1 ~ h6 的文本段不会视作 HTML 的标题元素，没有标题的含义。
Bootstrap 还提供了一系列 display 类，也能用来设置标题样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< script src = "/bootstrap/jquery.min.js" ></ script >
< script src = "/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js" ></ script >
</ head >
< body >
< h1 > h1~6 一级标题</ h1 >
< h2 > h1~6 二级标题</ h2 >
< h3 > h1~6 三级标题</ h3 >
< h4 > h1~6 四级标题</ h4 >
< h5 > h1~6 五级标题</ h5 >
< h6 > h1~6 六级标题</ h6 >
< div class = "h1" > class 一级标题</ div >
< div class = "h2" > class 二级标题</ div >
< div class = "h3" > class 三级标题</ div >
< div class = "h4" > class 四级标题</ div >
< div class = "h5" > class 五级标题</ div >
< div class = "h6" > class 六级标题</ div >
< div class = "display-1" > display 一级标题</ div >
< div class = "display-2" > display 二级标题</ div >
< div class = "display-3" > display 三级标题</ div >
< div class = "display-4" > display 四级标题</ div >
</ body >
</ html >
Copy 副标题
在 Web 开发中，我们常常会看到一个标题后面紧跟着一行小的副标题的形式。在 Bootstrap 中也可以实现这种效果，我们可以使用 <small> 标签来实现缩小字体，通常与 .text-muted 样式一起使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< script src = "/bootstrap/jquery.min.js" ></ script >
< script src = "/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js" ></ script >
</ head >
< body >
< h1 > h1~6 一级标题< small > 副标题</ small ></ h1 >
< h2 > h1~6 二级标题< small > 副标题</ small ></ h2 >
< h3 > h1~6 三级标题< small > 副标题</ small ></ h3 >
< h4 > h1~6 四级标题< small class = "text-muted" > 副标题</ small ></ h4 >
< h5 > h1~6 五级标题< small class = "text-muted" > 副标题</ small ></ h5 >
< h6 > h1~6 六级标题< small class = "text-muted" > 副标题</ small ></ h6 >
< div class = "h1" > class 一级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "h2" > class 二级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "h3" > class 三级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "h4" > class 四级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "h5" > class 五级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "h6" > class 六级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "display-1" > display 一级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "display-2" > display 二级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "display-3" > display 三级标题< small class = "text-muted" > 副标题</ small ></ div >
< div class = "display-4" > display 四级标题< small class = "text-muted" > 副标题</ small ></ div >
</ body >
</ html >
Copy 文本类
强化文本
对文本进行强化突显重要内容，以实现风格统一、布局美观的效果，见下表所示。
标签
描述
标签
描述
<b>和<strong>文本加粗
<mark>标记，高亮显示
<del>和<s>删除线
<address>表示地址
<ins>和<u>下划线
<footer>页脚或出处
<em>和<i>斜体
<cite>出处
<blockquote>引用块，长引用
<abbr>缩略语，鼠标悬停在该文本上时显示 title 的属性值
针对上表中的内联元素进行介绍。
<b> 和 <strong> 默认情况下是加粗字体。前者是给其包裹的文本设置为 bold 粗体效果。而后者表示加强字符的语气，使用 bold 粗体来起到强调的作用。<del> 和 <s> 都可以实现删除效果，但是 <del> 更具有语义化，能更形象的描述删除意思。<i> 和 <em> 具有斜体作用，但 <em> 起到强调的作用，有利于 SEO。<ins> 和 <u> 都可以实现下划线效果，前者用来定义已经被插入文档中的文本，而后者表示为文本添加下划线。<footer> 和 <cite> 通常表示所包含的文本对某个参考文献的引用，区别在于后者引用的文本将以斜体显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< b > b文本加粗</ b >
< strong > strong文本加粗</ strong >
< mark > mark标记/高亮显示</ mark >
< del > del删除线</ del >
< s > s删除线</ s >
< address > address地址</ address >
< ins > ins下划线</ ins >
< u > i下划线</ u >
< footer > footer页脚或出处</ footer >
< em > em斜体</ em >
< i > i斜体</ i >
< cite > cite出处</ cite >
< blockquote > blockquote引用块/常引用</ blockquote >
< abbr title = "title" > 鼠标悬停在该文本上时显示 title 的属性值</ abbr >
</ body >
</ html >
Copy 除了使用特定的内联元素外，还可以通过给其他元素添加 .mark、.small、.blockquote 样式来实现同样的样式效果。
.mark：高亮显示
.small：小号字体
.blockquote：引用块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< style >
. blockquote-footer {
margin-top : 10 px ;
}
</ style >
</ head >
< body >
<!--使用.blockquote样式定义引用块-->
< blockquote class = "blockquote" >
< p class = "small" > 朝辞白帝彩云间</ p >
< p > 千里江陵一日还</ p >
< p > 两岸猿声啼不住</ p >
< p class = "mark" > 轻舟已过万重山</ p >
<!--使用.blockquote-footer样式来设置底部备注来源-->
< footer class = "blockquote-footer" > 李白《早发白帝城》</ footer >
</ blockquote >
</ body >
</ html >
Copy 文本颜色
Bootstrap 定义了一套类名，可以为文本设置颜色，见下表所示。
类名
描述
.text-primary
首选文本颜色，重要的文本
.text-secondary
副标题颜色
.text-success
成功文本颜色
.text-muted
柔和颜色
.text-danger
危险提示文本颜色
.text-info
—般提示信息文本颜色
.text-warning
警告信息文本颜色
.text-dark
深灰色文本
.text-body
body 文本颜色
.text-light
浅灰色文本
.text-white
白色文本
.text-black
黑色文本
文本颜色样式的使用细节：
可以使用 .text-* 将文本设置为指定的颜色。
.text-light 和 .text-white 在白色背景下看不清楚，可以设置一个黑色的背景来辅助查看效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< p class = "text-primary" > .text-primary 效果(蓝色)</ p >
< p class = "text-muted" > .text-muted 效果(灰色)</ p >
< p class = "text-success" > .text-success 效果(绿色)</ p >
< p class = "text-info" > .text-info 效果(青色)</ p >
< p class = "text-warning" > .text-warning 效果(黄色)</ p >
< p class = "text-danger" > .text-danger 效果(红色)</ p >
< p class = "text-white" > .text-white 效果(白色)</ p >
< p class = "text-black" > .text-black 效果(黑色)</ p >
</ body >
</ html >
Copy 文本格式
在网页布局中经常会用到文本对齐方式，在 CSS 中常常使用 text-align 属性来设置文本对齐方式。在 Bootstrap 中，为了简化操作，方便开发者使用，Bootstrap 中提供了一系列的文本对齐样式和大小写相关的样式，具体见下表。
类名
描述
.text-left
左对齐，默认由浏览器决定
.text-right
右对齐
.text-center
居中对齐
.text-justify
实现两端对齐文本效果
.text-nowrap
段落中超出屏幕部分不换行
.text-uppercase
设置英文大写
.text-lowercase
设置英文小写
.text-capitalize
设置每个单词首字母大写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< p class = "text-left" > left 左对齐</ p >
< p class = "text-start" > start 左对齐</ p >
< p class = "text-center" > cneter 居中</ p >
< p class = "text-right" > right 右对齐</ p >
< p class = "text-end" > end 右对齐</ p >
< p class = "text-justify" > hello bootstrap hello bootstrap hello bootstrap hello bootstrap hello bootstrap</ p >
< p class = "text-nowrap" > nowrap 不换行 hello bootstrap hello bootstrap hello bootstrap hello bootstrap hello bootstrap</ p >
< p class = "text-uppercase" > uppercase 英文大写 bootstrap</ p >
< p class = "text-lowercase" > lowercase 英文小写 BOOTSTRAP</ p >
< p class = "text-capitalize" > capitalize 首字母大写 bootstrap</ p >
</ body >
</ html >
Copy 列表类
默认列表
在 HTML 文档中提供了 3 种列表结构，分别是有序列表、无序列表和定义列表，这 3 种列表语法结构如下。
无序列表：<ul><li></li></ul>
有序列表：<ol><li></li></ol>
定义列表：<dl><dt><dd></dd></dt></dl>
Bootstrap 对这 3 种列表默认形式进行了细微的改动，以达到风格统一美观的目的。
Bootstrap 中无序列表和有序列表默认是带有项目符号的，但在实际开发中，为了方便使用，列表通常是不需要带有前面编号的。考虑到这种情况，Bootstrap 中提供了 .list-unstyled 样式来对列表进行初始化，这样可以去除默认的列表样式风格。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< ul class = "list-unstyled" >
< li > 1</ li >
< li > 2</ li >
< li > 3</ li >
</ ul >
< ol class = "list-unstyled" >
< li > 1</ li >
< li > 2</ li >
< li > 3</ li >
</ ol >
< dl >
< dt > 1</ dt >
< dt > 2</ dt >
< dt > 3</ dt >
</ dl >
</ body >
</ html >
Copy 内联列表
Bootstrap 中使用 .list-inline 结合 .list-inline-item 样式来实现多列并排列表，也就是说把垂直列表转换成水平列表，并且去掉项目符号，通常使用内联列表来制作水平导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< ul class = "list-inline" >
< li class = "list-inline-item" > 1</ li >
< li class = "list-inline-item" > 2</ li >
< li class = "list-inline-item" > 3</ li >
</ ul >
< ol class = "list-inline" >
< li class = "list-inline-item" > 1</ li >
< li class = "list-inline-item" > 2</ li >
< li class = "list-inline-item" > 3</ li >
</ ol >
< dl class = "list-inline" >
< dt class = "list-inline-item" > 1</ dt >
< dt class = "list-inline-item" > 2</ dt >
< dt class = "list-inline-item" > 3</ dt >
</ dl >
</ body >
</ html >
Copy 定义列表水平显示
在 Bootstrap 中可以使用栅格系统的预定义类来对定义列表内容实现水平对齐效果，对于较长的内容可以使用 .text-truncate 省略溢出部分，并使用 … 省略号来代替。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< style >
body {
text-align : center ;
}
</ style >
</ head >
< body >
< div class = "container" >
< dl class = "row" >
< dt class = "col-4" > 标题</ dt >
< dd class = "col-8 text-truncate" > 标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述标题内容描述</ dd >
< dt class = "col-4" > 标题</ dt >
< dd class = "col-8 text-truncate" > 标题内容描述</ dd >
< dt class = "col-4" > 标题</ dt >
< dd class = "col-8 text-truncate" > 标题内容描述</ dd >
</ dl >
</ div >
</ body >
</ html >
Copy 代码和图文布局
代码样式
Bootstrap 提供了一些内联元素用来控制编程代码的显示风格，常见的代码标签如下表所示。
标签
描述
<code>计算机代码，用来显示单行内联代码
<pre>预格式化文本，保留所有格式，显示多行代码
<kbd>键盘输入文本，显示用户输入代码
<var>定义变量
<samp>程序输出文本
上表中，<code> 常用于单个单词或单行句子的代码；<pre> 常用于多行代码；<kbd> 表示用户要输入的内容。在实际开发中，用户可以根据具体的需求来使用某种类型。需要注意的是，不管使用哪种编程代码风格，都需要手动转义特殊符号。例如，小于号使用 < 代替，大于号使用 > 代替。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< code >
< !DOCTYPE html> < br >
< html lang="en"> < br >
< head> < br >
< meta charset="UTF-8"> < br >
< meta name="viewport" content="width=device-width, initial-scale=1.0"> < br >
< title> Document< /title> < br >
< link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"> < br >
< /head> < br >
</ code >
< p > ------------------------------------------------------------------</ p >
< pre class = "pre-scrollable" style = "height: 100px;" >
< !DOCTYPE html> < br >
< html lang="en"> < br >
< head> < br >
< meta charset="UTF-8"> < br >
< meta name="viewport" content="width=device-width, initial-scale=1.0"> < br >
< title> Document< /title> < br >
< link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"> < br >
< /head> < br >
</ pre >
< p > ------------------------------------------------------------------</ p >
< kbd > ctrl + s</ kbd >
< p > ------------------------------------------------------------------</ p >
< var > number</ var >
< p > ------------------------------------------------------------------</ p >
< samp > 程序输出文本</ samp >
</ body >
</ html >
Copy img-fluid 类
.img-fluid 是 Bootstrap 预定义好的，用来实现图片响应式的类，它给图片设置了 max-width: 100%，height: auto;，在开发中可以实现响应式图片的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< img src = "/vue-study/img/mi4.jpg" alt = "" >
< p ></ p >
< img src = "/vue-study/img/mi4.jpg" alt = "" class = "img-fluid" >
</ body >
</ html >
Copy picture 标签
<picture> 标签是 HTML5 新增的标签元素，可以实现图片的响应式效果。常适用于在固定的区域下使用固定的图片尺寸，例如在大屏幕下使用大尺寸图片，在小屏幕下使用小尺寸图片，这样可以减少流量的使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
</ head >
< body >
< picture >
< source srcset = "/vue-study/img/mi3.webp" media = "(max-width: 1000px)" >
< img src = "/vue-study/img/mi4.jpg" alt = "" class = "img-fluid" >
</ picture >
</ body >
</ html >
Copy 图文布局模式
在网页制作中，通常会使用浮动来设置元素在页面中的显示位置。Bootstrap 中也提供了一系列的样式来设置图片或文字的显示位置，具体内容如下表所示。
类名
描述
.float-left（×）
设置元素左浮动
.float-right（×）
设置元素右浮动
.clearfix
清除浮动
.img-thumbnail
为图片添加边框
.rounded
设置图片为圆角
.mx-auto
设置 x 轴的 margin 为 auto
.d-block
设置图片为块元素
在制作网页时，常常会遇到图片和文字组合显示的效果，Bootstrap 为 <figure> 和 <figcaption> 标签预定义了图文组合样式，可以实现图文组合效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< div class = "text-center" >
< figure class = "figure" >
< img src = "/vue-study/img/film1.webp" alt = "" class = "img-fluid figure-img" >
< figcaption class = "figure-caption" > 电影</ figcaption >
</ figure >
</ div >
</ body >
</ html >
Copy 表格布局
在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap 中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于 <table> 标签的表格样式如下表所示。
类名
描述
.table
基类，也就是表格的基本样式
.table-dark
设置深色表格效果
.table-light/primary/success…
设置表格不同颜色
.table-striped
条纹表格，设置斑马线效果，实现隔行换色
.table-bordered
带边框表格
.table-borderless
无边框表格
.table-hover
鼠标悬停效果，鼠标移动到行或单元格上，表格行变色
.table-sm
紧凑型表格
.table-responsive
响应式表格
table > thead > tr > th
table > tbody > tr > td
上表中，.table 是表格的一个基类，如果想要加其他的样式，都要在 .table 的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持 .table-dark 样式，适用于反转色调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
</ head >
< body >
< table class = "table table-striped text-center table-bordered table-hover table-responsive" >
< thead class = "table-dark" >
< tr >
< th > 000</ th >
< th > 000</ th >
< th > 000</ th >
</ tr >
</ thead >
< tbody class = "table-striped" >
< tr >
< td class = "table-primary" > 111</ td >
< td class = "table-success" > 111</ td >
< td class = "table-danger" > 111</ td >
</ tr >
< tr >
< td > 222</ td >
< td > 222</ td >
< td > 222</ td >
</ tr >
< tr >
< td > 333</ td >
< td > 333</ td >
< td > 333</ td >
</ tr >
< tr >
< td > 444</ td >
< td > 444</ td >
< td > 444</ td >
</ tr >
< tr >
< td > 555</ td >
< td > 555</ td >
< td > 555</ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
Copy 辅助样式
添加或移除边框
Bootstrap 给元素边框设置了 .border 基类，如果想要加其他的样式，都要在 .border 的基础上添加。边框的样式可以组各使用，多个样式之间只需使用空格隔开即可；添加 .border-*-0 类可以取消对应边的边框。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< style >
div {
width : 100 px ;
height : 30 px ;
margin : 20 px auto ;
background-color : #eee ;
}
</ style >
</ head >
< body >
< div class = "border" ></ div >
< div class = "border border-0" ></ div >
< div class = "border border-top-0" ></ div >
</ body >
</ html >
Copy 设置边框颜色
考虑到 Bootstrap 提供的 .border 类默认边框颜色是淡灰色，在实际开发中如果想要修改边框颜色，可以使用 .border-* 来设置想要的场景颜色。
“*” 的取值有：primary、secondary、success、danger、warning、info、light、dark、white。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< style >
div {
width : 100 px ;
height : 30 px ;
margin : 20 px auto ;
background-color : #eee ;
}
. colorful {
border-top : 1 px solid blue ;
border-right : 1 px solid red ;
border-bottom : 1 px solid green ;
border-left : 1 px solid black ;
}
</ style >
</ head >
< body >
< div class = "border" ></ div >
< div class = "border border-primary" ></ div >
< div class = "colorful" ></ div >
</ body >
</ html >
Copy 背景颜色
Bootstrap 中定义了一套类名，用来设置背景色，具体说明见下表。
类名
描述
.bg-primary
重要的背景颜色
.bg-secondary
副标题背景颜色
.bg-success
成功背景颜色
.bg-danger
危险提示背景颜色
.bg-info
一般提示信息背景颜色
.bg-warning
警告信息背景颜色
.bg-dark
深灰色背景
.bg-light
浅灰色背景
.bg-white
白色背景
.bg-transparent
透明背景色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document</ title >
< link rel = "stylesheet" href = "/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" >
< style >
div {
width : 100 px ;
height : 100 px ;
margin : 20 px auto ;
}
</ style >
</ head >
< body >
< div class = "bg-primary" ></ div >
< div class = "bg-success" ></ div >
< div class = "bg-danger" ></ div >
< div class = "bg-info" ></ div >
< div class = "bg-transparent" ></ div >
</ body >
</ html >
Copy
