-
[BootStrap] HTML 테이블에 부트스트랩 적용하기Web/JSP 2019. 7. 10. 17:34
HTML Table BootStrap(부트스트랩) 적용하기.
JSP파일을 만들다가 테이블 디자인을 예쁘게 꾸미고 싶었다.
하지만, 부트스트랩을 사용해본적이 없어 검색을 하여 적용하였다.
다음에 또 보고 참고하기 위해 메모.
1. 부트스트랩 홈페이지에서 Compiled CSS and JS를 다운로드 한다.
2. 이클립스에서 다이나믹 웹프로젝트를 만들고 jsp파일을 생성한다.
3. jsp파일에 표를 생성한다.
-------------------------부트스트랩을 적용하기 위해서
4. webContents에 1번에서 다운로드한 압축파일을 풀어서 넣는다.
(압축풀면 css, js 두개의 폴더가 있을 것이다. 이 폴더 두개를 넣는다.)
5. 이클립스에 적용한다.
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form> <table class="table table-striped" >1,2,3,4번 줄이 추가할 태그들이다.
js/bootstrap.min.js는 src밑의 파일 경로 이름이므로, 혹시 css, js상위 폴더가 있다면 경로를 다르게 적용해야한다.
6. table 태그의 class안에 원하는 디자인을 적용하면 된다.
ex.
<table class="table">
<table class="table table-striped">
<table class="table table-bordered">
<table class="table table-hover">
<table class="table table-condensed">
7. ex를 각각 실행해본 후 입맛에 맞는걸 사용하면 되겠다.
반응형'Web > JSP' 카테고리의 다른 글
[JSP] Directives (JSP지시어) (0) 2019.07.11 [JSP] JSP의 request , response주요 메소드, 리다이렉트, 포워드 (0) 2019.07.11 [JSP] JSP 기본 태그 (0) 2019.07.10 JSP란? 자바 서버 페이지 (0) 2018.12.16 Servlet이란? (0) 2018.12.16