利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)

目录

  • 1、项目搭建
    • 1.1 下载安装
    • 1.2 文件的引入
    • 1.3 结构搭建
    • 1.4 代码示例
  • 2、 页面效果
    • 2.1 pc端效果图:
    • 2.2 平板端效果图:
    • 2.3 移动端效果图

1、项目搭建

在项目开始之前,先做好准备工作,创建这样的文件目录。
利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)_第1张图片
css里面放的是我们的bootstrap.css样式
fonts是我们的字体图标库
images则是我们在官网上拿来的一些图片。

1.1 下载安装

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

1.2 文件的引入

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

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

也可以通过官网的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 结构搭建

利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)_第2张图片

1.4 代码示例

<!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>Bootstrap中文网</title>
    <!-- 引入bootstrap文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 引入自己的样式 -->
    <link rel="stylesheet" href="./css/project2.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<style>
        .bgs {
            background-color: #7729f7;
        }

        .peicon {
            position: relative;
            right: 1px;
            top: 0;
        }

        .bgs1 {
            background-image: linear-gradient(#712cf9, rgba(113, 44, 249, .95));
        }

        .hovers:hover a {
            background-color: #0060d6;
            color: white;
            transition: all .4s;
        }

        .positions {
            position: relative;
            top: -80px;
        }

        .bgs a {
            text-decoration: none;
            color: white;
        }

        .bgs a:hover {
            color: #ccc;
        }

        footer a {
            text-decoration: none;
            color: white;
            opacity: 0.5;
            transition: all .3;

        }

        footer a:hover {
            color: #0067f8;
        }
    </style>
<body>
    <!-- header头部区域开始 -->
    <header class="bgs ">
        <div class="container">
            <div class="row py-3 text-white">
                <div class="col-xl-8 col-11 ">
                    <span class="iconfont icon-bootstrap" style="font-size: 2rem; vertical-align: middle;"></span>
                    Bootstrp中文网
                </div>
                <div class="col-xl-2 d-none d-xl-block pt-2">
                    <a href="javascript:;">bootstrap中文文档<span class="iconfont icon-xialajiantouxiao ps-2"></span></a>
                </div>
                <div class="col-xl-1 d-none d-xl-block pt-2"><a href="javascript:;">网站实例</a></div>
                <div class="col-xl-1 d-none d-xl-block pt-2"><a href="javascript:;">精选模板</a></div>
                <div class="d-gl-block d-xl-none col-1 pt-2">
                    <span class="iconfont icon-sangang peicon"></span>
                </div>
            </div>
        </div>
    </header>
    <!-- header头部区域结束 -->
    <!-- 主体部分开始 -->
    <main class="bgs py-5">
        <div class="container">
            <div class="row text-center p-3">
                <h1 class="text-white " style="font-size: 4rem;">Bootstrap</h1>
                <div class="lead text-white-50 mb-5 pb-4">简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</div>
            </div>
        </div>
    </main>
    <main>
        <div class="container positions shadow ">
            <div class="row bg-white">
                <div class="col-md-4 text-center px-4 py-5 border-end border rounded-2">
                    <span class="iconfont icon-wendang " style="font-size: 40px; color: #0067f8;"></span>
                    <h4>中文文档</h4>
                    <div class="text-muted"> Bootstrap 各版本中文文档、中文手册。</div>
                    <p class="text-muted">日常开发必备工具。</p>
                    <span><a href="javascript:;" class="btn btn-primary rounded-5">v3文档</a></span>
                    <span class="hovers"><a href="javascript:;" class="btn  rounded-5 border-primary">v4文档</a></span>
                    <span class="hovers"><a href="javascript:;" class="btn rounded-5 border-primary ">v5文档</a></span>
                </div>
                <div class="col-md-4 text-center px-4 py-5 border-end border rounded-2">
                    <span class="iconfont icon-yingpingmoban " style="font-size: 40px; color: #0067f8;"></span>
                    <h4>精选模板</h4>
                    <div class="text-muted">精选开源、免费的Bootstrap模板,</div>
                    <p class="text-muted">助你创建漂亮的网站。</p>
                    <span><a href="javascript:;" class="btn btn-primary rounded-5">立即进入</a></span>
                </div>
                <div class="col-md-4 text-center px-4 py-5 border-end border rounded-2">
                    <span class="iconfont icon-he_84shiliguanli " style="font-size: 40px; color: #0067f8;"></span>
                    <h4>网站实例</h4>
                    <div class="text-muted"> 这里收集了大量漂亮、有创意的、</div>
                    <p class="text-muted">基于Bootstrap构建的网站</p>
                    <span><a href="javascript:;" class="btn btn-primary rounded-5">立即进入</a></span>
                </div>
            </div>
        </div>
    </main>
    <!-- 主体部分结束 -->
    <!-- 相关优质项目推荐开始 -->
    <main class="">
        <div class="container">
            <div class="row text-center mt-3">
                <h3>Bootstrap相关优质项目推荐</h3>
                <p class="text-muted">这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
            </div>
            <!-- 下面图片区域 -->
            <div class="row gy-5 mt-3 text-center" style="position: relative; top: -20px;">
                <div class="col-md-3 ">
                    <img src="./images/1.png" alt=""  class="border p-1 img-fluid">
                    <div class="border border-top-0 p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美的、有创意的网站.</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/2.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3">
                        <h5 class="pt-3 pb-2">React</h5>
                        <p class="text-muted">React起源于Facebook的内部项目,是一个用于构建用户界面的JavaScript 库。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/3.png" alt="" class="border p-1 img-fluid ">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">Webpack</h5>
                        <p class="text-muted">Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/4.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">TypeScript 是由微软开源的编程语言。它是 JavaScript的一个超集,而且本质上向这个语言。</p>
                    </div>
                </div>
            </div>
            <div class="row gy-5 mt-3 text-center" style="position: relative; top: -20px;">
                <div class="col-md-3 ">
                    <img src="./images/1.png" alt=""  class="border p-1 img-fluid">
                    <div class="border border-top-0 p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美的、有创意的网站.</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/2.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3">
                        <h5 class="pt-3 pb-2">React</h5>
                        <p class="text-muted">React起源于Facebook的内部项目,是一个用于构建用户界面的JavaScript 库。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/3.png" alt="" class="border p-1 img-fluid ">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">Webpack</h5>
                        <p class="text-muted">Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/4.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">TypeScript 是由微软开源的编程语言。它是 JavaScript的一个超集,而且本质上向这个语言。</p>
                    </div>
                </div>
            </div>
            <div class="row gy-5 mt-3 text-center" style="position: relative; top: -20px;">
                <div class="col-md-3 ">
                    <img src="./images/1.png" alt=""  class="border p-1 img-fluid">
                    <div class="border border-top-0 p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美的、有创意的网站.</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/2.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3">
                        <h5 class="pt-3 pb-2">React</h5>
                        <p class="text-muted">React起源于Facebook的内部项目,是一个用于构建用户界面的JavaScript 库。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/3.png" alt="" class="border p-1 img-fluid ">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">Webpack</h5>
                        <p class="text-muted">Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块。</p>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <img src="./images/4.png" alt="" class="border p-1 img-fluid">
                    <div class="border border-top-0  p-3 ">
                        <h5 class="pt-3 pb-2">优站精选</h5>
                        <p class="text-muted">TypeScript 是由微软开源的编程语言。它是 JavaScript的一个超集,而且本质上向这个语言。</p>
                    </div>
                </div>
            </div>
           
            <!-- 下面图片区域 -->

    </main>
    <!-- 相关优质项目推荐结束 -->
    <!-- footer底部区域开始 -->
    <footer class="bg-dark text-white">
        <div class="container ">
            <div class="row py-5 mt-5 border-bottom border-secondary">
                <div class="col-md-6">
                    <span class="iconfont icon-bootstrap" style="font-size: 2rem; vertical-align: middle;"></span>
                    Bootstrp中文网
                    <p class="text-white-50 mt-4 "><a href="javascript:;">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开</a></p>
                    <p class="text-white-50"><a href="javascript:;">发工具!</a> </p>
                </div>
                <div class="col-md-2">
                    <div>关于</div>
                    <p class="text-white-50 mt-4"><a href="javascript:;">关于我们</a></p>
                    <p class="text-white-50"><a href="javascript:;">广告合作</a></p>
                    <p class="text-white-50"><a href="javascript:;">友链</a></p>
                    <p class="text-white-50"><a href="javascript:;">招聘</a></p>
                </div>
                <div class="col-md-2">
                    <div>特别致谢</div>
                    <p class="text-white-50 mt-4"><a href="javascript:;">右拍云</a></p>
                    <p class="text-white-50"><a href="javascript:;">右拍云</a></p>

                </div>
                <div class="col-md-2">
                    <div>联系方式</div>
                    <p class="text-white-50 mt-4"><a href="javascript:;">微博</a></p>
                    <p class="text-white-50"><a href="javascript:;">邮箱</a></p>
                </div>
            </div>
            <div class="row py-4">
                <div class="col md-4">
                    <div class="text-white-50 fs-6"> <a href="javascript:;">© 2012-2023 Bootstrap中文网</a></div>
                </div>
                <div class="col md-4">
                    <div class="text-white-50 fs-6"><a href="javascript:;">ICP11008151-6 | 京公网安备</a></div>
                </div>
                <div class="col md-4">
                    <div class="text-white-50 fs-6"><a href="javascript:;">Big things have small beginnings.</a></div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer底部区域结束 -->
</body>

</html>

2、 页面效果

因为截图的原因,文件较为模糊,见谅!

2.1 pc端效果图:

利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)_第3张图片

2.2 平板端效果图:

利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)_第4张图片

2.3 移动端效果图

利用Bootstrap框架制作Bootstrap中文网首页(响应式布局)_第5张图片

你可能感兴趣的:(bootstrap,css,前端)