Bootstrap部分案例

星光下的寂寞267

已于 2022-04-02 02:08:02 修改

阅读量1k

点赞数

文章标签： html

于 2022-04-01 23:56:43 首次发布

本文链接：https://blog.csdn.net/weixin_64072273/article/details/123910602

版权

这篇博客展示了如何利用Bootstrap框架实现首页轮播图、书籍分类和新书上架及热门书籍展示的功能。首先，详细介绍了轮播图的HTML结构和样式，包括指示器和导航按钮的设置。接着，演示了创建书籍分类列表的方法。最后，通过代码展示了如何布局新书上架和热门书籍的展示区域，包括书籍图片和标题。

摘要由CSDN通过智能技术生成

案例1：首页轮播图实现

代码如下

<div class="col-9">

                   <div class="row" style="background-color: yellowgreen;">
                   <div class="col">
                   

                       <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                       <ol class="carousel-indicators">
                       <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                       <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                       <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                       <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                       </ol>
                       <div class="carousel-inner">
                       <div class="carousel-item active">
                       <img src="img/lb1.png" class="d-block w-100" alt="...">
                       </div>
                       <div class="carousel-item">
                       <img src="img/lb2.jpg" class="d-block w-100" alt="...">
                       </div>
                       <div class="carousel-item">
                       <img src="img/lb3.jpg" class="d-block w-100" alt="...">
                       </div>
                           <div class="carousel-item">
                           <img src="img/lb4.jpeg" class="d-block w-100" alt="...">
                           </div>

                       </div>
                       <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                       <span class="sr-only">Previous</span>
                       </button>
                       <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                       <span class="carousel-control-next-icon" aria-hidden="t