通过BootStrap框架制作商城网页

最新推荐文章于 2024-07-31 06:06:06 发布
最新推荐文章于 2024-07-31 06:06:06 发布
阅读量9.3k 收藏 122
点赞数 9
分类专栏： BootStrap 文章标签： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16011889/article/details/97306458
版权

BootStrap框架 通过官网查询代码实现内容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />

		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!--
			引入bootstrap相关的头文件
			1. div布局容器  class = " container"
			2. 放8行 row 
		-->
	</head>

	<body>
		<!--最外层的布局容器-->
		<div class="container">
			<!--LOGO部分-->
			<div class="row">
				<div class="col-md-4 col-sm-6 col-xs-6">
					<img src="../img/sc.jpg" style="height: 6rem;"/>
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					<img src="../img/header.png" />
				</div>
				<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;height: 50px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>

			<!--导航栏部分-->
			<nav class="navbar navbar-inverse">
				<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">
					        <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>
								<a href="#">鞋靴箱包</a>
							</li>
							<li>
								<a href="#">香烟酒水</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#">手机数码</a>
									</li>
									<li>
										<a href="#">电脑办公</a>
									</li>
									<li>
										<a href="#">鞋靴箱包</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">香烟酒水</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">花生瓜子</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>

					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
			
			
			<!--轮播图-->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
				<!-- 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/1.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../img/2.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../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 class="row">
				<div class="col-md-12">
					<h3>最新商品<img src="../images/title2.jpg"/></h3>
				</div>
			</div>
			
			
			<!--商品部分-->
			<div class="row">
				<!--左边大图部分-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
					右边商品项部分
				-->
				<div class="col-md-10">
					<!--投影神券来袭-->
						<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
							<img src="../products/hao/middle01.jpg" style="width: 100%;" />
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small01.jpg" style="max-width: 80%;"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small02.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small03.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small04.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small05.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small06.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small07.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small08.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small09.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
					
				</div>
			</div>
			<!--LOGO部分-->
			<div class="row">
				<div class="col-md-12">
					<img src="../products/hao/ad.jpg" width="100%"/>
				</div>
			</div>
			
			<!--最新商品-->
			<div class="row">
				<div class="col-md-12">
					<h3>最新商品<img src="../images/title2.jpg"/></h3>
				</div>
			</div>
			<!--商品部分-->
			<div class="row">
				<!--左边大图部分-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="../products/hao/big01.jpg"/>
				</div>
				<!--
					右边商品项部分
				-->
				<div class="col-md-10">
					<!--投影神券来袭-->
					<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
						<img src="../products/hao/middle01.jpg" />
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small09.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small08.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small07.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small06.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small05.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small04.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small03.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small02.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small01.jpg"/>
						<p>微波炉</p>
						<p style="color: red;">$998</p>
					</div>
					
					
					
				</div>
			</div>
			
			
			<!-- footer -->
			<div class="row">
				<div class="col-md-12">
					<img src="../img/footer.jpg" width="100%"/>
				</div>
			</div>
			
			
			<div style="text-align: center;">
				        
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					
					<br />
					
					Copyright © 2005-2016 传智商城 版权所有
			</div>
			
		</div>
	</body>

</html>

在这里插入图片描述

其中方法名解释:

栅格系统:

  1. 将屏幕划分成12个格子,12列
  2. class=“row” 行
  3. 行里面放列,col-屏幕分辨率-数字
  4. (每一种分辨率厚度饿数字总和必须是等于12,如果超过12,另起一行)
  5. col-lg-数字:在超宽屏幕上使用
    col-md-数字:在中等屏幕上,pc电脑
    col-sm-数字: 在平板上
    col-xs-数字:在手机上

组件:导航条,进度条,字体
javascript插件: 轮播图

什么是响应式:会根据不同的分辨率去显示不同页面结构,提高用户体验

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
实例

<!DOCTYPE html>
<html>
    <head>
        <title>响应式布局容器 - container和container-fluid</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
          <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="background-color: red;">
            <div>container类</div>
        </div>
        <div class="container-fluid" style="background-color: blue;">
            <div>container-fluid类</div>
        </div>
    </body>
</html>

在这里插入图片描述

col-lg-* col-md-* col-xs-* col-sm定义在这些不同屏幕大小中将有多少列。
md正常网页 sm平板网页 xs手机网页

例：如果你想在桌面屏幕和电话屏幕上有两列，你可以放两列。col-md-6和两个col-xs-6列中的类。

如果你想在桌面屏幕上有两列，在电话屏幕上只有一列(即两行叠在一起)two col-md-6和两个col-xs-12在你的列中，因为和将为24，它们将自动堆叠在一起。

kior的学习之路
关注
专栏目录
bootstrap网上购物商城.zip
07-29
bootstrap网上购物商城，仿天猫商城界面
【一、bootstrap框架前端注册登录页面】
weixin_51988564的博客
03-28 4179
基于eclipse平台，java语言开发，前端用到bootstrap框架，后端使用jsp技术和servlet技术，数据库使用mysql，服务器端使用tomcat,设计并开发一个电子相册系统。
Bootstrap 创建一个网页
最新发布
xyq2024的博客
07-31 455
标签，用于编写自定义 CSS 样式。<style>/* 在这里添加您的自定义样式 */
基于Bootstrap的登录&注册模板（html+css）
皮埃尔的博客
01-28 1万+
基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。
通过bootstrap4框架制作商城网页
m0_55366658的博客
05-28 3612
这是整个页面显示出来的效果 下面来解析: 最上面显示的是导航栏用到椭圆形头像，下拉列表，文本框，button里设置font-awesome图标，因为bootstrap4没有自带图标了，所以我们就用font awesome。Font Awesome 品牌图标 | 菜鸟教程 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" > <img src=...
Bootstrap(实现搜索书籍页面&&购物车页面以及订单)
m0_68332494的博客
05-04 3524
运用Bootstrap实现以下案例： 案例1：实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：实现搜索书籍页面</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&
bootstrap开发商城网站
HC_JAVA崽
03-21 1502
     在前些日子做了一个模仿荣耀商城的网站，使用了bootstrap技术。做了几个常用的界面。      包括商城主页、商品分类页、商品详情页、购物车页、商品订单页。      项目展示： ...
Bootstrap+framework框架制作的水果
07-13
Bootstrap 框架是网页开发中的一个流行工具，它由Twitter的开发者们创建，旨在提供一个简洁、响应式和易用的前端开发...通过深入研究提供的示例代码，开发者可以更好地理解和掌握Bootstrap框架，并将其应用于其他项目。
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
05-06
Bootstrap框架是目前最流行的前端开发框架之一，以其简洁、灵活且强大的特性深受开发者喜爱。它提供了丰富的预定义的CSS、JavaScript组件以及响应式设计，帮助开发者快速构建美观且适应各种设备的网页。在这个项目中...
severed:尝试使用 bootstrap 制作网页
07-12
在本文中，我们将深入探讨如何使用Bootstrap框架来创建一个引人入胜的网页。Bootstrap是目前最流行的前端开发框架之一，它提供了丰富的预定义样式、组件和JavaScript插件，极大地简化了网页设计和开发的过程。...
Bootstrap-个人简历响应式网页模板
06-08
Bootstrap是世界上最流行的前端开发框架之一，由Twitter的开发者创建，旨在简化Web开发过程，提供一套易用、响应式和移动设备优先的工具。这个“Bootstrap-个人简历响应式网页模板”充分利用了Bootstrap的核心特性，...
bootstrap服装整站商城模板
04-02
这个“bootstrap服装整站商城模板”是基于Bootstrap框架设计的一个完整的电子商务网站模板，专为展示和销售服装产品而定制。 首先，让我们详细了解一下Bootstrap的核心特性。Bootstrap提供了一套丰富的预定义的CSS...
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2775
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
采用bootstrap框架实现登录页面
qq_34884166的博客
12-20 1971
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
用前端框架Bootstrap和Django实现用户注册页面
昊虹AI笔记
10-31 2808
用前端框架Bootstrap和Django实现用户注册页面
2023.11.15使用bootstrap做一个简洁的注册页面
leigh_chen的博客
11-15 517
设置密码必须大于等于6位，并且包含大写字母、小写字母、特殊字符或者数字中的三种。
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
Bootstrap03购物车页面&登录注册界面&其他组件使用
qq_73126462的博客
04-21 1945
【代码】Bootstrap03购物车页面&登录注册界面&其他组件使用。
前端50个精美登录注册模板
热门推荐
FZUMRWANG的博客
03-12 3万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="100%&quo
用bootstrap框架制作京东网页
12-10
以下是使用Bootstrap框架制作京东网页的示例代码： ```html <!DOCTYPE html> 京东网页 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值