今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。

BootStrap的基本使用

  •  在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。
  •  我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。
  •  BootStrap上手是非常简单的。

BootStrap实操

  •  将我们所需要的包导进去 bootstrap-5.0.0-beta3-dist.zip和jquery-3.3.1.js

   

  •  在项目中我们需要带入该三条语句
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script><script src="js/jquery-3.3.1.js"></script>
  •   top01.jsp代码

      该代码中是一个导航栏，由于增加界面和首页都有导航栏就把导航栏写到一个jsp文件中，这样子在首页和增加界面之需要包含该界面就可以使用，减少代码量

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<script src=""></script>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script><title>首页</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body><!-- 首页 --><!-- 包含一个页面中的东西 --><jsp:include page="top01.jsp">   <jsp:param value="index" name="type"/></jsp:include><!-- 轮播图 --><!-- 容器 container让我们在界面的东西都离边框有距离，不会完全贴着边框，更加美观好看--><!-- data-bs-target 操作对象  data-bs-interval 设置移动时间--><div class="container"><div id="myCarousel" class="carousel slide mb-3" data-bs-ride="carousel" data-bs-interval="2000"><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/t1.jpg" class="d-block w-100" ><div class="carousel-caption d-none d-md-block"><h5>520来袭</h5><p>带上心爱的人去看日落</p></div></div><div class="carousel-item"><img src="data:images/t2.jpg" class="d-block w-100" ><div class="carousel-caption d-none d-md-block"><h5>商品大促销</h5><p>为庆祝51全场5折起</p></div></div><div class="carousel-item"><img src="data:images/t3.jpg" class="d-block w-100"><div class="carousel-caption d-none d-md-block"><h5>u先试用</h5><p>新品上新等你来试用</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><!-- 根据相对应的查询商品 --><!-- class属性放一个row是让他们在一行，如果没有row那么显示个数在排序规则上面，会分成两行 --><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><!-- 商品展示 --><!-- col-md-3 一行被分为12格，该图片占3格 --><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/default.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. ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...
		
    [ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...
    
		
    2. 
						
  2. 如何使用Bootstrap制作网页主界面、增加界面
		
    今天使用Bootstrap做了一个网页的主界面和增加界面 先导入Bootstrap文件包 报错没有问题只是编译器识别出了问题 ,没有影响 并且在项目中编写导入语句 这是这次web项目所用到的文件 *  ...
    
		
    3. 
						
  3. 使用Bootstrap制作网页主界面、增加界面
		
    上期讲了什么是Bootstrap,可以回顾一下哦(*╹▽╹*) Web开发之[Ajax][Bootsrtap]省市联动与无刷新分页_小阿飞_的博客-CSDN博客你会做省市联动和无刷新分页功能吗
    
		
    4. 
						
  4. UI设计实战篇——利用Bootstrap框架制作查询页面的界面
		
    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
    
		
    5. 
						
  5. 我的网页设计（网页页面制作二)
		
    嵌入网页页面制作出自个人的爱好,利用代码的编写融入产生web网页页面的应用效果,来进行页面的选择.搜索.这样可以大大的提高了参考者.浏览者的个人不同需要,从而也了解了对网页页面制作扩大范围和空间.也可 ...
    
		
    6. 
						
  6. html网页页面制作用到了什么技术,技术干货｜常用的HTML5网页制作软件，这些你有在用吗？...
		
    原标题:技术干货|常用的HTML5网页制作软件,这些你有在用吗? 1.Sublime Text Sublime Text是一个跨平台的代码编辑器,同时支持Windows.Linux.Mac OS X等 ...
    
		
    7. 
						
  7. html网页制作favicon页面，图片存在网页显示
		
    html网页制作favicon页面图片存在却无法显示 一.报错页面 二.解决方案 三.原理 一.报错页面 二.解决方案 1.你的favicon文件是否命名为favicon.ico:(文件调用名称是否错 ...
    
		
    8. 
						
  8. jsp网页制作html页面,JSP制作静态网页.ppt
		
    JSP制作静态网页 JSP制作静态网页 主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
    
		
    9. 
						
  9. 大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
		
    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
    
		
    10. 
						
  10. html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
		
    ul结合CSS制作网页相册滑动浏览效果 互联网   发布时间:2008-10-17 19:25:02   作者:佚名   我要评论 英文原文:Sliding Photograph Galleries  ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. python内置函数用来返回数值型序列中所有元素之和_Python内置函数______用来返回数值型序列中所有元素之和...
		
    2. 
						
  2. C段 192.168.1.15/28与192.168.1.16/28的区别
		
    3. 
						
  3. 虚拟机扩容后mysql无法使用_VMWARE 扩容踩坑记
		
    4. 
						
  4. python中的列表及注意事项
		
    5. 
						
  5. 小程序和vue语法对比_React语法开发微信小程序 Demo
		
    6. 
						
  6. 9. OD-PEID的入门及BASIC（VB）开发的程序破解
		
    7. 
						
  7. VMware虚拟机关闭后托盘运行设置
		
    8. 
						
  8. 技术宅的乐趣！网友编写出《流浪地球》“春节十二响”C语言源码
		
    9. 
						
  9. 【算法大赛直播周】如何赋予机器更多“想象力”？《计算广告》作者刘鹏带你解密深度学习
		
    10. 
						
  10. [转载][翻译]Go的50坑：新Golang开发者要注意的陷阱、技巧和常见错误[1]
		
    11. 
						
  11. win2019微软更新服务器,微软2019 Windows 10更新十一月版正式版推送
		
    12. 
						
  12. android标题白色_android主题Theme.Holo.Light下如何设置程序的标题字体颜色为白色
		
    13. 
						
  13. 100天带你系统入门VR/AR游戏开发，成为5G时代的“头号玩家”
		
    14. 
						
  14. 浩瀚科技PDA移动开单|盘点机 数据采集器 条码扫描开单微POS软件 现场打印开单...
		
    15. 
						
  15. 白茶清欢无别事,我在等风也等你,苦酒折柳今相离,无风无月也无你
		
    16. 
						
  16. elasticsearch geo DSL 和API对比学习-矩形/多边形/距离/距离排序/距离分段聚合/geo_shape内含-相交-相离
		
    17. 
						
  17. Atitit ffmpeg功能表 多媒体处理类库工具 音频视频  1.1.ffmpeg音视频合成  1.2.Atitit 视频音频分离 提取法 1.3.ffmpeg对视频封装和分离 使用ffmpeg对
		
    18. 
						
  18. SpringBoot后台搭建-创建restful接口，使用mybatisPlus实现分页
		
    19. 
						
  19. 大数据体系的4个热点，4个趋势和3个疑问
		
    20. 
						
  20. Pixar's USD format for windows--安装和使用演示
		
    21. 
		

	


热门文章
	

    
									
  1. ps人物碎片化飞溅效果特效怎么做
			
    2. 
						
  2. L298N模块接线纪实
			
    3. 
						
  3. .计算机自动关机或重启,电脑自动关机或重启怎么治
			
    4. 
						
  4. 记录一次opper R9s Plus 从发现循环重启到解决的过程
			
    5. 
						
  5. 灵飞经 ①洪武天下 第二章 紫禁深深
			
    6. 
						
  6. wincc安装服务器系统,wincc7.4安装硬件要求
			
    7. 
						
  7. Android开发之中文语音朗读
			
    8. 
						
  8. 怎么找好看的html颜色代码？
			
    9. 
						
  9. java 合并pdf_用iText分割和合并pdf文件
			
    10. 
						
  10. imap接收邮件服务器,配置 Outlook 从 IMAP 服务器接收邮件
			
    11.