Bootstrap 是全球最受欢迎的前端开源工具库，支持响应式栅格系统，可以根据屏幕大小自动调整布局。
自带大量组件和众多强大的 JavaScript 插件，你只需要使用指定的样式类即可快速生成相关的组件和样式。

中文文档: https://v4.bootcss.com/docs/components/alerts/
Bootstrap4简单使用_IT业界

使用方法

在你的html的head处引入相关的样式和js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 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>
</head>
<body>

</body>
</html>

然后在body中添加你需要的组件即可

如添加一个卡片，拷贝官网代码到body中
Bootstrap4简单使用_IT业界_02
修改图片链接src地址
修改后html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href='javascript:void(0)'>

使用浏览器打开，效果如下。
Bootstrap4简单使用_IT业界_03