项目一：《生活资讯网》开发

项目介绍

生活资讯网是一款发布生活资讯新闻的网站。主要为人们提供各类生活资讯，如饮食健康、生活常识、美容养生等全面广阔的内容，本站可以让您能轻易找到您想要的各类生活知识。具体开发过程就不逐一展示了，下面简要分享一下我花费了不少时间才用Bootstrap做出来的轮播图和Accordion折叠部分。

轮播图

懒得废话，直接看代码吧，有兴趣的可以自己慢慢研究。

代码：

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- 指示符 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
    </div>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./image/1-21010G44509142.jpg" class="d-block" style="width:100%">
            <div class="carousel-caption doc">
                <a href="details1.html">
                    <h5>警惕更年期综合症带来的危害</h5>
                    <p>警惕更年期综合症带来的危害...</p>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="./image/1-21010G44436115.jpg" class="d-block" style="width:100%">
            <div class="carousel-caption doc">
                <a href="details2.html">
                    <h5>有这些症状的一定不能耽误得好好治</h5>
                    <p>有这些症状的一定不能耽误得好好治...</p>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="./image/1-21010G44341H2.jpg" class="d-block" style="width:100%">
            <div class="carousel-caption doc">
                <a href="details3.html">
                    <h5>百科知识大全</h5>
                    <p>生活百科频道有全面的生活百科知识大全与最实...</p>
                </a>
            </div>
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
        <img src="./image/l1.png" alt="">
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <img src="./image/r1.png" alt="">
    </button>
</div>

折叠手风琴（Accordion）

.collapse 类用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换；默认情况下折叠的内容是隐藏的，可以添加 .show 类让内容默认显示。

注意：使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。 

代码：

<!-- 折叠 -->
<div class="accordion" id="accordionshare">
    <div class="sharebox1">
        <div class="accordion-header" id="head1">
            <a href="" role="button" class="sharebtn gr collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"><i class="glyphicon glyphicon-phone-alt"></i> 微信</a>
        </div>
        <div class="accordion-header" id="head2">
            <a href="" role="button" class="sharebtn bl collapsed" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"><i class="glyphicon glyphicon-share"></i> 分享</a>
        </div>
    </div>
    <div class="sharebox2">
        <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="head1" data-bs-parent="#accordionshare">
            <div class="accordion-body">
                <div class="image">
                    <img src="./picture/follow-weixin.jpg" alt="">
                    <p>关注微信</p>
                </div>
            </div>
        </div>
        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="head2" data-bs-parent="#accordionshare">
            <div class="accordion-body">
                <div class="bdbox">
                    <a href="" class="more"></a>
                    <a href="" class="tsina" title="分享到新浪微博"></a>
                    <a href="" class="weixin" title="分享到微信"></a>
                    <a href="" class="qzone" title="分享到QQ空间"></a>
                    <a href="" class="tqq" title="分享到腾讯微博"></a>
                    <a href="" class="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div>
</div>

 我使用的是5.1.3版本的Bootstrap，使用是时要注意兼容性，目前好像只支持谷歌浏览器和火狐浏览器，需要引入下面的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

总结

对于这个生活资讯网项目，我在刚开始进行时不是很顺利，有点不知道怎么下手，尤其是荒废了近两个月，我都不知道该用哪种布局了，甚至连布局方式都快忘了；做这个项目自然相当慢，不过还好，一边做项目一边复习，在这个学习过程中的感受和收获还是不错的，慢慢找回了之前的记忆和学习的乐趣，毕竟能感觉到自己在一点一点的进步，虽然还有些小问题，不过我相信在接下来的学习中曾经的问题都将被解决！