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

1、项目搭建

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

css里面放的是我们的bootstrap.css样式

fonts是我们的字体图标库

images则是我们在官网上拿来的一些图片。

1.1 下载安装

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

1.2 文件的引入

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

<link rel="stylesheet" href="./css/bootstrap.min.css">

也可以通过官网的cdn进行在线引入，但是前提每次都要联网。

//引入bootstrap cdn链接<link href="/npm/bootstrap@5.3.0-alpha1/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><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 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><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 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:;">© - 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></body></html>