Bootstrap实战：首页组件应用-优快云博客

本文通过四个案例展示了Bootstrap在前端开发中的应用：使用Carousel实现首页轮播图，利用List group创建首页书籍分类，借助Figure展示新书上架与热门书籍，最后整合所有元素完成首页页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例1：首页轮播图实现

组件：轮播-Carousel

<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="true"></span>
									<span class="sr-only">Next</span>
								</button>
							</div>

案例2：首页书籍分类实现

组件：列表组-List group

<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							书籍分类
						</button>
						<button type="button" class="list-group-item list-group-item-action">玄幻</button>
						<button type="button" class="list-group-item list-group-item-action">科幻</button>
						<button type="button" class="list-group-item list-group-item-action list-group-item-danger">奇幻</button>
						<button type="button" class="list-group-item list-group-item-action">武侠</button>
						<button type="button" class="list-group-item list-group-item-action">武侠</button>
						<button type="button" class="list-group-item list-group-item-action">武侠</button>
					</di

bootstrap案例