bootstrap-03

最新推荐文章于 2024-08-21 09:17:03 发布
最新推荐文章于 2024-08-21 09:17:03 发布
阅读量135 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jh9758/article/details/124563588
版权
该博客详细介绍了使用Bootstrap框架进行网页开发的四个实战案例：1) 使用媒体对象组件实现搜索书籍页面；2) 利用表格展示购物车页面布局；3) 通过模态框展示购物车页面的订单信息；4) 探讨图标组件的应用。
摘要由CSDN通过智能技术生成

案例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">宋威昨夜碰哒鬼</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>
					</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="sr-only">Previous</span>
					      </a>
					    </li>
					    <li class="page-item"><a class="page-link" href="#">1</a></li>
					    <li class="page-item"><a class="p
最低0.47元/天 解锁文章
T276songjunhao
关注
BootStrap的模态框（modal）
qq_42370421的博客
08-23 284
1、引入js文件 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.st
bootstrap——模态框
ys_chy的博客
05-03 2516
让项目更加美观
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
极速掌握MySQL存储过程，开学秒室友
2401_84046635的博客
04-07 363
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
2024年阿里首次分享：内部（珠峰版)Java笔记，看完直接斩获12家offer
m0_72758098的博客
05-03 524
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
2020-03-12-build-your-own-bootstrap-kitten-css-源码.rar
10-10
标题 "2020-03-12-build-your-own-bootstrap-kitten-css-源码.rar" 提供的信息表明，这个压缩包包含了构建一个自定义的 Bootstrap 主题，主题可能与“kitten”（小猫）相关的 CSS 源代码。Bootstrap 是一个流行的...
Bootstrap-03 (前台开发框架)
qq_67771954的博客
05-15 141
一.案例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-scal
使用bootstrap-table-treegrid实现树表
qq_38754855的博客
01-14 1244
使用bootstrap-table-treegrid实现树表 需要引入资如下： bootstrap.min.css；bootstrap-table.min.css；jquery.treegrid.css jquery.js；bootstrap-table.min.js；bootstrap-table-treegrid.js； jquery.treegrid.min.js 具体实现如下： js： $('#tb_departments').bootstrapTable({ url: "/getD
2020-03-12-build-your-own-bootstrap-kitten-css
03-13
BYOB.css BYOB.css是为的入门CSS框架。 本地部署 该项目使用纱线工作区。 您需要安装yarn才能在本地部署它。 Yarn实际上是一个了不起的开发工具，并具有诸如缓存之类的整洁功能，这使得yarn install速度比npm快。...
Bootstrap 模态框
qq_27009517的博客
06-07 199
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(...
bootstrap模态框
qq_39432715的博客
10-09 166
1.导入bootatrap <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css"> <script src="../lib/jquery.min.js"></script> <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
Bootstrap 模态框（Modal）插件
最新发布
lwx666sl的博客
08-21 817
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
Flag少侠的博客
04-20 2088
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 3283
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
前端：Bootstrap 模态框
彭世瑜的博客
06-13 1429
模态框比较常用，整理一下 <html lang="en"> <head> <title>Document</title> <!-- 1、引入必要的文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/boo...
Bootstrap 显示模态框
m0_72758098的博客
04-14 646
互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
bootstrap- 模态框
橙_的博客
08-01 174
bootstrap 官方实例…(゜▽゜) <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> &lt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值