Bootstrap(折叠+列表组轮播图实现图文区)

图文区)"/>

Bootstrap(折叠+列表组轮播图实现图文区)

目录

书籍列表+折叠效果

轮播图演示

 图文区

书籍列表+折叠效果

<div class="col-md-3 aa" style="background-color: #8FD19E; "><div id="accordion"><div class="card"><div class="card-header" id="headingOne"><h5 class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"aria-expanded="true" aria-controls="collapseOne">书籍列表</button></h5></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne"data-parent="#accordion"><ul class="list-group"><li class="list-group-item">文艺</li><li class="list-group-item">小说</li><li class="list-group-item">青春</li><li class="list-group-item">童书</li><li class="list-group-item">励志</li><li class="list-group-item">生活</li><li class="list-group-item">人文社科</li><li class="list-group-item">经营</li><li class="list-group-item">科技</li><li class="list-group-item">教育</li><li class="list-group-item">工具书</li><li class="list-group-item">期刊</li></ul></div></div></div></div>

轮播图演示

<div class="col-12"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"data-interval="2000"><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></ol><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100" src="img/轮播图/lb1.png" alt="First slide"></div><div class="carousel-item"><img class="d-block w-100" src="img/轮播图/lb2.jpg" alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100" src="img/轮播图/lb3.jpg" alt="Third slide"></div></div><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleIndicators" role="button"data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>

//设置播放速度

data-interval="2000"

 图文区

<!-- 新书上架 --><div class="col-12"><pstyle="background-image: url(img/title_bj.png);background-color: #F7F7F7;background-repeat: no-repeat;margin-top: 10px;">新书上架</p></div><div class="col-12"><div class="row"><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/1.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥28.50</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/2.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥24.80</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4"><figure class="figure"><img src="img/书籍图片/3.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥115.30</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/4.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥39.60</figcaption></figure></div><!-- 热销书籍 --><div class="col-12"><pstyle="background-image: url(img/title_bj.png);background-color: #F7F7F7;background-repeat: no-repeat;margin-top: 10px;">热销书籍</p></div><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/5.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥58.60</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/6.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥29.90</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4"><figure class="figure"><img src="img/书籍图片/7.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥27.92</figcaption></figure></div><div class="col-lg-2 col-md-3 col-sm-4 "><figure class="figure"><img src="img/书籍图片/8.png" class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaption class="figure-caption">￥18.50</figcaption></figure></div></div></div>

电脑端 

平板端 

手机端