SpringMVC03
BootStrap을 이용하여 기본 회원가입 페이지 만들기
네비게이션바 만들기
1.https://www.w3schools.com/bootstrap/bootstrap_navbar.asp 접속
2. 사용할 API 가져오기 (단일 jsp을 하나 더 생성하여 복붙하기)
- header.jsp
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>- jsp를 불러올때 사용하는 코드
<jsp:include page ="header.jsp"></jsp:include>로그인 폼 만들기
-
https://bootsnipp.com/tags/registration/3 접속해서 맘에 드는거 고르기
-
html/css 코드 둘다 복사해서 login.jsp에 추가
- html 부분은 전체복사할 필요 없으므로 구조에 맞게 복사하기
결과 화면
- login.jsp 전체코드
<%@page import="com.lgdx.entity.Board"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
/* form */
body {
background: #efefef;
}
.form-body {
background: #fff;
padding: 20px;
}
.login-form {
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-top: 3px solid #3e4043;
}
.innter-form {
padding-top: 20px;
}
.final-login li {
width: 50%;
}
.nav-tabs {
border-bottom: none !important;
}
.nav-tabs>li {
color: #222 !important;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
{
color: #fff;
background-color: #d14d42;
border: none !important;
border-bottom-color: transparent;
border-radius: none !important;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.428571429;
border: none !important;
border-radius: none !important;
text-transform: uppercase;
font-size: 16px;
}
.social-login {
text-align: center;
font-size: 12px;
}
.social-login p {
margin: 15px 0;
}
.social-login ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.social-login ul li {
width: 33%;
float: left;
clear: fix;
}
.social-login ul li a {
font-size: 13px;
color: #fff;
text-decoration: none;
padding: 10px 0;
display: block;
}
.social-login ul li:nth-child(1) a {
background: #3b5998;
}
.social-login ul li:nth-child(2) a {
background: #e74c3d;
}
.social-login ul li:nth-child(3) a {
background: #3698d9;
}
.sa-innate-form input[type=text], input[type=password], input[type=file],
textarea, select, email {
font-size: 13px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
width: 100%;
margin: 8px 0;
}
.sa-innate-form input[type=submit] {
border: 1px solid #e64b3b;
background: #e64b3b;
color: #fff;
padding: 10px 25px;
font-size: 14px;
margin-top: 5px;
}
.sa-innate-form input[type=submit]:hover {
border: 1px solid #db3b2b;
background: #db3b2b;
color: #fff;
}
.sa-innate-form button {
border: 1px solid #e64b3b;
background: #e64b3b;
color: #fff;
padding: 10px 25px;
font-size: 14px;
margin-top: 5px;
}
.sa-innate-form button:hover {
border: 1px solid #db3b2b;
background: #db3b2b;
color: #fff;
}
.sa-innate-form p {
font-size: 13px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<jsp:include page="header.jsp"></jsp:include>
<h2>Spring MVC 01</h2>
<div class="panel panel-warning">
<div class="panel-heading">Board Insert Page</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-body">
<ul class="nav nav-tabs final-login">
<li class="active"><a data-toggle="tab" href="#sectionA">Sign
In</a></li>
<li><a data-toggle="tab" href="#sectionB">Join us!</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="innter-form">
<form class="sa-innate-form" method="post">
<label>Email Address</label> <input type="text"
name="username"> <label>Password</label> <input
type="password" name="password">
<button type="submit">Sign In</button>
<a href="">Forgot Password?</a>
</form>
</div>
<div class="social-login">
<p>- - - - - - - - - - - - - Sign In With - - - - - - - - -
- - - -</p>
<ul>
<li><a href=""><i class="fa fa-facebook"></i>
Facebook</a></li>
<li><a href=""><i class="fa fa-google-plus"></i>
Google+</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="innter-form">
<form class="sa-innate-form" method="post">
<label>Name</label> <input type="text" name="username">
<label>Email Address</label> <input type="text"
name="username"> <label>Password</label> <input
type="password" name="password">
<button type="submit">Join now</button>
<p>By clicking Join now, you agree to hifriends's User
Agreement, Privacy Policy, and Cookie Policy.</p>
</form>
</div>
<div class="social-login">
<p>- - - - - - - - - - - - - Register With - - - - - - - -
- - - - -</p>
<ul>
<li><a href=""><i class="fa fa-facebook"></i>
Facebook</a></li>
<li><a href=""><i class="fa fa-google-plus"></i>
Google+</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">찬과장</div>
</div>
</div>
</body>
</html>
나는,,,,,,,,,나다