bootstrap学习笔记——黑马商城案例

最新推荐文章于 2024-04-29 11:19:26 发布
最新推荐文章于 2024-04-29 11:19:26 发布
阅读量1.9k 收藏 10
点赞数 3
分类专栏： web前端 文章标签： web前端 bootstrap js html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42102911/article/details/100008894
版权

bootstrap学习笔记——黑马商城案例

1.完成bootstrap的初始化工作

2.创建9个div

1.第一个div：存放logo信息，在中等屏幕，每个占四份，小屏幕，超小屏幕，每个占12份
2.第二个div：存放导航条，不用控制响应式
3.第三个div：存放轮播图，不用控制响应式
4.第四个div：存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图：在中等屏幕占2份，小屏幕占12份，超小屏幕隐藏
					右边的div
						存放具体商品小图：在中等屏幕的时候占10份，小屏幕占12
份，超小屏幕12
						大图：在中等屏幕的时候占6份，小屏幕占隐藏，超小屏幕隐藏		
						小图：在中等屏幕的时候占2份，小屏幕占三份，超小屏幕6份
5.	第五个div：存放图片
6.		第六个div：	存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图：在中等屏幕占2份，小屏幕占12份，超小屏幕隐藏
					右边的div
						存放具体商品小图：在中等屏幕的时候占10份，小屏幕占12
份，超小屏幕12
						大图：在中等屏幕的时候占6份，小屏幕占隐藏，超小屏幕隐藏		
						小图：在中等屏幕的时候占2份，小屏幕占三份，超小屏幕6份							
7.第七个idiv：存放图片		
8.第八个div：存放友情链接
9.第九个div：存放版权信息

代码实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js">
		//写入bootstrap提供的组件，css样式，js，jQuery
	</script>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
	<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			// 实现轮播图的自动轮播
			$('.carousel').carousel({
				interval: 2000
			})
		})
	</script>
</head>
<body>
	<div class="container-fluid">
		<div >
			<!-- 	1.第一个div：存放logo信息，在中等屏幕，每个占四份，小屏幕，超小屏幕，每			个占12份 -->
			<!-- 嵌套三个div-->
			<div class="col-md-4 col-sm-12 col-xs-12">
				<img src="../img/img/logo2.png" >
			</div>
			<div class="col-md-4 col-sm-12 col-xs-12" >
				<img src="../img/img/header.jpg" >
			</div>
			<div class="col-md-4 col-sm-12 col-xs-12 text-center" style="padding-top:20px; "  >
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">购物车</a>
			</div>	
		</div>
		<div class="clearfix">
			<!-- 清楚浮动效果，否则将覆盖上边图片 -->
		</div>
		<div >
			<!-- 	2.第二个div：存放导航条，不用控制响应式 -->
			<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				 </button>
				<a class="navbar-brand" href="#">首页</a>
		</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						  <ul class="nav navbar-nav">
							<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
							<li><a href="#">电子设备</a></li>
							<li class="dropdown">
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">水果 <span class="caret"></span></a>
							  <ul class="dropdown-menu">
								<li><a href="#">苹果</a></li>
								<li><a href="#">香蕉</a></li>
								<li><a href="#">其他</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">蔬菜</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">更多信息</a></li>
							  </ul>
							</li>
						  </ul>
						<form class="navbar-form navbar-left pull-right" >
							<div class="form-group" align="center">
								<input type="text" class="form-control" placeholder="输入关键字查询" >
							</div>
							<button type="submit" class="btn btn-default" >查询</button>
						</form>
  
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>
		<div >
					<!-- 	3.第三个div：存放轮播图，不用控制响应式-->			
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

					<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="../img/img/1.jpg" alt="...">
						<div class="carousel-caption">
						
						</div>
				</div>
			<div class="item">
					<img src="../img/img/2.jpg" alt="...">
				<div class="carousel-caption">
   
				</div>
			</div>
			<div class="item active">
				<img src="../img/img/3.jpg" alt="...">
				<div class="carousel-caption">
				</div>
			</div>
	</div>

			<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	<div >
			<!-- 4.第四个div：存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
	
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图：在中等屏幕占2份，小屏幕占12份，超小屏幕隐藏
					右边的div
						存放具体商品小图：在中等屏幕的时候占10份，小屏幕占12
份，超小屏幕12
						大图：在中等屏幕的时候占6份，小屏幕占隐藏，超小屏幕隐藏		
						小图：在中等屏幕的时候占2份，小屏幕占三份，超小屏幕6份 -->
						<div style="padding-top: 20px;">
							<!-- 上边的div -->
							<span class="h1">热门商品</span>
							<span >
								<img src="../img/img/title2.jpg" >
							</span>
						</div>
						<div class="" style="padding-top: 20px;">
							<!-- 下边的div -->
							<div class="col-md-2 com-sm-12 hidden-xs">
								<!-- 左边的div -->
								<img src="../img/big01.jpg" >
							</div>
							<div class="col-md-10 col-sm-12 col-xs-12">
								<!-- 右边的div -->
								<div class="col-md-6 hidden-sm hidden-xs">
									<!-- 商品中的大图 -->
								<img src="../img/img/middle01.jpg" width="390" height="190">
									
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center" >
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6" align="center">
									<!-- 商品中的小图 -->
									<img src="../img/img/small08.jpg" >
									<p ><font size="5px" color="red">电饭煲</font></p>
									<p><font size="5px" color="green">$9899</font></p>
								</div>
								
							</div>
						</div>
		</div>
		<div >
			<!-- 	5.	第五个div：存放图片 -->
		</div>
		<div >
			<!-- 6.		第六个div：	存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图：在中等屏幕占2份，小屏幕占12份，超小屏幕隐藏
					右边的div
						存放具体商品小图：在中等屏幕的时候占10份，小屏幕占12
份，超小屏幕12
						大图：在中等屏幕的时候占6份，小屏幕占隐藏，超小屏幕隐藏		
						小图：在中等屏幕的时候占2份，小屏幕占三份，超小屏幕6份			 -->
		</div>
		<div style="padding-top:30px;">
			<span class="col-md-12 col-sm-12 col-xs-12" >
				<img width="100%" src="../img/img/footer.jpg" >
			</span>
			<!--     7.第七个idiv：存放图片	 -->
		</div>
		<div class="clearfix">
			
		</div>
		<div class="text-center" style="padding-top: 30px;">
			<!--     8.第八个div：存放友情链	 -->				
			<span >
					<ul class="list-inline">
						<li><a href="#" >联系方式</a>
					<li><a href="#">联系方式</a></li>
						<li><a href="#" >联系方式</a>
					<li><a href="#">联系方式</a></li>	<li><a href="#" >联系方式</a>
					<li><a href="#">联系方式</a></li>	<li><a href="#" >联系方式</a>
					<li><a href="#">联系方式</a></li>	<li><a href="#" >联系方式</a>
					<li><a href="#">联系方式</a></li>
					</ul>
					
			</span>
		</div>
		<div class="text-center" style="padding-top: 30px;">
			<!--     9.第九个div：存放版权信息	-->
			<p >
				版权所有 侵权必究 烟台大学区块链技术应用研究中心
			</p>
		</div>
		
	</div>
</body>
</html>
Janson666
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于maven的java黑马商城项目(J2EE)
qq_40738741的博客
06-15 3484
1、项目的实现目标 基于Windows系统 使用IDEA java—maven开发一个简单商城系统，其中主要包含登录页面、注册页面、主页面、分类页面、商品详情页面、购物车页面、订单页面、支付页面，实现最基本的商城购物功能。。 2、前期需要元素 完整的前端代码，其中包含HTML、CSS、JS、img、Mysql(数据库)等信息，本项目直接使用，不是自我创建。（该信息都将在准备资料上传） 3、前期准备资料 (1)maven环境的配置 https://blog.csdn.net/qq_40738741/artic
JavaWeb 黑马商城 IDEA +maven
06-08
熟悉HTTP协议下的web通信 熟练使用JavaWeb开发技术 异步请求 前后端分离 数据库的设计和操做
Bootstrap框架 (黑马程序员)
2301_80068547的博客
11-25 6310
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。
微服务入门学习笔记（黑马商城）
最新发布
feng_ling_01的博客
04-29 2752
自定义过滤器有两种GatewayFilterFactory和GlobalFilter，前者可以设置单个服务过滤，也可以设置全局过滤，后者创建完后自动生效全局过滤实现更加简单。这样就实现了网关登录校验并且将用户信息传递给其他服务，但其他服务互相调用时还是不会传递用户信息。所以我们需要在服务之间发送http请求是带上用户信息的请求头。登录校验过滤器实现：将过滤校验所需的配置类和工具类转移到网关。创建网关模块，引入springcloud的网关依赖。配置网关转跳路由和过滤器，我的网关端口为8090。
黑马程序员Bootstrap P192-199
qq_44629163的博客
11-19 6016
1\
黑马
02-16
黑马
uni-app 商城实战项目
liuerchong的博客
09-17 5872
商城实战项目 项目搭建 利用HBuilder X创建基本项目结构 运行项目 整理基本项目结构，并修改窗口外观 "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "商城", "navigationBarBackgroundColor": "#1989fa", "backgroundColor": "#F8F8F8" } 配置tabbar 创建tabbar对应的四个页面
Bootstrap3.0学习笔记之栅格系统案例
09-22
上一篇文章我们介绍了bootstrap3.0的栅格系统的基本原理，这篇文章我们通过具体系统案例来深入了解bootstrap3.0的栅格系统，文章讲诉的非常详细，这里推荐给大家
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记
06-17
自己整理的bootstrap学习笔记，非常值得拥有，需要的朋友，可以下载学习。
bootstrap学习笔记之初识bootstrap
10-22
为了更好地学习和应用Bootstrap，建议通过官方文档或中文网了解详细信息，实践操作并逐步掌握各个组件的用法。此外，不断探索和研究社区中丰富的插件和扩展，将使你的Bootstrap项目更具特色和功能。 总之，...
Java黑马商城代码文档数据库
12-05
黑马课程最后一个大项目代码文档数据库，黑马课程最后一个大项目代码文档数据库，黑马课程最后一个大项目代码文档数据库
Bootstrap源代码
03-18
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
黑马程序员--银行管理系统
11-25
模拟实现银行业务调度系统逻辑，具体需求如下： 1.银行内有6个业务窗口，1 - 4号窗口为普通窗口，5号窗口为快速窗口，6号窗口为VIP窗口。 2.有三种对应类型的客户：VIP客户，普通客户，快速客户（办理如交水电费、电话费之类业务的客户）。 3.异步随机生成各种类型的客户，生成各类型用户的概率比例为： VIP客户：普通客户：快速客户 = 1 ：6 ：3。 4.客户办理业务所需时间有最大值和最小值，在该范围内随机设定每个VIP客户以及普通客户办理业务所需的时间，快速客户办理业务所需时间为最小值（提示：办理业务的过程可通过线程Sleep的方式模拟）。各类型客户在其对应窗口按顺序依次办理业务。 5.当VIP（6号）窗口和快速业务（5号）窗口没有客户等待办理业务的时候，这两个窗口可以处理普通客户的业务，而一旦有对应的客户等待办理业务的时候，则优先处理对应客户的业务。 6.随机生成客户时间间隔以及业务办理时间最大值和最小值自定，可以设置。 7.不要求实现GUI，只考虑系统逻辑实现，可通过Log方式展现程序运行结果。
bootstrap 国外开源网站源码
06-20
响应式电商网站
基于java的黑马商城
03-31
这是java小项目，其中包含登录，注册，邮箱激活，商品的展示，购物车和订单订单的查询和付款，以及后台的商品管理，用户管理，分类管理，订单管理
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
黑马程序员---银行业务调度系统-代码
lipanquan的专栏
01-08 677
银行业务调度系统   模拟实现银行业务调度系统逻辑，具体需求如下：   > 银行内有6个业务窗口，1- 4号窗口为普通窗口，5号窗口为快速窗口，6号窗口为VIP窗口。   > 有三种对应类型的客户：VIP客户，普通客户，快速客户（办理如交水电费、电话费之类业务的客户）。   > 异步随机生成各种类型的客户，生成各类型用户的概率比例为：           VIP客户 ：普通客户

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Janson666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值