Bootstrap03

最新推荐文章于 2022-09-18 17:02:28 发布

m0_l5z

最新推荐文章于 2022-09-18 17:02:28 发布

阅读量104

点赞数

文章标签： html bootstrap

本文链接：https://blog.csdn.net/m0_64863860/article/details/124661812

版权

本文通过四个案例展示了Bootstrap在实际应用中的效果，包括使用媒体对象实现搜索书籍页面，利用表格创建购物车页面布局，借助模态框展示购物车订单信息，以及介绍了图标组件的使用和其他如折叠、滚动监听、下拉菜单、分页和面包屑导航等常见组件。

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

案例1：实现搜索书籍页面
组件：媒体对象-Media object

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书籍商城首页</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.navbar-collapse{
			flex-grow: 0;
		}
		.form-group{
			width: 320px;
			margin: 0 auto;
		}
		.jumbotron {
			margin-top: 15px;
		}
		.carousel-control-prev-ico,
		.carousel-control-next-icon,
		.carousel-indicators li{
			background-color: blue;
		}
		
	</style>
	</head>
	<body>
		<!-- 导航条 -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
		  <div class="container">
		  	<a class="navbar-brand" href="#">Navbar</a>
		  	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  	  <span class="navbar-toggler-icon"></span>
		  	</button>
		  			
		  	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		  	  <ul class="navbar-nav mr-auto">
		  	    <li class="nav-item active">
		  	      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
		  	    </li>
		  	    <li class="nav-item">
		  	      <a class="nav-link" href="#">Link</a>
		  	    </li>
		  	    <li class="nav-item dropdown">
		  	      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		  	        Dropdown
		  	      </a>
		  	      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
		  	        <a class="dropdown-item" href="#">Action</a>
		  	        <a class="dropdown-item" href="#">Another action</a>
		  	        <div class="dropdown-divider"></div>
		  	        <a class="dropdown-item" href="#">Something else here</a>
		  	      </div>
		  	    </li>
		  	    <li class="nav-item">
		  	      <a class="nav-link disabled" href="#">Disabled</a>
		  	    </li>
		  	  </ul>
		  	  <form class="form-inline my-2 my-lg-0">
		  	    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
		  	    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		  	  </form>
		  	</div>
		  </div>
		</nav>
		
		
		<!-- 栅格系统 -->
		<div class="container">
			<!-- 第一行搜索区域 -->
			<div class="row">
				<div class="col">
					<!-- 巨幕 -->
				<div class="jumbotron">
				   <!-- 表单组件-->
				   <form>
				     <div class="form-group">
<!-- 输入框组 -->
				  <div class="input-group mb-3">
				    <input type="text" class="form-control" placeholder="书籍名称" aria-label="Recipient's username" aria-describedby="basic-addon2">
				    <div class="input-group-append">
				      <button class="btn btn-primary" type="button">搜索</button>
				    </div>
				  </div>
					 </div> 
				   </form>
				</div>	
				</div>
			</div>
			
			<!-- 第二行 -->
			<div class="row">
				<!-- 书籍分类 -->
				<div class="col-md-3">
					<!-- 折叠效果 -->
					<div class="accordion" id="accordionExample">
						<div class="card">
					    <div class="card-header" id="headingThree">
					      <h2 class="mb-0">
					        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                     书籍分类
					        </button>
					      </h5>
					    </div>
					    <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
					      <!--列表组 -->
						  <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>
					</div>
				</div>
				<!-- 轮播图+新书上架 -->
<!--  通过媒体对象实现书籍搜索-->
<div class="col-md-9">
	<!-- 媒体对象 -->
	<!-- list-unstyled 去除列表符号  style = "list-style-none"-->
	<ul class="list-unstyled">
	  <li class="media">
	    <img class="mr-3 align-self-center" src="img/3.png" alt="Generic placeholder image">
	    <div class="media-body">
	      <h5 class="mt-0 mb-1">狂人日记</h5>
<p>作者：哈哈</p>
<p>价格：122</p>
<p>出版社：哈哈西出版社</p>
<p>呼啦呼啦真好看，不容错过</