利用Bootstrap制作产品着陆页（响应式布局）

原创

已于 2023-04-21 15:29:06 修改 · 2.4k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

于 2023-04-06 22:27:25 首次发布

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/[email protected]/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;