Bootstrap(书籍查询&购物车&模态框)

最新推荐文章于 2024-03-30 03:34:48 发布

飓风.

最新推荐文章于 2024-03-30 03:34:48 发布

阅读量269

点赞数

文章标签： bootstrap html

本文链接：https://blog.csdn.net/qq_62981121/article/details/124771592

版权

本文通过Bootstrap技术，详细介绍了如何利用媒体对象创建书籍查询页面，实现了购物车功能，并探讨了模态框在用户交互中的应用。

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

媒体对象实现书籍查询页面

<!-- 导航条  start -->
		<div class="col-sm-12">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
				<a class="navbar-brand" href="#">欢迎进入</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
				  <div class="navbar-nav">
				    <a class="nav-link active" href="#">登录 <span class="sr-only">(current)</span></a>
				    <a class="nav-link" href="#">注册</a>
				    <a class="nav-link" href="#">购物车</a>
				    <a class="nav-link disabled">退出</a>
				  </div>
				</div>
			</div>
		</nav>
		</div>
		<!-- 导航条  end -->
			<div class="container">
				<div class="col-12">
					<!-- 霸屏 start-->
						<div class="jumbotron jumbotron-fluid">
						  <div class="container">
							  <!-- 按钮组 start -->
								<div class="input-group mb-3">
								  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
								  <div class="input-group-append">
								    <button class="btn btn-outline-secondary" type="button">搜索</button>
								  </div>
								</div>
								<!-- 按钮组 end-->
						  </div>
						</div>
					<!-- 霸屏  end -->
				</div>
				<!-- 下半区 -->
				<div class="row" style="width: 100%;height: 500px;">
					<!-- 下左 start-->
					<div class="col-3">
						<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>
						
						    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
						      <div class="card-body">
								  <ul class="list-group">
								    <li class="list-group-item">Cras justo odio</li>
								    <li class="list-group-item">Dapibus ac facilisis in</li>
								    <li class="list-group-item">Morbi leo risus</li>
								    <li class="list-group-item">Porta ac consectetur ac</li>
								    <li class="list-group-item">Vestibulum at eros</li>
								  </ul>
						      </div>
						    </div>