BootStrap实现商城index页面前端效果------商城项目前端

已于 2023-12-17 17:31:12 修改
阅读量885 收藏 18
点赞数 21
分类专栏： 前端 文章标签： javascript 前端 前端框架 js ecmascript bootstrap jquery
于 2023-12-12 00:53:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134939390
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入Jquery,因为bootstrap中有jquery的插件 -->
		<!-- 必须先引入jquery,然后引入bootstrap -->
		<script src="jquery/jquery-3.6.1.js" type="text/javascript"></script>
		<!-- 引入bootstrap -->
		<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
		<!-- 引入bootstrap的js文件 -->
		<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	</head>
	<body>
		<!-- 导航栏部分 -->
		<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="#">
				<span class="glyphicon glyphicon-home" aria-hidden="true">主页
				</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="glyphicon glyphicon-gift" aria-hidden="true"></span>折扣商品
				<span class="sr-only">(current)</span></a></li>
		        <li><a href="#">
				<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>时季热销
				</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><a href="#">日常百货</a></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">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="键入搜索">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		      </form>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">
				<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>1
				</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<span class="glyphicon glyphicon-user" aria-hidden="true"></span>我的账号
					<span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">
					<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>个人中心
					</a></li>
		            <li><a href="#">
					<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>我的订单
					</a></li>
		            <li><a href="#">
					<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>我的收藏
					</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">退出登录</a></li>
		          </ul>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<!-- 介绍信息部分 -->
		<div class="jumbotron">
		  <h1>新春佳节, 热销进行时!</h1>
		  <p>超多优惠限时推出, 最低一折起.</p>
		  <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
		</div>
		<!-- 商品展示信息 -->
		<div class="page-header">
		  <h1>热销单品<small>为您推荐</small></h1>
		</div>
		<!-- 商品信息 -->
		<div>
			<div class="row">
			  <div class="col-sm-6 col-md-4">
			    <div class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			      <div class="caption">
			        <h3>丹麦曲奇饼干</h3>
			        <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
			        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
			      </div>
			    </div>
			  </div>
			</div>
			<div class="row">
			  <div class="col-sm-6 col-md-4">
			    <div class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			      <div class="caption">
			        <h3>丹麦曲奇饼干</h3>
			        <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
			        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
			      </div>
			    </div>
			  </div>
			</div>
			<div class="row">
			  <div class="col-sm-6 col-md-4">
			    <div class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			      <div class="caption">
			        <h3>丹麦曲奇饼干</h3>
			        <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
			        <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
			      </div>
			    </div>
			  </div>
			</div>
		</div>
		<nav aria-label="...">
		  <ul class="pager">
		    <li><a href="#">上一页</a></li>
		    <li><a href="#">下一页</a></li>
		  </ul>
		</nav>
		<!-- 页尾 -->
		<div align="center">
			<h3><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>联系我们
			<span class="label label-default">
			Info
			</span></h3>
			<div class="page-header">
			  <h4><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>联系电话:
			  <small>123456789</small></h4>
			  <h4><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>邮箱:
			  <small>123456@qq.com</small></h4>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入Jquery,因为bootstrap中有jquery的插件 -->
        <!-- 必须先引入jquery,然后引入bootstrap -->
        <script src="jquery/jquery-3.6.1.js" type="text/javascript"></script>
        <!-- 引入bootstrap -->
        <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
        <!-- 引入bootstrap的js文件 -->
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <!-- 导航栏部分 -->
        <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="#">
                <span class="glyphicon glyphicon-home" aria-hidden="true">主页
                </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="glyphicon glyphicon-gift" aria-hidden="true"></span>折扣商品
                <span class="sr-only">(current)</span></a></li>
                <li><a href="#">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>时季热销
                </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><a href="#">日常百货</a></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">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="键入搜索">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">
                <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>1
                </a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>我的账号
                    <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">
                    <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>个人中心
                    </a></li>
                    <li><a href="#">
                    <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>我的订单
                    </a></li>
                    <li><a href="#">
                    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>我的收藏
                    </a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">退出登录</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
        <!-- 介绍信息部分 -->
        <div class="jumbotron">
          <h1>新春佳节, 热销进行时!</h1>
          <p>超多优惠限时推出, 最低一折起.</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </div>
        <!-- 商品展示信息 -->
        <div class="page-header">
          <h1>热销单品<small>为您推荐</small></h1>
        </div>
        <!-- 商品信息 -->
        <div>
            <div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <img src="img/1.jpg" alt="...">
                  <div class="caption">
                    <h3>丹麦曲奇饼干</h3>
                    <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
                    <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <img src="img/1.jpg" alt="...">
                  <div class="caption">
                    <h3>丹麦曲奇饼干</h3>
                    <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
                    <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <img src="img/1.jpg" alt="...">
                  <div class="caption">
                    <h3>丹麦曲奇饼干</h3>
                    <p>正宗丹麦进口曲奇饼干,新鲜牛乳黄油,只为醇香滋味</p>
                    <p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <nav aria-label="...">
          <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">下一页</a></li>
          </ul>
        </nav>
        <!-- 页尾 -->
        <div align="center">
            <h3><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>联系我们
            <span class="label label-default">
            Info
            </span></h3>
            <div class="page-header">
              <h4><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>联系电话:
              <small>123456789</small></h4>
              <h4><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>邮箱:
              <small>123456@qq.com</small></h4>
            </div>
        </div>
    </body>
</html>

旧约Alatus
关注
专栏目录
用bootstrap做的index框架 index
10-20
用bootstrap做的index框架
Bootstrap系列之Z-index
老__L的博客
05-06 858
Z-index
使用bootstrap ui制作商城
weixin_67282071的博客
07-24 187
欣知
通过BootStrap框架制作商城网页
kior的博客
07-25 9348
BootStrap框架 通过官网查询代码实现内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="style...
基于bootstrap电子商城开发
03-09
基于bootstrap开发的电子商城首页项目，其使用的技术HTML+css3，
前端项目-bootstrap-drawer.zip
09-03
【前端项目-bootstrap-drawer.zip】是一个前端开发资源包，主要关注的是使用Bootstrap框架来实现抽屉式导航的设计。Bootstrap是一款广泛使用的开源HTML、CSS和JS框架，它为开发者提供了丰富的预定义组件，使得构建...
前端项目-bootstrap-magnify.zip
09-03
6. **index.html**：可能是一个简单的示例页面，展示了如何在实际项目中应用Bootstrap Magnify。 要将Bootstrap Magnify集成到你的前端项目中，你需要遵循以下步骤： 1. **下载**：首先，从GitHub或其他来源下载...
前端项目-knockout-bootstrap.zip
09-03
【前端项目-knockout-bootstrap.zip】是一个包含使用Knockout.js和Bootstrap框架构建的前端项目的压缩包。这个项目主要是为了展示如何将Knockout.js的强数据绑定功能与Bootstrap的UI组件结合，以创建功能丰富的、...
前端项目-startbootstrap-stylish-portfolio.zip
09-03
【标题】"前端项目-startbootstrap-stylish-portfolio.zip"是一个包含前端开发资源的压缩包，主要用于构建一个具有时尚设计风格的单页引导组合网站。Start Bootstrap是一个知名的在线模板库，提供了一系列基于...
前端项目-bootstrap-without-jquery.zip
09-03
标题中的“前端项目-bootstrap-without-jquery.zip”表明这是一个关于前端开发的项目，重点在于它使用Bootstrap框架，但不依赖jQuery。Bootstrap是一个流行的开源CSS框架，用于快速构建响应式和移动优先的网站。而...
水果蔬菜电子商务Bootstrap商城模板
12-10
水果蔬菜电子商务Bootstrap商城模板，
bootstrap网上购物商城.zip
07-29
bootstrap网上购物商城，仿天猫商城界面
基于bootstrap的移动web商城前端UI
07-06
这是移动web开发技术的课程设计源码，使用HTML+JavaScript+CSS完成移动商城的系列前端UI。基于bootstrap实现响应式网页。因为服务器不是我的，所以页面请求的服务器数据不保证时效性哦。
Bootstrap3通用商城模板
05-28
Bootstrap3通用商城模板是一款响应式的电商网站模板
6套响应html5后台,基于Bootstrap的商城后台管理系统模板Moltran
11-16
基于Bootstrap的商城后台管理系统模板Moltran，四套风格，个人觉得很漂亮，很好用，演示地址：http://demo.srfish.com/
day05
qswcss的博客
09-10 188
Title Toggle navigation ...
用bootStrap开发一个index首页
weixin_41049260的博客
05-21 2180
利用bootStrap的栅格系统给Blog首页开发一个首页的功能 数据有序的放入div中利用后台的交互用EL表达式取来放入其中 代码布局 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun...
bootstrap 实现商城布局
dxm809的博客
09-07 888
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> .
php+mysql+bootstrap框架响应式在线购物商城平台的设计与实现（附源码 调试 讲解）
最新发布
shenchengyv的博客
11-02 1030
摘 要随着计算机网络的普及，电子商务的兴起，网络支付以及网络安全体系逐渐完善，人们的生活进入了网络时代，越来越多的人习惯于乐于网上购物，消费者足不出户便可以买到自己喜欢的物品，只要轻轻点击鼠标选择订单，便能享受送货上门的服务。本购物商城基于B/S结构，采用PHP技术、MYSQL数据库开发设计。通过本购物商城，消费者足不出户就可以了解大量的商品信息，并可以实现网上购买，给消费者带来了极大的方便。
Vue.js教程：使用v-for渲染动态课程表
"本文将介绍如何使用Vue.js的`v-for`指令来渲染表格数据，以实现类似Excel的课程表展示效果。通过一个具体的JSON数据示例，展示如何处理嵌套的数据结构，并在HTML模板中使用`v-for`进行循环遍历。" Vue.js的`v-for`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值