《基于BootStrap3的JSP项目实例教程》第5讲

本讲主要讲述JSP的taglib指令元素,tablib指令允许页面 使用标签库。使用标签,可以增加代码的重用程度,比如可以把一些需要迭代显示的内容做成一个标签,在每次需要迭代显示时,就使用这个标签。使用标签也使页面易于维护。

功能:声明JSP文件使用了自定义的标签,同时引用标签库,也指定了它们的标签的前缀。
语法:
<%@ taglib uri=” URIToTagLibrary ” prefix=”tagPrefix” %>
属性:

  • URI:统一资源标记符(Uniform Resource Identifier),根据标签的前缀对自定义的标签进行唯一的命名。URI可以是URL(Uniform Resource Locator)、URN(Uniform Resource Name)或一个路径(相对或绝对)。
  • prefix:在自定义标签之前的前缀。

下面将通过一个案例来使用JSP提供的JSTL标签库。JSTL 是JSP Standard Tag Library,JSP标准标签库的缩写。

  1. 如果要使用JSTL,需要下面的开发包,如图2-10所示。
    这里写图片描述
    图2-10 JSTL所需要的开发包
    这里写图片描述
    图2-11 hello3工程结构图
  2. 将图2-10中的两个文件拷贝到工程hello3中WEB-INF中的lib目录中,拷贝后如图2-11所示。
  3. 新建jstl.jsp页面,编辑后的代码如下所示。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSTL的使用</title>
</head>
<body>
<c:out value="hello jstl"></c:out> 
</body>
</html>
代码解释:<%@ taglib%>指令声明此JSP文件使用了自定义的标签,prefix定义了在页面里要引用标签时的前缀,uri用来表示标签描述符。该案例实现用标签输出“hello jstl”。
<c:out>提供了和<% out.println() %>相似的功能,所以运行的结果会在页面上打印出hello jstl的字符串,如图2-12所示。

这里写图片描述
图2-12 jstl使用结果

本讲义基于《基于BootStrap3的JSP项目实例教程》,提供Eclipse版本的源码和Intellij IDEA版本的源码(maven),附带有课件PPT和教案,需要的请到百度云:http://pan.baidu.com/s/1qWOejwg

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用Bootstrap项目实例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"> <title>Bootstrap Project</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="jumbotron"> <h1 class="display-4">Welcome to My Website</h1> <p class="lead">This is a simple Bootstrap project.</p> <hr class="my-4"> <p>It uses Bootstrap to create a responsive and modern website.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquet tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc. Sed euismod, nunc id aliquet tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc.</p> </div> <div class="col-md-6"> <h2>Services</h2> <ul> <li>Web Design</li> <li>Graphic Design</li> <li>SEO</li> </ul> </div> </div> </div> <footer class="bg-light text-center py-3"> <p>© 2020 My Website. All rights reserved.</p> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script> </body> </html> ``` 这个项目实例包括了一个导航栏、一个Jumbotron(大标题)、关于和服务的内容区块以及页脚。它使用了Bootstrap的CSS和JavaScript库来实现响应式和现代化的网站。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值