一、Bootstrap简介
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
Sass–CSS扩展语言
Mixin—包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。
例如;
二、Bootstrap安装使用
我们可以通过以下两种方式来安装 Bootstrap4。
- 使用 Bootstrap 4 CDN。
CDN的全称是Content Delivery Network，即内容分发网络.
国内推荐使用 Staticfile CDN 上的库：
<!– 新 Bootstrap4 核心 CSS 文件 –>
<link rel=”stylesheet” href=”https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css”>
<!– jQuery文件。务必在bootstrap.min.js 之前引入 –>
<script src=”https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js”></script>
<!– bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js –>
<script src=”https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js”></script>
<!– 最新的 Bootstrap4 核心 JavaScript 文件 –>
<script src=”https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js”></script>
注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。
此外，你还可以使用以下的 CDN 服务：
国内推荐使用 : Staticfile CDN
国际推荐使用：cdnjs – The #1 free and open source CDN built to make life easier for developers
- 从官网 getbootstrap.com 下载 Bootstrap 4。
你可以去官网 Bootstrap · The most popular HTML, CSS, and JS library in the world. 下载 Bootstrap4 资源库。
此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装：
npm install bootstrap@4.0.0-beta.2
gem ‘bootstrap’, ‘~> 4.0.0.beta2’
composer require twbs/bootstrap:4.0.0-beta.2
三、创建第一个Bootstrap 4页面
1.添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
</head>
</html>
2.移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
3.容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个bootstrap页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h5>width=device-width表示宽度的设备屏幕宽度</h5>
<h5>initial-scale=1表示初始的缩放比例</h5>
<h5>shrink-to-fit 自动适应手机屏幕的宽度</h5>
<h5>class="container"表示固定宽度并支持响应式布局的容器</h5>
<h5>class="container-fluid"表示用于100%宽度，占据全视口的容器</h5>
</body>
</html>
四、Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 – 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 – 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 – 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 – 屏幕宽度等于或大于 1200px
网格系统规则
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
2、使用行来创建水平的列组。
3、内容需要放置在列中，并且只有列可以是行的直接子节点。
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
6、网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
下表总结了 Bootstrap 网格系统如何在不同设备上工作的：
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 网格</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap 4 网格系统有以下 5 个类:</h4>
<h5>
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px <br>
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px<br>
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px<br>
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
</h5>
<div class="row">
<div class="col-md-2 bg-success">2</div>
<div class="col-md-2" style="background-color: rgb(46, 231, 93);">2</div>
<div class="col-md-2" style="background-color: rgb(94, 8, 253);">2</div>
<div class="col-md-2" style="background-color: rgb(248, 11, 110);">2</div>
<div class="col-md-2" style="background-color: rgb(23, 34, 34);">2</div>
<div class="col-md-2" style="background-color: rgb(255, 230, 0);">2</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color: aqua;">4</div>
<div class="col-md-4" style="background-color: rgb(46, 231, 93);">4</div>
<div class="col-md-4" style="background-color: rgb(94, 8, 253);">4</div>
</div>
</body>
</html>
五、Bootstrap 4 网格的基本结构
以下代码为 Bootstrap 4 网格的基本结构:
<!– 第一个例子：控制列的宽度及在不同的设备上如何显示 –>
<div class=”row”>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<!– 第二个例子：或让 Bootstrap 者自动处理布局 –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
第一个例子：创建一行(<div class=”row”>)。然后， 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 “col”每个就为 33.33% 的宽度，四个 “col”每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 网格</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。</h4>
<h4>Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。</h4>
<h4>Bootstrap 4 网格系统有以下 5 个类:</h4>
<h5>
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px <br>
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px<br>
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px<br>
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
</h5>
<h4>
1.需要设置html网页的容器类<br>
2.通过class="row"表示一行<br>
3.在表示行的元素中添加col-*-*，第一个*响应设备空,sm,md,lg,xl,第一个*所占列数，相加不能超过12<br>
4.在表示行的元素中添加offset*-*，第一个*响应设备空,sm,md,lg,xl,第一个*偏移列数，只能从左向右，范围是从 1 到 11<br>
</h4>
<div class="row">
<div class="col-md-2 bg-success">2</div>
<div class="col-md-2" style="background-color: rgb(46, 231, 93);">2</div>
<div class="col-md-2" style="background-color: rgb(94, 8, 253);">2</div>
<div class="col-md-2" style="background-color: rgb(248, 11, 110);">2</div>
<div class="col-md-2" style="background-color: rgb(23, 34, 34);">2</div>
<div class="col-md-2" style="background-color: rgb(255, 230, 0);">2</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color: aqua;">4</div>
<div class="col-md-4" style="background-color: rgb(46, 231, 93);">4</div>
<div class="col-md-4" style="background-color: rgb(94, 8, 253);">4</div>
</div>
<div class="row">
<div class="col-md-8 offset-sm-2" style="background-color: aqua;">8</div>
</div>
</body>
</html>
六、Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> – <h6>
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类
例如：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字排版</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
<h4>4 Bootstrap 标题 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标题 (1rem = 16px)</h6><br>
<h1>display标题</h1>
<h1 class="display-1">Display 1</h1>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<h1>small 元素用于创建字号更小的颜色更浅的文本</h1>
<h2>标题 <small>副标题</small></h2>
<h1>Mark 定义黄色背景有一定的内边距 高亮文本</h1>
<h2>使用Mark标记 <mark>高亮</mark>文本</h2>
<h1>abbr 元素的样式为显示在文本底部的一条虚线边框</h1>
<h2>文本<abbr title="World Health Organization">底部</abbr></h2>
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF
works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million
globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
<h1>dlootstrap 4 定义 HTML dl 元素的样式如下</h1>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<h1>可以将一些代码元素放到 code 元素里面:</h1>>
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
<h1>Bootstrap 4 定义 HTML kbd 元素的样式如下</h1>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<h1>Bootstrap 4 定义 HTML <pre> 元素的样式如下</h1>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</body>
</html>
下表提供了 Bootstrap4 更多排版类的实例：
类名
描述
.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轴出现滚动条
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 排版类实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
<p class="font-weight-bold">加粗文本</p>
<p class="font-weight-normal">普通文本</p>
<p class="small">指定更小的文字</p>
<p class="font-weight-light">更细的文本</p>
<p class="font-italic">斜体文本</p>
<p class="lead">让段落更突出</p>
<p class="text-justify" style="width: 80px;">设定文本对齐,段落中超出屏幕部分文字自动换行</p>
<p class="text-lowercase">设定文本小写,text lowercase</p>
<p class="text-uppercase">设定文本大写,text uppercase</p>
<p class="text-capitalize">设定单词首字母大写，text capitalize</p>
</body>
</html>
七、Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类：
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 颜色</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 颜色</h4>
<h5>字体颜色.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light</h5>
<h5>背景颜色.bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark and .bg-light</h5>
<h6 class="text-muted bg-success">测试字体颜色和背景颜色</h6>
<h6 class="text-primary bg-dark">测试字体颜色和背景颜色</h6>
<h6 class="text-success bg-light">测试字体颜色和背景颜色</h6>
<h6 class="text-info bg-secondary">测试字体颜色和背景颜色</h6>
</body>
</html>
八、 Bootstrap4 表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 表格</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 表格</h4>
<p>.table 类来设置基础表格的样式:</p>
<p>.table-striped类来设置条纹表格</p>
<p>.table-bordered 类可以为表格添加边框</p>
<p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）</p>
<p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色：<br>
table-muted, .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-secondary, .table-white, .table-dark and .table-light</p>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="table-primary">
<th>name</th>
<th>age</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>18</td>
<td class="table-warning">john@example.com</td>
</tr>
<tr>
<td>fxt</td>
<td>22</td>
<td>fxt@example.com</td>
</tr>
<tr>
<td>ch</td>
<td>22</td>
<td>ch@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>
九、Bootstrap4 图像形状
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 图像图形</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 图像形状</h4>
<p>.rounded 类可以让图片显示圆角效果</p>
<p>.rounded-circle 类可以设置椭圆形图片</p>
<p>.img-thumbnail 类用于设置图片缩略图(图片有边框)</p>
<p>响应式图片</p>
<h5>圆角图片</h5>
<img src="../../imgs/2048376.jpg" width="300px" class="rounded">
<h5>椭圆图片</h5>
<img src="../../imgs/2048376.jpg" width="300px" class="rounded-circle">
<h5>图片缩略图</h5>
<img src="../../imgs/2048376.jpg" width="300px" class="img-thumbnail">
<h5>响应式图片</h5>
<img src="../../imgs/2048376.jpg" class="img-fluid">
</body>
</html>
十、Bootstrap4 信息提示框
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 信息提示框</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 信息提示框</h4>
<p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
<p>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接</p>
<p>关闭提示框:<br>
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作将按钮和提示框绑定
</p>
<p>提示框动画<br>
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果</p>
<div class="alert alert-success show fade" style="width: 260px;">
<button type="button" class="close" data-dismiss="alert" >×</button>
<strong>成功！</strong>制定操作信息提示。
</div>
<div class="alert alert-info">
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning">
<strong>警告!</strong> 请注意这个<a href="#" class="alert-link">警告信息</a>。
</div>
<div class="alert alert-danger">
<strong>错误!</strong> 失败的操作
</div>
<div class="alert alert-primary">
<strong>首选!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
<strong>次要的!</strong> 显示一些不重要的信息。
</div>
</body>
</html>
十一、Bootstrap4 按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 按钮</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 按钮</h4>
<p>.btn按钮类可用于 a, button, 或 input 元素上</p>
<a href="#" class="btn btn-info">链接按钮</a>
<button type="button" class="btn btn-warning">按钮</button>
<input type="button" class="btn btn-primary" value="输入框按钮">
<p>.btn-outline-颜色，按钮设置边框颜色同时鼠标划入时显示与边框相同的颜色</p>
<p>.btn-lg/btn-sm 不同大小的按钮</p>
<p>.active/.disabled 激活和禁用的按钮</p>
<button type="button" class="btn btn-outline-primary active">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success disabled">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning btn-lg">警告</button>
<button type="button" class="btn btn-outline-danger btn-sm">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
</body>
</html>
十二、Bootstrap4 按钮组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 按钮组</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 按钮组</h4>
<p>可以在 div元素上添加 .btn-group 类来创建按钮组</p>
<p> .btn-group-lg|sm 类来设置按钮组的大小</p>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-info">苹果</button>
<button type="button" class="btn btn-primary" style="margin-left: 10px;">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-warning dropdown-toggle" data-toggle="dropdown" style="margin-left: 10px;">索尼</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">1</a>
<a href="#" class="dropdown-item">2</a>
</div>
</div>
</div>
<p> .btn-group-vertical 类来创建垂直的按钮组</p>
<p>垂直按钮组及下拉菜单 给要加的按钮所在的div元素设置btn-group类，给按钮设置btn类同时添加dropdown-toggle类，
再将菜单和此时的按钮绑定，在按钮里添加data-toggle="dropdown"</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-info">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">索尼</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">索尼X</a>
<a href="#" class="dropdown-item">索尼XS</a>
</div>
</div>
</div>
</body>
</html>
十三、Bootstrap4 徽章（Badges）
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 徽章</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4> Bootstrap4 徽章</h4>
<p>如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到元素上即可</p>
<p>各种颜色类型的徽章：<br>
badge-muted, .badge-primary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-secondary, .badge-white, .badge-dark and .badge-light
</p>
<h5>主要<span class="badge badge-info">(2)</span></h5>
<p>使用 .badge-pill 类来设置药丸形状徽章</p>
<h5>徽章<span class="badge badge-pill badge-success">(3)</span></h5>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79869.html
