今天用bootstrap框架排出主页面和增加界面，我们这使用的是bootstrap5，以下是bootstrap5官网链接。

简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。https://v5.bootcss.com/docs/getting-started/introduction/

目录

一、目录展示

二、代码展示

顶部界面：top.jsp

主界面：index.jsp

增加界面：insert.jsp

三、效果图展示

顶部

主页

增加界面

进入官网后，先下载bootstrap的css和js，也就是我圈起来那个，下好是个文件夹，我们要使用bootstrap需要导入这个文件夹

在左侧的目录栏中可找你所需要的组件，然后找你喜欢的样式，把代码复制粘贴到项目中，然后改一下就好了。

话不多说，以下是页面排版的展示。

一、目录展示

以下是在webapp文件夹底下的文件，记得将你下好的bootstrap导入到webapp中哦，images文件夹中放入你所需要的图片。

二、代码展示

顶部界面：top.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<%--导航栏--%>
<nav class="navbar navbar-dark bg-primary mb-2"><div class="container-fluid"><a class="navbar-brand" href="#">天天商城</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#linkText"aria-controls="navbarText" aria-expanded="false"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="linkText"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link" href="index.jsp" id="index">首页</a></li><li class="nav-item"><a class="nav-link" href="insert.jsp" id="insert">增加商品</a></li></ul><script>$("#<%=request.getParameter("type")%>").addClass("active")</script></div></div>
</nav>
</body>
</html>

主界面：index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><title>Title</title><!-- 必须在所有css之前导入 不然不生效 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 导入jQuery --><script src="js/jquery-3.3.1.js"></script><!-- Bootstrap CSS --><link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"><!-- Bootstrap JS --><script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script><style>.carousel-item img{height: 400px;}</style></head>
<body><!-- 把top界面导入进来 -->
<jsp:include page="component/top.jsp"><jsp:param name="type" value="index"/>
</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="data: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="data: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="data: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-3"><div class="input-group mb-3"><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-3"><div class="input-group mb-3"><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-3"><div class="input-group mb-3"><label class="input-group-text" for="rows">搜索商品</label><input type="text" class="form-control"></div></div></div><%--商品网格显示--%><div class="row"><%--一行显示4个商品 每个card占用三格--%><div class="card col-md-3 mb-2"><img src="data:images/4.jpeg" class="card-img-top" alt=""><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">												


											

使用bootstrap排版相关推荐
	

    
						
  1. Bootstrap排版之标题
		
    Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...
    
		
    2. 
						
  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式
		
    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
    
		
    3. 
						
  3. Bootstrap 排版
		
    2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...
    
		
    4. 
						
  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本对齐,段落中超出屏幕部分文字自动换行...
		
    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
    
		
    5. 
						
  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移
		
    <!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
    
		
    6. 
						
  6. Bootstrap 排版正文
		
    对正文排版,Bootstrap定义的默认字体栈为 "Helvetica Neue".Helvetica.Arial. sans-serif,它们也是主流操作系统默认支持的标准字体. ...
    
		
    7. 
						
  7. Bootstrap 排版和链接
		
    Bootstrap 为屏幕.排版和链接专门设置了以下全局样式: 移除了body的 margin,这样内容就会紧贴浏览器窗口的边缘: 设置了 body 的背景颜色 background-color: w ...
    
		
    8. 
						
  8. Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
		
    Bootstrap中的排版 1. 排版 标题部分 文本部分 对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
    
		
    9. 
								
  9. bootstrap排版实战
		
    bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. java音乐播放器脚本之家,分享|3 个开源的音乐播放器：Aqulung、Lollypop 和 GogglesMM...
		
    2. 
						
  2. [机器学习]回归--Polinomial Regression 多项式回归
		
    3. 
						
  3. 远程用power shell 管理vmware view 池用户
		
    4. 
						
  4. wstring和string简单正则表达式使用
		
    5. 
						
  5. JavaScript NaN 属性
		
    6. 
						
  6. 图解TCP/IP第一章学习
		
    7. 
						
  7. 包头市民族中学2021高考成绩查询,2021庆阳高考成绩查询系统入口
		
    8. 
						
  8. validform 一行代码完成所有验证
		
    9. 
						
  9. c++中sort()的用法
		
    10. 
						
  10. puppet连载八：linux优化模块
		
    11. 
						
  11. OpenCV4学习笔记（17）——常用导数算子
		
    12. 
						
  12. 网站分析基础概念之初访者
		
    13. 
						
  13. 黑鲨helo支持html吗,黑鲨2和黑鲨helo区别买哪个好
		
    14. 
						
  14. 简单几步，教你在服务器上实现量化交易（程序化交易）
		
    15. 
						
  15. Java诊断工具-Arthas入门与实践
		
    16. 
						
  16. iOS网络监测如何区分2、3、4G（Reachability）
		
    17. 
						
  17. 刚刚随便GOOGLE和BAIDU了下PIPO和BLOG
		
    18. 
						
  18. 什么是PCB Testpoints
		
    19. 
						
  19. linux从入门开始——Linux必备手册（Linux关键词，Linux命令总结）
		
    20. 
						
  20. Bug管理系统BugFree
		
    21. 
		

	


热门文章
	

    
									
  1. 2022深圳杯C题自动驾驶电动物料车换电站选址及调度方案
			
    2. 
						
  2. ps游戏在什么系统下开发_游戏陪玩系统源码搭建，游戏陪玩软件开发，这些关键你都知道吗？...
			
    3. 
						
  3. DWF文件怎么用CAD打开？DWF输入CAD步骤
			
    4. 
						
  4. rar和zip文件的区别
			
    5. 
						
  5. 台式电脑怎么进入修复计算机,电脑为什么提示自动修复？电脑开机提示自动修复的解决办法...
			
    6. 
						
  6. 关于Markdown编辑器的使用
			
    7. 
						
  7. 支付宝当面付扫码支付支付后不回调_支付宝餐饮蓝海计划2020年推出最新版
			
    8. 
						
  8. 矢量三维电磁铁的技术参数
			
    9. 
						
  9. Java日志体系详解
			
    10. 
						
  10. c++双向列表释放_VOC气候舱 学校人造草TVOC释放检测气候舱T/JYBZ 012—2019
			
    11.