项目目标

实现一个响应式布局前端项目，bootstrap5.3版本：

container布局

项目需求：如果屏幕宽度超过1280px，修改container最大宽度为1280px。

row类盒子去除默认内边距，然后在中等屏幕及以上进行左2、中7、右3布局。

<div class="container">        <div class="row">            <header class="col-md-2">左</header>            <article class="col-md-7">中</article>            <aside class="col-md-3">右</aside>        </div>    </div>

@media screen and (min-width: 1280px){    .container{        width: 1280px;    }}

首先，显示logo图片，引入透明图片，背景色为#ff5e52，图片宽度100%。在超小屏幕下隐藏图片，显示“阿里百秀”文字。

<header class="col-md-2">    <div class="logo">        <img src="/static/images/logo.png" alt="" class="d-none d-sm-block">        <span class="d-block d-sm-none">阿里百秀</span>    </div></header>

.logo {    background-color: #ff5e52;}.logo img{    width: 100%;}

导航列表：

<div class="nav">     <li class="col-md-12"><a href="#">自然汇</a></li>     <li class="col-md-12"><a href="#">科技潮</a></li>    <li class="col-md-12"><a href="#">奇趣事</a></li>    <li class="col-md-12"><a href="#">美食节</a></li>    </div>

添加图标：

<div class="nav">     <li class="col-md-12"><a href="#">自然汇</a></li>     <li class="col-md-12"><a href="#">科技潮</a></li>    <li class="col-md-12"><a href="#">奇趣事</a></li>    <li class="col-md-12"><a href="#">美食节</a></li>    </div>

.logo {    background-color: #ff5e52;}.logo img{    width: 100%;}.logo span {    display: block;    height: 50px;    line-height: 50px;    color: #fff;    font-size: 18px;    text-align: center;}ul{    list-style: none;  }a {    color: #666666;    text-decoration: none;}.nav {    background-color: #eeeeee;    display: block;}.nav a{    display: block;    height: 50px;    height: 50px;    line-height: 50px;    padding-left: 30px;    font-size: 16px;}.nav a:hover {    background-color: #fff;    color: #333333;}.nav a::before {    display: inline-block;    vertical-align: middle;    margin-top: -3px;    margin-right: 5px;  }

<div class="nav">     <li><a href="#" class="bi-camera">生活馆</a></li>    <li><a href="#" class="bi-image">自然汇</a></li>     <li><a href="#" class="bi-phone">科技潮</a></li>    <li><a href="#" class="bi-gift">奇趣事</a></li>    <li><a href="#" class="bi-hearts">美食节</a></li></div>

注意点：

1.5.3版本需要先引入图标，使用时类名前面加上前缀bi-。

2.div盒子内部默认是flex布局，且是flex-wrap自动换行，即使是块标签也会在同一行，需要给.nav盒子设置display: block;

小屏和超小屏改变样式：

@media screen and (max-width: 991px) {    .nav li {      float: left;      width: 20%;    }    article {      margin-top: 10px;    }}@media screen and (max-width: 767px) {    .nav li a {      font-size: 14px;      padding-left: 3px;    }}

轮播图直接使用bootstrap中是js库，添加图片即可自动实现轮播效果。

<article class="col-md-7">    <div class="news">        <ul>            <li>                <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">                    <div class="carousel-inner">                      <div class="carousel-item active">                        <img src="/static/uploads/b1.jpg" class="d-block w-100" alt="...">                        <div class="carousel-caption">                            大前端XIU主题                        </div>                    </div>                      <div class="carousel-item">                        <img src="/static/uploads/b2.png" class="d-block w-100" alt="...">                        <div class="carousel-caption">                            37000+用户选购                        </div>                    </div>                      <div class="carousel-item">                        <img src="/static/uploads/b3.jpg" class="d-block w-100" alt="...">                        <div class="carousel-caption">                            龙井好茶！！！                        </div>                    </div>                    </div>                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>                      <span class="visually-hidden">Previous</span>                    </button>                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">                      <span class="carousel-control-next-icon" aria-hidden="true"></span>                      <span class="visually-hidden">Next</span>                    </button>                  </div>            </li>            <li>                <div>2</div>            </li>            <li>                <div>3</div>            </li>            <li>                <div>4</div>            </li>            <li>                <div>5</div>            </li>        </ul>    </div></article>

/* 文章部分 上方轮播图片区 */.news li{    float: left;    width: 25%;    height: 128px;    padding-right: 10px;    /* padding-bottom: 10px; */    background-color: antiquewhite;    margin-bottom: 10px;}.news li>div{    width: 100%;    height: 100%;    display: block;    background-color: aqua;    position: relative;}/* 第一个轮播图区域 */.news li:nth-child(1){    width: 50%;    height: 266px;    padding-right: 10px;    /* background-color:blueviolet; */}.carousel,.carousel img {  height: 266px !important;  width: 100%;}  .carousel-caption {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 41px;    /* line-height: 41px;; */    background-color: rgba(0, 0, 0, 0.5);    font-size: 16px;    color: #fff;    padding: 8px 10px;    margin: 0;}

轮播图自定义添加文字说明部分，以及设置margin-right:10px，距离右侧有10px距离，由于盒子大小50%是固定的，不能设置外边距，只能挤压内部盒子空间。

填充右侧四张图片：

<li>    <div>        <img src="/static/uploads/1.jpg" alt="" class="carousel-img-small">        <p class="carousel-caption carousel-caption-small">你敢骑吗？全球第一辆全功能3打印摩托车亮相</p>    </div></li><li>    <div>        <img src="/static/uploads/2.jpg" alt="" class="carousel-img-small">        <p class="carousel-caption carousel-caption-small">又现酒窝夹笔盖新技能 城里人是不让人活了！</p>    </div></li><li>    <div>        <img src="/static/uploads/3.jpg" alt="" class="carousel-img-small">        <p class="carousel-caption carousel-caption-small">实在太邪恶！照亮妹纸绝对领域</p>    </div></li><li>    <div>        <img src="/static/uploads/4.jpg" alt="" class="carousel-img-small">        <p class="carousel-caption carousel-caption-small">沙丁鱼迁徙途中与天敌展开“海底之战”</p>    </div></li>

/* 右侧四张小图片 */.carousel-img-small{    width: 100%;    height: 100%;}.carousel-caption-small{    font-size: 12px;    padding: 5px 10px;}

字体颜色使用bootstrap默认颜色，写完一个文章后复制粘贴即可，代码只展示一个。

注意：

1.news类要清除浮动。

2.标签在极小屏幕下隐藏，但是加上了类"d-none d-sm-block"，span会转化成block，需要通过绝对定位使得标签和点赞、评论在同一行。

<div class="publish">    <div class="row">        <div class="col-sm-9 box">            <h4>7种东西吃完鸡蛋后不能立即食用 也要切记哟！</h4>            <p class="text-muted d-none d-sm-block">themebetter主题小秘 发布于 2020-10-14 来源：阿里百秀</p>            <p class="d-none d-sm-block">鸡蛋营养丰富，是每个家庭都不可缺少的一道食物，但是吃鸡蛋也是有禁忌的，比如有些食物就不适合            在吃完鸡蛋后立即食用，否则就会危害健康。接下来小伙伴们就一起来看看哪些食物是不能吃鸡蛋后立即食用的吧！ 糖            很多地方有吃糖水荷包蛋的习惯，其实，那会使鸡蛋蛋白质中的氨基酸形成果糖基赖氨酸的结...</p>            <p class="text-muted">                阅读(6532) 评论(0)                 <span class="bi-hand-thumbs-up">赞(285)</span>                <span class="d-none d-sm-block article-bq">标签：柿子 / 消炎药 / 鸡蛋</span>            </p>        </div>        <div class="col-sm-3 d-none d-sm-block article-img">            <img src="/static/uploads/a1.jpg" alt="">        </div>    </div></div>

/* 中部文章 */.publish {    border-top: 1px solid #cccccc;}.publish .row {    border-bottom: 1px solid #cccccc;    padding: 10px 0;    position: relative;    }.article-img {    margin-top: 70px;}.article-img img {    width: 100%;}.article-bq{    position: absolute;    right: 300px;    bottom: 25px;}