利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
目录
- 1、项目搭建
-
- 1.1 下载安装
- 1.2 文件的引入
- 1.3 结构搭建
- 1.4 代码示例
- 2、 页面效果
-
- 2.1 pc端效果图：
- 2.2 平板端效果图：
- 2.3 移动端效果图
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 结构搭建
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:;">京ICP备11008151号-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端效果图：
2.2 平板端效果图：
2.3 移动端效果图
