1. Bootstrap다운
getbootstrap.com/docs/3.4/getting-started/#download
Getting started · Bootstrap
getbootstrap.com
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
* 3.4.1ver의 bootstrap을 설치함
설치 후, 압축 해제를 하고 css, js, font를 다음과 같이 붙여넣기함
"login.jsp"
다음과 같이 meta태그에 설정해주면 반응형 웹사이트를 만들 수 있다.
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset="UTF-8">
<meta name = "viewport" content ="width= device-width", initial-scale = "1">
<link rel = "stlyesheet", href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "navbar-header">
<button type = "button" class= "navbar-toggle collapsed"
data-toggle = "collapse" data-target="#bs-example-navbar-collabpse-1
aria-expanded = "false">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "main.jsp">JSP 게시판 웹 사이트</a>
</div>
</nav>
<script src = "https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset="UTF-8">
<meta name = "viewport" content ="width= device-width", initial-scale = "1">
<link rel = "stlyesheet", href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "navbar-header">
<button type = "button" class= "navbar-toggle collapsed"
data-toggle = "collapse" data-target="#bs-example-navbar-collabpse-1
aria-expanded = "false">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "main.jsp">JSP 게시판 웹 사이트</a>
</div>
<div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li><a href="main.jsp">메인</a></li>
<li><a href = "bbs.jsp">게시판</a></li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class ="dropdown-toggle"
data-toggle="dropdown" role = "button" aria-haspopup = "true"
aria-expanded="false">접속하기<span class="caret"></span></a>
</li>
</ul>
</div>
</nav>
<script src = "https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
'개발 공부 > 웹' 카테고리의 다른 글
| [Error] is missing one or more architectures required by this target: x86_64. (1) | 2022.08.03 |
|---|---|
| SublimeText로 php연동하기 (0) | 2021.10.06 |
| [JSP] 게시판 만들기 (0) | 2021.05.10 |
| [Java/Spring] Spring Boot (0) | 2021.05.03 |
| 4) CSS Selctor (0) | 2021.04.04 |