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

中文文档: https://v4.bootcss.com/docs/components/alerts/

使用方法

在你的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中

修改图片链接src地址，如 https://img2020.cnblogs.com/blog/1064540/202009/1064540-20200921092051955-2027037445.jpg
修改后html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</head>
<body>
    <div class="card" style="width: 18rem;">
      <img src="https://img2020.cnblogs.com/blog/1064540/202009/1064540-20200921092051955-2027037445.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
</body>
</html>

使用浏览器打开，效果如下。

版权声明：本文为superhin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/superhin/p/14028019.html