前端学习日志之复刻Bookstrap部分板块

本文链接：https://blog.csdn.net/m0_59537414/article/details/125913878

本文详细介绍了前端开发中复刻BootStrap的部分板块，包括页面布局的分析，题头和内容部分的实现。在页面布局中，内容部分通过设置div的display属性为float来实现横向排列，利用margin实现居中。题头由h1、p和hr标签构成，并设置了相应的css样式。每个模块的介绍文本使用p标签，并用br标签确保文字排列美观。最后展示了完成后的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BookStrap页面部分复刻

页面布局分析

页面分为两部分：

题头部分
内容部分

在这里插入图片描述

题头部分

题头就是简单的三个标签：h1标题标签、p标签、hr水平线标签
为这三个标签设置css样式

<h1>Bootstrap相关优质项目推荐</h1>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
<hr>

		h1{
            font-size: 42px;
            font-weight: 500;
            color: #393333;
            text-align: center;
            margin: 0;
            padding-top: 20px;
            padding-bottom: 10px;
        }
        p{
            font-size: 14px;
            color: #555555;
            text-align: center;
            margin: 0;
            padding-top: 8px;
            line-height: 22px;
        }
       hr{
            width: 684px;
            margin-bottom: 50px;
            margin-top: 30px;
            color: #EEEEEE;
        }

内容部分

内容部分可以将八个模块写成八个div，放在一个大的div中。
因为div是块元素，不设置css样式直接放置会变成竖向排列，想要变成横向排列要设置display: float。这里不使用display: inline-block是因为行内块元素会产生一些留白导致八个模块七上八下的，无法对齐，所以使用左飘的方式使div横向排列。
想要盒子四个一行，给每个div设置宽度width，再给外部的div设置宽度width，宽度最好是能放下四个div多一点点，这样以便于设置盒子的margin外边距。
想要整个div居中，设置margin:0 auto;即可
注意文字居中，text-align: center，但是有的每行文字并不是对齐的才换行的，这里使用的是在每行文字后面加上br换行标签，这样文字排列是每行从多到少排列比较美观。
这里的每个模块下面的介绍文本采用的p标签，此处css样式使用的和题头部分一样不用再重复设置。

<div>
        <div class="d1">
            <a href=""><img src="img/1.png" alt="图片加载失败"></a>
            <a href="">
                <h2>优站精选</h2>
            </a>
            <a href=""><span>Bootstrap 网站实例</span></a>
            <p>Bootstrap 优站精选频道收集了众多基<br>于 Bootstrap 构建、设计精美的、有<br>创意的网站。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/2.png" alt="图片加载失败"></a>
            <a href="">
                <h2>React</h2>
            </a>
            <a href=""><span>用于构建用户界面的 JavaScript 框架</span></a>
            <p>React 起源于 Facebook 的内部项<br>目，是一个用于构建用户界面的<br> JavaScript 库。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/3.png" alt="图片加载失败"></a>
            <a href="">
                <h2>Webpack</h2>
            </a>
            <a href=""><span>是前端资源模块化管理和打包工具</span></a>
            <p>Webpack 是当下最热门的前端资源模<br>块化管理和打包工具。它可以将许多<br>松散的模块按照依赖和规则打包成符<br>合生产环境部署的前端资源。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/4.png" alt="图片加载失败"></a>
            <a href="">
                <h2>阿里云</h2>
            </a>
            <a href=""><span>无影云桌面</span></a>
            <p>阿里云-全球领先的云计算及人工智能<br>公司。阿里云最全特惠活动聚集于<br>此！</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/5.png" alt="图片加载失败"></a>
            <a href="">
                <h2>TypeScript</h2>
            </a>
            <a href=""><span>中文手册</span></a>
            <p>TypeScript 是由微软开源的编程语<br>言。它是 JavaScript 的一个超集，而<br>且本质上向这个语言添加了可选的静<br>态类型和基于类的面向对象编程。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/6.png" alt="图片加载失败"></a>
            <a href="">
                <h2>Next.js</h2>
            </a>
            <a href=""><span>中文文档</span></a>
            <p>Next.js 是一个轻量级的 React 服务端<br>渲染应用框架。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/7.png" alt="图片加载失败"></a>
            <a href="">
                <h2>Babel</h2>
            </a>
            <a href=""><span>是一个 JavaScript 编译器</span></a>
            <p>Babel 是一个 JavaScript 编译器。<br>Babel 通过语法转换器支持最新版本<br>的 JavaScript 语法。</p>
        </div>
        <div class="d1">
            <a href=""><img src="img/8.png" alt="图片加载失败"></a>
            <a href="">
                <h2>NPM</h2>
            </a>
            <a href=""><span>中文文档</span></a>
            <p>NPM（node package manager）是<br> Node.js 世界的包管理器。NPM 可以<br>让 JavaScript 开发者在共享代码、复<br>用代码以及更新共享的代码上更加方<br>便。</p>
        </div>
    </div>

        div{
            width: 1200px;
            margin: 0 auto ;
        }
        .d1{
            width: 262px;
            height: 336px;
            border: 1px solid #DDDDDD;
            text-align: center;
            float: left;
            margin-right: 12px;
            margin-left: 15px;
            margin-bottom: 30px;
        }
        img{
            width: 252px;
            height: 126px;
            padding-top: 5px;
            padding-left: 2px;
        }
        h2{
            color: #23527C;
            font-weight: 500;
            font-size: 26px;
            padding-top: 20px;
            margin: 0;
        }
        span{
            color: #777777;
            font-size: 17px;
            display: block;
            padding-top: 3px;
        }
        a{
            text-decoration: none;
        }