第七章 Bootstrap 常用布局样式

内容布局

标题类

设置标题

用户在浏览网页时最先关注的就是文章的标题，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>

副标题

在 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>

文本类

强化文本

对文本进行强化突显重要内容，以实现风格统一、布局美观的效果，见下表所示。

标签	描述	标签	描述
`<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>

除了使用特定的内联元素外，还可以通过给其他元素添加 .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: 10px;
        }
    </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>

文本颜色

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>

文本格式

在网页布局中经常会用到文本对齐方式，在 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>

列表类

默认列表

在 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>

内联列表

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>

定义列表水平显示

在 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>

代码和图文布局

代码样式

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>
        &lt;!DOCTYPE html&gt;<br>
        &lt;html lang="en"&gt;<br>
        &lt;head&gt;<br>
            &lt;meta charset="UTF-8"&gt;<br>
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
            &lt;title&gt;Document&lt;/title&gt;<br>
            &lt;link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"&gt;<br>
        &lt;/head&gt;<br>
    </code>
    <p>------------------------------------------------------------------</p>
    <pre class="pre-scrollable" style="height: 100px;">
        &lt;!DOCTYPE html&gt;<br>
        &lt;html lang="en"&gt;<br>
        &lt;head&gt;<br>
            &lt;meta charset="UTF-8"&gt;<br>
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
            &lt;title&gt;Document&lt;/title&gt;<br>
            &lt;link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"&gt;<br>
        &lt;/head&gt;<br>
    </pre>
    <p>------------------------------------------------------------------</p>
    <kbd>ctrl + s</kbd>
    <p>------------------------------------------------------------------</p>
    <var>number</var>
    <p>------------------------------------------------------------------</p>
    <samp>程序输出文本</samp>
</body>
</html>

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>

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>

图文布局模式

在网页制作中，通常会使用浮动来设置元素在页面中的显示位置。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>

表格布局

在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。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>

辅助样式

添加或移除边框

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: 100px;
            height: 30px;
            margin: 20px 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>

设置边框颜色

考虑到 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: 100px;
            height: 30px;
            margin: 20px auto;
            background-color: #eee;
        }
        .colorful{
            border-top: 1px solid blue;
            border-right: 1px solid red;
            border-bottom: 1px solid green;
            border-left: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="border"></div>
    <div class="border border-primary"></div>
    <div class="colorful"></div>
</body>
</html>

背景颜色

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: 100px;
            height: 100px;
            margin: 20px 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>