这篇文章主要介绍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”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。