这篇文章主要介绍jsp页面中如何导入bootstrap,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
1.先在WebContent中导入以下三个文件(自行去官网下载:bootstrap,jQuery)
2.新建.jsp文件,比如index.jsp,现在<head>标签里导入下面这些文件,注意顺序不能颠倒
<script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script> <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
3.然后就可以使用boostrap了,直接给标签添加“class”即可。可以去这里选择自己想要的风格
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>Insert title here</title> <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script> <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped"> <thead> <th>id</th> <th>username</th> <th>password</th> </thead> <tbody> <tr> <td>1</td> <td>李疆</td> <td>111</td> </tr> <tr> <td>2</td> <td>李二</td> <td>222</td> </tr> <tr> <td>3</td> <td>张三</td> <td>333</td> </tr> </tbody> </table> <button type="button" class="btn btn-success">成功按钮</button> </body> </html>
4.运行结果
以上是“jsp页面中如何导入bootstrap”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页名称:jsp页面中如何导入bootstrap-创新互联
文章URL:https://www.cdcxhl.com/article4/doocie.html
成都网站建设公司_创新互联,为您提供建站公司、网站制作、静态网站、搜索引擎优化、网页设计公司、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联