目录
案例01：书籍列表实现
效果展示：
<!-- 书籍分类一级栏目 --> <div class="row"> <div class="col-md-3"><--删格系统：左3右9--> <!-- 折叠手风琴效果 --> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">书籍分类</button> </h2> </div> <!-- show默认显示手风琴 --> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <!-- <div class="card-body"> --> <!-- 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> </div> </div> </div> </div> <div class="col-md-9" style="background-color: yellow;">1234</div> </div>案例02：新书上架
效果展示：
<div class="row"> <div class="col-md-3" style="background-color: red;"> 书籍列表 </div> <!-- 第二行的右9 --> <div class="col-md-9"> <div class="row"> <div class="col-12" style="background-color: oldlace;"> 轮播图区域 </div> <div class="col-12"> <!-- 新书上架标题 --> <div class="row"> <div class="col"> <p style="background-image: url(img/title_bj.png);background-repeat: no-repeat;background-color:#F7F6F6;border: 1px solid gainsboro;color: white;padding-left: 10px;">新书上架</p> </div> </div> <!-- 新书上架 --> <div class="row"> <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="..."> <figcaption class="figure-caption">三国演义<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="..."> <figcaption class="figure-caption">随护长</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="..."> <figcaption class="figure-caption">红楼梦</figcaption> </figure> </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="..."> <figcaption class="figure-caption">帅哥装</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="..."> <figcaption class="figure-caption">红楼梦</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="..."> <figcaption class="figure-caption">美女装</figcaption> </figure> </div> </div> <!-- 热门上架标题 --> <div class="row"> <div class="col"><!-- padding-left 内填充 --><!-- background-repeat:no-repeat 平铺 --> <p style="background-image: url(img/title_bj.png);background-repeat: no-repeat;background-color:#F7F6F6;border: 1px solid gainsboro;color: white;padding-left: 10px;">热门上架</p> </div> </div> <!-- 热门书籍 --> <div class="row"> <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="..."> <figcaption class="figure-caption">三国演义<figcaption> </figure> </div><!-- 6 4 3 --> <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="..."> <figcaption class="figure-caption">随护长</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="..."> <figcaption class="figure-caption">红楼梦</figcaption> </figure> </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="..."> <figcaption class="figure-caption">帅哥装</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="..."> <figcaption class="figure-caption">红楼梦</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="..."> <figcaption class="figure-caption">美女装</figcaption> </figure> </div> </div> </div> </div> 案例03：轮播图
轮播图的组成： 小控件按钮carousel-indicators 上一页下一页
按钮 carousel-control-prev carousel-control-next
图片区域carousel-inner carousel-item 包裹每一张图片进行默认隐藏
<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> </ol>效果展示：
<!-- 第二行右9 --> <div class="col-md-9"> <div class="col-12"> <!-- 轮播图 carousel:主样式；data-interval="500" 定时器 --> <div data-interval="500" id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <!-- carouselExampleIndicators 下面的小控件--> <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> <!-- carousel-inne 图片默认第一张 item其他图片--> <div class="carousel-inner"> <div class="carousel-item active"> <!-- 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> <!-- carousel-control-prev 上页--> <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> <!-- carousel-control-next 下页--> <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>
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
