Bootstrap03——主页优化

最新推荐文章于 2022-07-31 15:49:20 发布
最新推荐文章于 2022-07-31 15:49:20 发布
阅读量260 收藏 2
点赞数 4
分类专栏： bootstrap 文章标签： bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65975275/article/details/124641356
版权

hello，家人们好！上节课我们讲的是主页搭建，今天我们再来把代码优化一下~

top.jsp和insert.jsp 没有很大的改动，在上个文章中，这里就不重复写啦~

今天我们主要讲的是主页变化：

(今天的数据可能会有点变化，大家不用在意，哈哈)

🍊🍊index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- 引入jquery的库 必须在Bootstrap库之前 -->
<script src="jquery/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"
	rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
 
<style>
.carousel-item img {
	height: 500px;
}
</style>
</head>
<body>
	<jsp:include page="top.jsp">
		<jsp:param value="index" name="type" />
	</jsp:include>
	<div class="container">
		<%--轮播图 --%>
		<div id="myCarousel" class="carousel slide mb-3"
			data-bs-ride="carousel" data-bs-interval="1000">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="2"></button>
			</div>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="images/1.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/2.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/3.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
 
			</div>
			<%--轮播图切换上下图片按钮 --%>
			<button class="carousel-control-prev" type="button"
				data-bs-target="#myCarousel" data-bs-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</button>
			<button class="carousel-control-next" type="button"
				data-bs-target="#myCarousel" data-bs-slide="next">
				<span class="carousel-control-next-icon"></span>
			</button>
		</div>
		<div class="row">
        <div class="col-4">
            <div class="input-group mb-2">
                <label class="input-group-text" for="rows">显示个数</label>
                <select class="form-select" id="rows">
                    <option value="4">4</option>
                    <option value="8">8</option>
                    <option value="12">12</option>
                </select>
            </div>
        </div>
        <div class="col-4">
            <div class="input-group mb-2">
                <label class="input-group-text" for="rows">排序规则</label>
                <select class="form-select" >
                    <option value="4">根据商品价格</option>
                    <option value="8">根据商品库存</option>
                    <option value="12">根据商品销量</option>
                </select>
            </div>
        </div>
        <div class="col-4">
            <div class="input-group mb-2">
                <label class="input-group-text" for="rows">搜索商品</label>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-4">
        <button type="button" class="btn btn-success mb-2" data-bs-toggle="modal" data-bs-target="#m">
  添加商品
</button>
</div>
    </div>
		<%--商品网格显示 --%>
		<div class="row">
			<div class="col-md-2">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action active">
						全部 </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="row col-md-10">
				<ul class="nav nav-tabs mb-3" id="myTab">
					<li class="nav-item">
						<button class="nav-link active" id="home-tab" data-bs-toggle="tab"
							data-bs-target="#home" type="button">秒杀商品</button>
					</li>
					<li class="nav-item">
						<button class="nav-link" id="profile-tab" data-bs-toggle="tab"
							data-bs-target="#profile" type="button">热销商品</button>
					</li>
					<li class="nav-item">
						<button class="nav-link" id="contact-tab" data-bs-toggle="tab"
							data-bs-target="#contact" type="button">月度榜单</button>
					</li>
				</ul>
				<%--每一行占4个商品 每个card 占用三个格子 --%>
				<div class="card col-md-3 mb-2">
					<img src="images/pp1.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button data-bs-toggle="modal" data-bs-target="#exampleModal"
								type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp1.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp4.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp4.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp2.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp2.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp2.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
				<div class="card col-md-3 mb-2">
					<img src="images/pp2.png" class="card-img-top">
					<div class="card-body">
						<h5 class="card-title">奶茶</h5>
						<p class="card-text">杨枝甘露</p>
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-primary">🔍</button>
							<button type="button" class="btn btn-warning">🛒</button>
							<button type="button" class="btn btn-danger">🙅‍</button>
						</div>
					</div>
				</div>
 
			</div>
			<ul class="pagination pagination-lg justify-content-center">
				<li class="page-item active" aria-current="page"><span
					class="page-link">1</span></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>
			</ul>
 
		</div>
	</div>
	<div class="offcanvas offcanvas-start" tabindex="-1" id="car">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title">这是您的购物车</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
				aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<h1>😊😊😊😊😊</h1>
		</div>
	</div>
	<!-- Button trigger modal -->
 
 
<!-- Modal -->
<div class="modal fade" id="m" tabindex="-1" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="m">商品添加</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="" class="container">
 
<div class="mb-3">
  <label for="name" class="form-label">商品的名称</label>
  <input type="text" class="form-control" id="name" placeholder="请输入商品的名称">
</div>
 
 <div class="mb-3">
        <label for="topic" class="form-label">商品类别</label>
        <select id="topic" class="form-select">
            <option value="1">服装</option>
            <option value="2">家具</option>
            <option value="3">家电</option>
        </select>
    </div>
 
 <div class="mb-3">
       <label for="price" class="form-label">商品价格:$<span>500</span></label>
       <input type="range" min="1" max="1000" value="500" class="form-range" id="price">
    </div>
    
    <div class="mb-3">
       <label for="stock" class="form-label">商品库存:<span>250</span>件</label>
       <input type="range" min="1" max="500" value="250" class="form-range" id="stock">
    </div>
    <div class="mb-3">
  <label for="cover" class="form-label">商品的封面</label>
  <input type="file" class="form-control" id="cover" >
</div>
    <div class="mb-3">
  <label for="describe" class="form-label">商品描述</label>
  <textarea class="form-control" id="describe" rows="3"></textarea>
</div>
     <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" role="switch" id="disabled">
        <label class="form-check-label" for="disabled">当前商品是否上架</label>
    </div>
     <div class="mb-3">
        <button type="submit" class="btn btn-primary">增加</button>
        <button type="reset" class="btn btn-danger">重置</button>
    </div>
</form>
<script type="text/javascript">
  $("#price,#stock").mousemove(function(){
	  $(this).parent().find("span").text($(this).val())
  })
 
</script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
	<!-- Modal -->
	<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="exampleModal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">添加购物车</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"
						aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="input-group mb-3">
						<span class="input-group-text" >数量</span> <input
							type="number" class="form-control" placeholder="请输入添加的个数">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-bs-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="addCar()">添加</button>
				</div>
			</div>
		</div>
	</div>
	<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" >
    <div class="toast-header">
     
      <strong class="me-auto">天天商城</strong>
      <small>刚刚</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
     添加购物车成功😊
    </div>
  </div>
</div>
	<script type="text/javascript">
	
	
	
	let myModal = new bootstrap.Modal($("#exampleModal")[0])
	function addCar(){
		//调用模态框的隐藏方法
		myModal.toggle()
		new bootstrap.Toast($("#liveToast")[0]).show()
 
	}
	
	</script>
</body>
</html>

今天优化的代码主要是这个界面，嘻嘻~

咱们今天的内容讲完了，下期咱们讲一个新的东西~

今天也要记得微笑呀.

洛洛虎虎生威
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
详解webpack性能优化——DLL
11-26
Webpack性能优化的方式有很多种，本文之所以将 dll 单独讲解，是因为 dll 是一种最简单粗暴并且极其有效的优化方式。 在通常的打包过程中，你所引用的诸如：jquery、bootstrap、react、react-router、redux、antd、...
bootstrap在线定制工具
virgil
01-30 6192
四种最好的免费Bootstrap在线设计工具 Bootstrap带来了设计革命，本文介绍的四种免费Bootstrap在线设计工具，可视化所见所得设计网页，然后输出Html/CSS代码，其中有些甚至可以实现拖曳，也有可以设定自己的主题模板Theme。 1. Layoutit LayoutIt通过使用我们的拖放界面生成器帮助您简单快速地创建Bootstrap前端代码。它陈列出Bootstrap的
bootstrap3 表单构建器_牛X Vue+element-ui 可视化表单设计生成器
weixin_39887531的博客
11-20 1376
今天给大家推荐一款超逼格的Vue可拖拽表单设计器组件FormGenerator。form-generator 基于 Vue.js+ElementUI 高效表单设计组件，star高达1.7K+。功能特点可视化设计表单一键生成原生的vue单页表单代码，保持100%拓展性在线编辑器修改生成的代码，并实时预览表单栅格化布局支持表单校验快速查阅组件的官方文档vscode插件在上文的设计器的基础上，封装了一个...
bootstrap在线设计，快速定制自己的网站！
sidongxue2的专栏
02-05 1870
http://www.bootcss.com/p/layoutit/#
如何使用Bootstrap制作网页主界面、增加界面
WZJ278的博客
05-05 1192
今天使用Bootstrap做了一个网页的主界面和增加界面 先导入Bootstrap文件包 报错没有问题只是编译器识别出了问题 ，没有影响 并且在项目中编写导入语句
Bootstrap优化站点资源、响应式图片、传送带使用详解3
01-19
优化Bootstrap站点资源、完成Bootstrap响应式图片、让传送带支持手势，具体内容如下 A.优化站点资源 速度很重要。用户很关心。我们的站点必须加载够快，否则用户就会走人。SEO 也很重要。我们的站点必须加载够快，否...
bootstrap-4.0.0-beta.2.zip
11-20
支持选择弹性盒模型（flexbox）：这是项划时代的功能——只要修改一个Boolean变量，就可以利用flexbox的优势快速布局。 废弃了wells、thumbnails和panels，使用cards代替：Cards是个全新概念，但使用起来与wells、...
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
01-19
前言：一年前，博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ，通过该篇，确实可以实现bootstrapTable的冻结列效果，并且可以兼容...
无框架酒店管理系统——软件工程小组作业smartHotel_V10.zip
最新发布
04-08
通过使用酒店管理系统，酒店可以更高效地管理他们的业务，提高客户满意度，优化运营流程，并实现更好的业绩。这种系统通常能够帮助酒店提高工作效率，降低成本，增加收入，并提供更好的服务质量。 【引流】 Java、...
基于Bootstrap3的响应式Offcanvas菜单界面布局
12-11
这是一款基于Bootstrap3.x的响应式Offcanvas菜单界面布局特效。该界面布局在大屏幕设备上，菜单显示为正常的顶部菜单。在小屏幕设备中，菜单会收缩为下拉菜单，在点击主菜单按钮后，菜单面板从屏幕左边被推出来，效果非常的炫。
BootstrapOffCanvasNav是一款非常简单且实用的Bootstrap隐藏滑动侧边栏插件
08-07
Bootstrap Off-Canvas Nav是一款非常简单且实用的Bootstrap隐藏滑动侧边栏插件。该插件不需要添加额外的代码，仅使用原生Bootstrap导航菜单代码就可以生成效果非常炫酷的隐藏滑动侧边栏。
在线引入bootstrap3与jQuery（建议在webpack中不要引入过高版本bootstrap，容易出错，建议使用较新版本就好了）
热门推荐
weixin_44647865的博客
03-17 3万+
在线引入bootstrap3与jQuery（建议在webpack中不要引入过高版本bootstrap，容易出错，建议使用较新版本就好了） Bootstrap 3.3.0 js 文件（本人常用版本，在webpack中也一般使用3.x版本） <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> Bootstrap 3.3.0 css 文件 <link rel="styl
主流的Bootstrap 在线编辑器
油墨香^-^的博客
06-28 2050
尽管Bootstrap使得响应式网站开发变得简单很多，但是如果你不必手动写全部代码，事情会如何呢？如果你可以自由地选择你想要使用的Bootstrap组件、并可以把它们拖拽到画布中，事情会如何呢？ Bootstrap编辑器和生成器使得画界面原型、测试、搭建响应式网站变得简单。尽管每一个编辑器都不同，但是它们都利用Bootstrap庞大的组件库实现了拖入和移除组件功能。 Bootply Bootply被称为是Bootstrap的活动平台。它不但是一个Bootstrap的编辑器和生成器，同......
Bootstrap在线设计|快速原型构建|可视化布局
身披白袍的博客
09-28 6351
收集了一些网站，可以用来做快速的Bootstrap（其实就是LayoutIt） 相比一些集成工具，好处就是不用安装和注册，纯B/S、免费。对于我这种注册恐惧症患者，是相当大的利好。
15个最好的Bootstrap设计工具推荐
ht99582的专栏
02-18 2111
15个最好的Bootstrap设计工具推荐 发表于6小时前| 2482次阅读| 来源CSDN| 17 条评论| 作者王果 bootstrap前端开发EaselBootsnippBootstrap DesignerFancyboot 摘要：Bootstrap不单单是一个框架，更确切的说，它改变了整个游戏规则。该框架使得许多应用和网站的设计开发变得简便许多，而且它将大
Bootstrap03(界面优化)
weixin_65474399的博客
05-10 410
前言： 前两篇文章给大家介绍了一下bootstrap的一些基本使用方法，今天就接着前面的内容继续来给大家介绍用bootstrap来进行的界面优化。 目录 前言： 一，效果图： 菜单栏和分类的优化： 导航栏的优化： 二，代码详情： insert.html： index.html: 总结： 一，效果图： 菜单栏和分类的优化： 导航栏的优化： 新增了我的功能，可以实现登录和购物车界面的弹出 增加界面由新的界面变成了主界面弹出： 二，代码详情： i...
【小河今学 | Bootstrap-v3】响应式后台管理系统网页制作【纯布局】（上）
LB_laber的博客
07-31 1832
Bootstrap-v3制作响应式后台管理系统网页，布局
3款强大的BootStrap的可视化制作工具推荐
weixin_34090562的博客
09-05 2416
http://www.25xt.com/html5css3/7342.html     25学堂看到最近很多朋友在学习Bootstrap前端主题框架。顾让25学堂的小编给大家找来了3款适合Bootstrap初学者使用的可视化工具。希望对大家有所帮助。 第一款Bootstrap的可视化制作工具：Jetstrap Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。 ...
优化bootstrapTable
02-11
Bootstrap Table是一个强大的jQuery表格插件，为了优化它，您可以考虑以下几点： 1. 减少数据量：对于大数据集，减少数据量将有助于提高性能。您可以使用分页，懒加载或服务器端分页等技术。 2. 使用缓存：缓存...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值