Bootstrap_03

最新推荐文章于 2024-06-15 06:21:07 发布
最新推荐文章于 2024-06-15 06:21:07 发布
阅读量270 收藏
点赞数
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67777597/article/details/124561445
版权

一、分页


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索书籍</title>
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 分别引入jQuery的js和Bootstrap的js -->
		<script src="js/jquery-3.3.1.min.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;
				/* 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>
	</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-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" 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-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 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>
						<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"><b>三国演义</b></h5>
							<p>书籍价格：30元</p>
							<p>书籍作者：李白</p>
							<p>书籍出版社：China出版社</p>
							<p>书籍简介：三个国家的兴盛与衰败</p>
							<p>
								<button type="button" class="btn btn-danger">加入购物车</button>
								<button type="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"><b>中华上下五千年</b></h5>
							<p>书籍价格：45元</p>
							<p>书籍作者：司马迁</p>
							<p>书籍出版社：华夏出版社</p>
							<p>书籍简介：领悟历史的魅力</p>
							<p>
								<button type="button" class="btn btn-danger">加入购物车</button>
								<button type="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"><b>民国风云</b></h5>
							<p>书籍价格：42元</p>
							<p>书籍作者：上官婉儿</p>
							<p>书籍出版社：轩辕出版社</p>
							<p>书籍简介：岁月变化莫测</p>
							<p>
								<button type="button" class="btn btn-danger">加入购物车</button>
								<button type="button" class="btn btn-danger">立即购买</button>
							</p>
						</div>
					</div>
					<hr >
					<!-- 分页 -->
					<nav aria-label="Page navigation example" style="padding-left: 35%;">
					  <ul class="pagination">
					    <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="page-link" href="#">2</a></li>
					    <li class="page-item"><a class="page-link" href="#">3</a></li>
					    <li class="page-item">
					      <a class="page-link" href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					        <span class="sr-only">Next</span>
					      </a>
					    </li>
					  </ul>
					</nav>
				</div>
 
			</div>
 
		</div>
	
	</body>
</html>

二、购物车页面订单


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现购物车页面订单信息</title>
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 分别引入jQuery的js和Bootstrap的js -->
		<script src="js/jquery-3.3.1.min.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;
				/* 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,
			table {
				margin-top: 30px;
				/* 上间距 */
			}
 
			/* 悬停表格 表头 字体为白色 */
			.table-hover thead {
				color: white;
			}
 
			/* 悬停表格 每一行 文本框中 字体居中 */
			.table-hover tr,
			.table-hover tr td input,
			.xxx {
				text-align: center;
			}
 
			.xxx button {
				height: 30px;
				line-height: 10px;
			}
		</style>
	</head>
	<body>
		
		
		<!-- Modal的HTML代码 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered"">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">订单信息</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						1、收货人
						2、订单地址
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary">确定</button>
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
 
		<!-- 导航条组件 -->
		<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" 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-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 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>
						<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-轮播图&新书上架&热门书籍 -->
					<table class="table table-hover">
						<thead class="bg-primary">
							<tr>
								<th scope="col">书籍名称</th>
								<th scope="col">单价</th>
								<th scope="col">购买数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th scope="row">三国演义</th>
								<td>30</td>
								<td><input value="2" /></td>
								<td>60元</td>
								<td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">民国风云</th>
								<td>42</td>
								<td><input value="10" /></td>
								<td>420元</td>
								<td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">中华上下五千年</th>
								<td>45</td>
								<td><input value="1" /></td>
								<td>45元</td>
								<td><a href="#">删除</a></td>
							</tr>
						</tbody>
					</table>
					<p class="xxx">
						<button type="button" class="btn btn-danger">清空购物车</button>
						<button type="button" class="btn btn-success">继续购物</button>
						<button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal">点我结算</button>
					</p>
 
				</div>
 
			</div>
 
		</div>
		
	</body>
</html>

愆零落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap_exercise_03
03-19
Bootstrap_exercise_03
03_Bootstrap 3 高级教程part2.rar
09-13
Bootstrap 3 高级教程part2
bootstrap_03
weixin_67856139的博客
05-07 113
一、表格 概述： 使用Bootstrap使用表格的文档和示例（表格样式及响应式优先于BootStrap全局的其它JavaScript事件 示例： <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <t...
Bootstrap_03之全局CSS
m0_64848027的博客
05-03 1533
一.表单 1.基本表单 1）class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100% 2）class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰 2.内联表单：class=”form-inline” What？什么是内联表单呢？就是让我们的所有表单元素都在一行
BootStrap_03 栅格布局
shenlanse7626的博客
12-15 124
mm
bootstrape常用标签_bootstrap_03_常用标签
weixin_39622988的博客
12-20 66
益司CMS-PC与手机建站集成@media(max-width:670px){body{background:whtie}}用户标签tag这里面放我们的常用标签,Here is some userful(重要的) tags.Here is some userful tags.Here is some userful tags.Here is some userful tags.Here is so...
BootStrap_03之组件（手风琴、导航）
qq_37555524的博客
09-17 455
1、BootStrap组件——按钮组： .btn-group>.btn*5； .btn-group-justified； .btn-group-lg/sm/xs； .btn-group-ver...
Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具）
suzhuhua的博客
05-03 267
这次学的CSS样式如标题所述，我们会一个个进行学习，首先我们先看看大纲。 第一种是基本表单，效果如下 基本表单样式就是一个内容占一行。代码如下， <h3 class="mark">1.1 基本表单</h3> <form> <div class="form-group"> <label>name:</label> <input type="text" class="form-cont
bootstrap_datetimepicker插件的使用
qq_63217107的博客
07-25 557
datetimepicker是一款非常优秀的日历插件。1、第一步，导入插件以及相关依赖。
PostgreSQL数据库集簇初始化——initdb初始化数据库（bootstrap_template1）
肥叔菌的博客
11-14 469
以bootstrap模式运行BKI脚本创建template1 static void bootstrap_template1(void) { PG_CMD_DECL; // #define PG_CMD_DECL char cmd[MAXPGPATH]; FILE *cmdfd char **line; char **bki_lines; char headerline[MAXPGPATH]; char buf[64]; printf(_("running bootstrap scrip
python bootstrap_python + django + bootstrap 快速web开发初探
weixin_39681621的博客
12-06 460
Python是一种面向对象、解释型计算机程序设计语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python语法简洁而清晰，具有丰富和强大的类库。Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的软件设计模式，即模型M，视图V和控制器C。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的，即是CMS(内...
bootstrap.memory_lock
qq422431474的博客
03-15 6016
由于当jvm开始swapping时es的效率会降低，所以要保证它不swap，这对节点健康极其重要。实现这一目标的一种方法是将bootstrap.memory_lock设置为true。 要使此设置有效，首先需要配置其他系统设置。有关如何正确设置内存锁定的更多详细信息，请参阅启用bootstrap.memory_lock。 bootstrap.memory_lock: 是否锁住内存，避免交换(swapped)带来的性能损失,默认值是: false bootstrap.system_call_filter:..
Python库 | js.bootstrap_datepicker-2013.03.12-1.tar.gz
05-17
资源分类：Python库 所属语言：Python 资源全名：js.bootstrap_datepicker-2013.03.12-1.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
03_Bootstrap 3 高级教程part1.rar
09-13
Bootstrap 3 高级教程part1
Bootstrap 用户界面架构视频03
01-21
文件比较大分三个压缩包，Bootstrap 用户界面架构视频03
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 368
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
css实现多行文本的展开收起
我码玄黄的博客
06-12 1018
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
开发移动端常见的问题：VW适配问题，基于 postcss 插件 实现项目vw适配
我就知道你会来，我们一起进步吧！
06-12 321
当你开发移动端的时候有一个问题是避免不了的，那就是当屏幕大小无论怎么变化时，内部尺寸也要随之发生改变，也就是适配问题。这里我们讲的是最新的VW适配，也就是用vw作为单位，100vw是整个页面的大小。而在开发的设计图中用的是px，如果我们徒手计算每个设计图中的尺寸显然是不现实的。在脚手架中我们就会用到一个插件postcss，它会自动将px尺寸转化为vw。这里要提一下的是300*300出现了小数是浏览器精度的问题。此时我们简单的写一个盒子，打开浏览器，就能看到。注意这里是根目录，也就是src目录的外面。
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
最新发布
一起coding，一起嗨。
06-15 267
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
producer = KafkaProducer(bootstrap_servers=['wyk01:9092','wyk02:9092','wyk03:9092'], security_protocol="SASL_PLAINTEXT", sasl_mechanism="PLAIN", sasl_plain_username="python_wyk", sasl_plain_password="python_wyk_pwd" )
06-09
这是一个KafkaProducer的初始化代码示例，其中包含了使用SASL_PLAINTEXT安全协议、PLAIN机制进行身份验证的相关参数配置，以及连接Kafka集群的bootstrap_servers地址。 具体参数解释如下： - bootstrap_servers：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值