Bootstrap4简单使⽤
Bootstrap 是全球最受欢迎的前端开源⼯具库，⽀持响应式栅格系统，可以根据屏幕⼤⼩⾃动调整布局。
⾃带⼤量组件和众多强⼤的 JavaScript 插件，你只需要使⽤指定的样式类即可快速⽣成相关的组件和样式。
使⽤⽅法
在你的html的head处引⼊相关的样式和js⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">为什么使用bootstrap?
<title>Title</title>
<!-- 新 Bootstrap4 核⼼ CSS ⽂件 -->
<link rel="stylesheet" href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery⽂件。务必在bootstrap.min.js 之前引⼊ -->
<script src="/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js ⽤于弹窗、提⽰、下拉菜单，包含了 popper.min.js -->
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核⼼ JavaScript ⽂件 -->
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
然后在body中添加你需要的组件即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card" >
<img src="img2020blogs/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>
使⽤浏览器打开，效果如下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。