1、项目搭建

在项目开始之前，先做好准备工作，创建这样的文件目录。

css里面放的是我们的bootstrap.css样式
fonts是我们的字体图标库
images则是我们需要用到的图片。

1.1 下载安装

具体下载通过官网进行下载，比如https://www.bootcss.com/，这是我们的bootstrap官方中文网。

1.2 文件的引入

之后对应什么格式引用什么文件，比如我们这次搭建的产品着陆页只用到了它的css文件，所以我们只需要将bootstrap.min.css引入到我们的头部当中就行。

    <!-- 引入bootstrap文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

也可以通过官网的cdn进行在线引入，但是前提每次都要联网。所以我采用的是本地制作，不过使用cdn较为方便。

//引入bootstrap cdn链接
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

1.3 代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品着陆页</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-icons.css">
    <style>
        .banner {
            width: 100%;
            background: url(./images/home-banner@2x.jpg) no-repeat;
        }

        .logo {
            width: 100px;
        }


        .bg-gray {
            background-color: #f4f4f4;
        }
        .btn1:hover {
            color: #fff !important;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="  p-3 container d-flex align-items-center">
            <img src="./images/logo-white.svg" alt="">
            <div class="ms-auto btn btn-outline-light">登录</div>
            <div class="ms-3 btn btn-outline-light">注册</div>
        </div>
    </div>
    <div class="banner">
        <div class="p-4 container text-center text-light">
            <h1>云端编程，浏览器里边学边练</h1>
            <p class="mt-3 fs-5">软件定义一切，网络连接时空，学习软件技术，创造未来世界</p>
            <button
                class="mb-4 btn btn-outline-light bg-body text-primary mt-3 px-5 btn btn-outline-light">马上学习</button>
        </div>
    </div>
    <div class="bg-gray">
        <div class="contaienr">
            <div class="row px-3 ">
                <div class="col-md-6">
                    <img src="./images/img-lab@2x.png" alt="" class="img-fluid">
                </div>
                <div class="col-md-6 mt-5">
                    <h2 class="mt-5">云端编程实验室</h2>
                    <p class="mt-3 text-muted">每人拥有自己完全独立的编程实验室，内置所有基础软件及学习素材，打开浏览器，即可开始编程！</p>
                    <div class="d-grid d-md-block">
                        <button class="btn btn1 btn-outline-dark px-3 text-muted ">了解详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row align-items-center mt-5 flex-md-row-reverse">
            <div class="col-md-6 d-flex oredr-md-1">
                <img src="./images/img-screens@2x.png" alt="" class="img-fluid">
            </div>
            <div class="col-md-6 order-md-1 mt-5">
                <h2>双屏学习</h2>
                <p class="text-muted">双屏学习，小屏视频互动操作，学习无障碍，打开浏览器，即可开始编程！</p>
                <div class="d-grid d-md-block">
                    <button class="btn btn1 btn-outline-dark px-3 text-dark" ">了解详情</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container mt-5">
        <h2>课程特色</h2>
        <div class="row mt-4 gx-5 mb-3">
            <div class="col-md-4 d-flex align-items-start flex-md-column">
                <i class="bi-bag-check-fill fs-4 bg-black d-inline-block px-3 py-2 text-white rounded mt-3 me-3"></i>
                <div>
                    <h3 class="mt-3">丰富的教学服务</h3>
                    <p class="text-muted">特色教学服务功能，各种配套教学服务，在线学习从未如此轻松。</p>
                    <a href="javascript:;" class="text-muted">马上学习</a>
                </div>
            </div>
            <div class="col-md-4 d-flex align-items-start flex-md-column">
                <i class="bi-bag-check-fill fs-4 bg-black d-inline-block px-3 py-2 text-white rounded mt-3 me-3"></i>
                <div>
                    <h3 class="mt-3">丰富的教学服务</h3>
                    <p class="text-muted">特色教学服务功能，各种配套教学服务，在线学习从未如此轻松。</p>
                    <a href="javascript:;" class="text-muted">马上学习</a>
                </div>
            </div>
            <div class="col-md-4 d-flex align-items-start flex-md-column">
                <i class="bi-bag-check-fill fs-4 bg-black d-inline-block px-3 py-2 text-white rounded mt-3 me-3"></i>
                <div>
                    <h3 class="mt-3">丰富的教学服务</h3>
                    <p class="text-muted">特色教学服务功能，各种配套教学服务，在线学习从未如此轻松。</p>
                    <a href="javascript:;" class="text-muted">马上学习</a>
                </div>
            </div>
        </div>
    </div>
    <footer class="bg-gray text-center py-5">
        &copy;2021 前沿科技Artech All rights reserved
    </footer>
</body>

</html>