Bootstrap入门

---

简介

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中文文档