Bootstrap03(组件案例)

最新推荐文章于 2022-05-14 21:33:37 发布

呼啦啦dxy

最新推荐文章于 2022-05-14 21:33:37 发布

阅读量301

点赞数 1

文章标签： css html sass

本文链接：https://blog.csdn.net/weixin_66202611/article/details/124539145

版权

本文通过四个案例深入探讨Bootstrap的使用，包括利用媒体对象创建搜索书籍页面，使用表格构建购物车页面布局，借助模态框展示购物车订单信息，以及在项目中整合和使用图标组件。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1.实现搜索书籍页面：HTML</title>
		<!-- 引入bootstrap的css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
				/* 1.代表自动占用父容器剩余空间  0代表不占用*/
			}

			.ss {
				height: 100px;
				/* 高度 */
				background-color: #dcdcdc;
				/* 背景颜色 */
				margin-top: 20px;
				/* 上间距 */

			}

			.form-group {
				width: 300px;
				/* 宽度 */
				margin-left: auto;
				/* 左间距  自适应*/
				margin-right: auto;
				/* 右间距  自适应 */
				margin-top: 31px;
				/* (100-38)/2 */
			}

			.list-group,.media {
				margin-top: 30px;
			}
			.media-body p{
				line-height: 15px;/* 行高 */
				letter-spacing: 3px;/* 字体间的间距 */
			}
			.media-body p button{
				height: 30px;
				line-height: 10px;
			}
		</style>
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</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 " href="#">我的购物车</a>
						</div>
					</div>
			</div>
		</nav>
		<!-- 栅格系统 -->
		<div class="container">
			<!-- 第一行搜索区域 -->
			<div class="row ss">
				<div class="col">
					<form>
						<div class="form-group">
							<div class="input-group mb-3">
								<input type="text" class="form-control" placeholder="请输入书籍关键字"
									aria-describedby="basic-addon2" />
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">查询</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>



			<!-- 第二行 -->
			<div class="row">
				<div class="col-3">
				  <!-- 左3-书籍分类 -->
				  <div class=" list-group">
					<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
						书籍分类
					</a>
					<a href="#" class="list-group-item list-group-item-action">哈哈哈</a>
					<a href="#" class="list-group-item list-group-item-action">呵呵呵</a>
					<a href="#" class="list-group-item list-group-item-action">嘿嘿嘿</a>
					<a href="#" class="list-group-item list-group-item-action">啦啦啦</a>
					<a href="#" class="list-group-item list-group-item-action">略略略</a>
					<a href="#" class="list-group-item list-group-item-action">卡卡卡</a>
					<a href="#" class="list-group-item list-group-item-action">变变变</a>
					<a href="#" class="list-group-item list-group-item-action">熊出没</a>
				</div>
			</div>

			<div class=" col-9">

				<!-- 右9-轮播图&新书上架&热门书籍 -->
				<div class="media">
					<img src="img/1.png" class="mr-3" alt="...">
					<div class="media-body">
						<h5 class="mt-0">冷间谍</h5>
						<p>书籍价格：190.9</p>
						<p>书籍简介：哈哈哈</p>
						<p>书籍出版社：T280出版社</p>
						<p>书籍简介：夏日炎炎，有你超甜</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">立即购买</button>
							
						</p>
					</div>
				</div>
				<hr />


				<div class="media">
					<img src="img/2.png" class="mr-3" alt="...">
					<div class="media-body">
						<h5 class="mt-0">熊出没</h5>
						<p>书籍价格：9.9</p>
						<p>书籍作者：熊二</p>
						<p>书籍出版社：T280出版社</p>
						<p>书籍简介：冬眠假期刚刚结束，我还右点糊涂</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">立即购买</button>
							
						</p>
					</div>
				</div>
				<hr />
				
				
				<div class="media">
					<img src="img/3.png" class="mr-3" alt="...">
					<div class="media-body">
						<h5 class="mt-0">静夜思</h5>
						<p>书籍价格：39.9</p>
						<p>书籍作者：</p>
						<p>书籍出版社：T280出版社</p>
						<p>书籍简介：床前明月光，疑似地上霜</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">立即购买</button>
							
						</p>
					</div>
				</div>
				<hr />
				
				
			</div>
		</div>
		</div>
		<!-- 分别引入jquery的js和bootstrap的js -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/bootstrap.js" type="text/javascript" charset="utf-8"&

最低0.47元/天解锁文章

呼啦啦dxy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap03(组件案例)

《案例1：实现搜索书籍页面组件：媒体对象-Media object》<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>案例1.实现搜索书籍页面：HTML</title>  <link rel="stylesheet" type="text/css" href="css/boo.
复制链接

扫一扫