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">
©2021 前沿科技Artech All rights reserved
</footer>
</body>
</html>
2、 页面效果
因为截图的原因，文字较为模糊。
2.1 pc端效果图：
2.2 移动端效果图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/144071.html
