简介
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
官网下载链接:下载 Bootstrap
Popper文件下载地址(打开直接另存为即可):Popper文件保存页
引用
注意:下载最新版本的小伙伴可以免去引用jQuery的步骤,建议引用popper文件,引用顺序也需要注意!!!!
<!-- 引用poppor文件 找到文件储存位置引用即可 -->
<script src="./dist/popper.min.js"></script>
<!-- 引用css文件 找到文件储存位置引用即可 -->
<link rel="stylesheet" href="./dist/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
<!-- 引用js文件 找到文件储存位置引用即可 -->
<script src="./dist/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
应用举例
grid格栅布局:
<!-- 格栅布局 -->
<div class="container">
<div class="row">
<div class="col">1/4</div>
<div class="col-6">1/2</div>
<div class="col">1/4</div>
</div>
<div class="row">
<div class="col">1/3</div>
<div class="col">1/3</div>
<div class="col">1/3</div>
</div>
<div class="row">
<div class="col">1/4</div>
<div class="col-9">3/4</div>
</div>
<div class="row">
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
<div class="col">1/12</div>
</div>
</div>
按钮:
<button class="btn">基本按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">消息按钮</button>
<button class="btn btn-warning">危险按钮</button>
<button class="btn btn-dark">深色按钮</button>
<button class="btn btn-light">浅色按钮</button>
<button class="btn btn-link">链接按钮</button>
按钮组:
<div class="btn-group btn-group-lg mt-5">
<button class="btn btn-primary">大号按钮</button>
<button class="btn btn-secondary">大号按钮</button>
<button class="btn btn-success">大号按钮</button>
</div>
<div class="btn-group mt-5">
<button class="btn btn-primary">默认按钮</button>
<button class="btn btn-secondary">默认按钮</button>
<button class="btn btn-success">默认按钮</button>
</div>
<div class="btn-group btn-group-sm mt-5">
<button class="btn btn-primary">小号按钮</button>
<button class="btn btn-secondary">小号按钮</button>
<button class="btn btn-success">小号按钮</button>
</div>
上面简单举例,具体使用方法请参考: Bootstrap中文文档