Bootstrap【前端开发框架三】

云彩123

已于 2022-05-09 18:09:54 修改

阅读量260

点赞数 2

分类专栏： Bootstrap 文章标签： javascript mvc 开发语言 java 前端

于 2022-05-04 23:23:03 首次发布

本文链接：https://blog.csdn.net/m0_64522859/article/details/124579876

版权

本文通过四个案例详细介绍了如何使用Bootstrap框架来实现前端开发中的功能。案例1展示了搜索书籍页面的媒体对象组件；案例2讲解了购物车页面的表格布局；案例3利用模态框展示购物车订单信息；案例4则涵盖了图标的使用。通过这些案例，读者可以深入了解Bootstrap在实际开发中的应用。

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

如需温习上一节内容，请点击下方链接进行跳转：

Bootstrap----02_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转：Bootstrap01【前端开发框架】_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发展史：HTML静态页面---serlvet----jsp问题2：web开发模式发展：模型1 模型2只有静态https://blog.csdn.net/m0_64522859/article/details/124563697

案例1：实现搜索书籍页面

组件：媒体对象-Media object


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- js -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
			}

			.form-group {
				width: 280px;
				margin: 0 auto;
			}
</style>
	</head>
	<body>

		<!-- 导航条的设置 -->
		<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-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-item nav-link" href="#">注册</a>
						<a class="nav-item nav-link" href="#">登录</a>
						<a class="nav-item nav-link disabled" href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
	
	
		<!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
		<div class="container">
			<!-- 第一行  row  start-->
			<div class="row" style="margin-top: 10px;">
				<div class="col">
					<div class="jumbotron">
						<!-- 表单组件 -->
						<form action="" method="post">
							<div class="form-group">
								<!-- 输入框组 -->
								<div class="input-group mb-3">
									<input type="text" class="form-control" placeholder="书籍名"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div><!-- 第一行row  end -->
		
			<!-- 第二行  左3右9 -->
			<div class="row">
				<div class="col-md-3 col-12">
					<!-- 列表组的核心样式  list-group -->
					<div class="accordion" id="accordionExample">
					  <div class="card">
					    <div class="card-header" id="headingOne">
					      <h5 style="cursor: pointer;" class="mb-0 "data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					         书籍分类
					      </h5>
					    </div>
					
					    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
							<div class="list-group">
								<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 active">悬疑</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>
								<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" disabled>穿越</button>
							</div>
					    </div>
					  </div>
					  
					</div>
					<!-- ---------------------------- -->
				</div>
				<div class="col-md-9 col-12" >
					<!-- 书籍搜索页 -->
					<ul class="list-unstyled">
					  <li class="media">
					    <img class="mr-3 align-self-center" src="img/bookList/1.png" alt="Generic placeholder image">
					    <div class="media-body">
					      <h5 class="mt-0 mb-1">宋威昨夜碰哒鬼</h5>
						  <p>作者：张萍</p>
						  <p>价格：9909</p>
						<p>出版社：清华出版社</p>
						<p>书籍简介:好看真的好看</p>
						<button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
						<button style = "width:150px" type="button" class="btn btn-danger">去结算</button>
					    </div>
					  </li>
					  <hr>
						<li class="media">
						  <img class="mr-3 align-self-center" src="img/bookList/1.png" alt="Generic placeholder image">
						  <div class="media-body">
						    <h5 class="mt-0 mb-1">阿Q正传</h5>
												  <p>作者：鲁迅</p>
												  <p>价格：40</p>
												<p>出版社：人民出版社</p>
												<p>书籍简介:富含丰富哲理</p>
												<button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
												<button style = "width:150px" type="button" class="btn btn-danger">去结算</button>
						  </div>
						</li>
						<hr>
					</ul>
					
					<!--  -->
					<nav aria-label="Page navigation example">
					  <ul class="pagination" style="padding-left: 40%;">
					    <li class="page-item">
					      <a class="page-link" href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					        <span class&#