Bootstrap4简单使用
Bootstrap 是全球最受欢迎的前端开源工具库，支持响应式栅格系统，可以根据屏幕大小自动调整布局。
自带大量组件和众多强大的 JavaScript 插件，你只需要使用指定的样式类即可快速生成相关的组件和样式。
使用方法
在你的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 版权协议，转载请附上原文出处链接和本声明。