一.Bootstrap简介
1.什么是Bootstrap
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。
2.Bootstrap的来源
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
3.Bootstrap优点
利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
4.Bootstrap的发展历程
目前使用较广的是版本2、3和4。
其中：
2的最新版本的是2.3.2，
3的最新版本是3.4.1，
4的最新版本是4.4.1
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。
5.Bootstrap主要变化包括
- 从 Less 迁移到 Sass
- 改进网格系统
- 缺省弹性框支持
- Dropped wells, thumbnails, and panels for cards
- 合并所有 HTML resets 到一个新的模块中：Reboot
- 全新自定义选项
- 不再支持 IE8
- 重写所有的 JavaScript 插件
- 改进工具提示和 popovers 的自动定位
- 改进文档
- 其他大量改进
6. Bootstrap包含内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
- CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
- JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
- 定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
7. Bootstrap支持的组件和插件
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象......
Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：
模式对话框、标签页、滚动条、弹出框......
二.Bootstrap4 安装使用
我们可以通过以下两种方式来安装 Bootstrap4。
1.使用 Bootstrap 4 CDN。
CDN的全称是Content Delivery Network，即内容分发网络。
国内推荐使用 Staticfile CDN 的格式：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>还可以使用以下的 CDN 服务：
国内推荐使用 : https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/
2.从官网 getbootstrap.com 下载 Bootstrap 4。
你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。
此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装。
三.创建一个 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 标签，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
</html>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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>HTML标题</title>
</head>
<body>
<div class="container">
<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
<h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>
<div class="container-fluid">
<h1>h1 HTML标题</h1>
<h2>h2 HTML标题</h2>
<h3>h3 HTML标题</h3>
<h4>h4 HTML标题</h4>
<h5>h5 HTML标题</h5>
<h6>h6 HTML标题</h6>
</div>
</body>
</html>
四.Bootstrap4 网格
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
自动重新排列。
1.网格类
Bootstrap 4 网格系统有:
.col | 针对所有设备 |
.col-sm | 平板 - 屏幕宽度等于或大于 576px |
.col-md | 桌面显示器 - 屏幕宽度等于或大于 768px |
.col-lg | 大桌面显示器 - 屏幕宽度等于或大于 992px |
.col-xl | 超大桌面显示器 - 屏幕宽度等于或大于 1200px |
2.网格系统规则
Bootstrap4 网格系统规则:
- 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
- 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
- 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
- Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
下表总结了 Bootstrap 网格系统如何在不同设备上工作的：
3.Bootstrap 4 网格的基本结构
Bootstrap 4 网格的基本结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>网格系统</title>
</head>
<body class="container-fluid text-center">
<div class="row">
<div class="col-1 bg-warning">1</div><div class="col-1 bg-danger">1</div><div class="col-1 bg-dark">1</div><div class="col-1 bg-info">1</div>
<div class="col-1 bg-secondary">1</div><div class="col-1 bg-danger">1</div><div class="col-1 bg-success">1</div><div class="col-1 bg-light">1</div>
<div class="col-1 bg-secondary">1</div><div class="col-1 bg-white">1</div><div class="col-1 bg-secondary">1</div><div class="col-1 bg-primary">1</div>
</div>
<div class="row">
<div class="col-4 bg-warning">4</div><div class="col-4 bg-transparent">4</div><div class="col-4 bg-primary">4</div>
</div>
<div class="row">
<div class="col-4 bg-warning">4</div><div class="col-8 bg-danger">8</div>
</div>
<div class="row">
<div class="col-6 bg-warning">6</div><div class="col-6 bg-info">6</div>
</div>
<div class="row">
<div class="col-12 bg-warning">12</div>
</div>
</body>
</html>
五.Bootstrap4 文字排版
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)
1.Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .
display-1, .display-2, .display-3, .display-4。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>bootstrap4标题</title>
</head>
<body>
<div class="container">
<p class="display-1">你好！</p>
<p class="display-2">你好！</p>
<p class="display-3">你好！</p>
<p class="display-4">你好！</p>
</div>
<div class="container-fluid">
<p class="display-1">你好！</p>
<p class="display-2">你好！</p>
<p class="display-3">你好！</p>
<p class="display-4">你好！</p>
</div>
</body>
</html>
2. 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 | 设定单词首字母大写 |
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>排版类</title>
</head>
<body>
<div class="container">
<p class="font-weight-normal">hello 你好！</p>
<p class="font-weight-bold">hello 你好！</p>
<p class="font-weight-light">hello 你好！</p>
<p class="font-italic">hello 你好！</p>
<p class="lead">hello 你好！</p>
<p class="small">hello 你好！</p>
<p class="text-left">hello 你好！</p>
<p class="text-right">hello 你好！</p>
<p class="text-center">hello 你好！</p>
<p class="text-lowercase">hello 你好！</p>
<p class="text-uppercase">hello 你好！</p>
<p class="text-capitalize">hello 你好！</p>
</div>
</body>
</html>
3.<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>显示在文本底部的一条虚线边框</title>
</head>
<body>
<p>我<abbr title="因爱生恨"><mark>恨</mark></abbr>你</p>
</body>
</html>
当你鼠标放到<abbr>文本下他会显示出litle属性输出的值。
六.Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类：字体颜色类和背景颜色类。
1.字体颜色类：
.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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>字体颜色</title>
</head>
<body class="container-fluid">
<a href="#" class="text-muted">柔和的链接。</a><br>
<a href="#" class="text-primary">主要链接。</a><br>
<a href="#" class="text-success">成功链接。</a><br>
<a href="#" class="text-info">信息文本链接。</a><br>
<a href="#" class="text-warning">警告链接。</a><br>
<a href="#" class="text-danger">危险链接。</a><br>
<a href="#" class="text-light">浅灰色链接。</a><br>
<a href="#" class="text-secondary">副标题链接。</a><br>
<a href="#" class="text-dark">深灰色链接。</a>
</body>
</html>
颜色可以再链接上使用。
2.背景颜色类：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>背景颜色</title>
</head>
<body class="container-fluid">
<p class="bg-danger">测试背景颜色</p>
<p class="bg-muted">测试背景颜色</p>
<p class="bg-primary">测试背景颜色</p>
<p class="bg-success">测试背景颜色</p>
<p class="bg-info">测试背景颜色</p>
<p class="bg-warning">测试背景颜色</p>
<p class="bg-light">测试背景颜色</p>
<p class="bg-secondary">测试背景颜色</p>
<p class="bg-dark">测试背景颜色</p>
</body>
</html>
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
3.背影颜色和字体颜色结合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>颜色</title>
</head>
<body>
<div class="container-fluid">
<p class="font-weight-normal text-muted bg-danger">hello 你好！</p>
<p class="font-weight-bold text-primary bg-muted">hello 你好！</p>
<p class="font-weight-light text-success bg-primary">hello 你好！</p>
<p class="font-italic text-info bg-success">hello 你好！</p>
<p class="lead text-warning bg-info">hello 你好！</p>
<p class="small text-danger bg-warning">hello 你好！</p>
<p class="text-left text-secondary bg-danger">hello 你好！</p>
<p class="text-right text-white bg-secondary">hello 你好！</p>
<p class="text-center text-muted bg-light">hello 你好！</p>
<p class="text-lowercase text-warning bg-white">hello 你好！</p>
<p class="text-uppercase text-muted bg-dark">hello 你好！</p>
<p class="text-capitalize text-light bg-danger">hello 你好！</p>
</div>
</body>
</html>
七.Bootstrap4 表格
表格的使用方法：
类名 | 作用 |
.table | 设置基础表格的样式 |
.table-striped | 在 <tbody> 内的行上看到条纹 |
.table-bordered | 为表格添加边框 |
.table-hover | 为表格的每一行添加鼠标悬停效果（灰色背景） |
bg-* | 为表格的行或者单元格设置颜色 |
结合实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>表格</title>
</head>
<body>
<table class="container-fluid text-center table-striped table-bordered">
<tr>
<td colspan="7">XX公司人员信息统计表</td>
</tr>
<tr>
<td class="bg-info">序号</td>
<td>姓名</td>
<td>性别</td>
<td>名族</td>
<td>身份证号后四位</td>
<td>年龄</td>
<td>备注</td>
</tr>
<tr>
<td class="bg-info">1</td>
<td>张三</td>
<td>男</td>
<td>汉族</td>
<td align="center">6269</td>
<td>40</td>
<td></td>
</tr>
<tr>
<td class="bg-info">2</td>
<td>李四</td>
<td>女</td>
<td>汉族</td>
<td align="center">0003</td>
<td>49</td>
<td></td>
</tr>
<tr>
<td class="bg-info">3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
八.Bootstrap4 图像形状
类名 | 用法 |
.rounded | 显示圆角效果 |
.rounded-circle | 椭圆形图片 |
.img-thumbnail | 图片缩略图(图片有边框): |
.float-right | 图片右对齐 |
.float-left | 图片左对齐 |
1.圆形与椭圆形
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>图像</title>
</head>
<body class="container">
<img style="border:3px solid #6F42C1;" src="img/avatar.png" class="rounded">
<img style="border:3px solid #6F42C1;" src="img/avatar2.png" class="rounded-circle">
<img style="border:3px solid #6F42C1;" src="img/avatar3.png" class="img-thumbnail ">
</body>
</html>
2. 左右对齐方式
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>图像</title>
</head>
<body class="container">
<img style="border:3px solid #6F42C1;" src="img/avatar5.png" class="img-thumbnail float-right">
<img style="border:3px solid #6F42C1;" src="img/avatar4.png" class="rounded-circle img-thumbnail">
<img style="border:3px solid #6F42C1;" src="img/avatar.png" class="rounded float-left">
</body>
</html>
自己做会看出效果，你会发现中间写的代码他的图片没动，但是前后两个颠倒了。
3.响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; height: auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>图像</title>
</head>
<body class="container">
<img style="border:3px solid #6F42C1;" src="img/2048374.jpg" class="rounded img-fluid">
</body>
</html>出来的图片会随着你页面的大小而改动。
九.Bootstrap4 信息提示框
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
1.提示框链接
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
综合实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>提示框</title>
</head>
<body class="container-fluid">
<p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
<div class="alert alert-success">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info">
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning">
<strong>警告!</strong> 设置警告信息。
</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>
<div class="alert alert-dark">
<strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light">
<strong>浅灰色!</strong>浅灰色提示框。
</div>
</body>
</html>
2.关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<!-- 用于弹窗、提示、下拉菜单，包含了 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。 -->
<title>提示框</title>
</head>
<body class="container">
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>关闭提示框</p>
</div>
</body>
</html>
3.提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
因涉及到时间在此看不效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
