bootstrap 4버전: https://getbootstrap.com/docs/4.6/layout/overview/
Overview
Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
getbootstrap.com
w3schools bootstrap 4버전 튜토리얼: https://www.w3schools.com/bootstrap4/default.asp
Bootstrap 4 Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
01css.jsp
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<style>
.myBtn {
padding: 5px;
border: 2px solid green;
background-color: blue;
color: white;
}
</style>
<title>Insert title here</title>
</head>
<body>
<button class="myBtn">my button</button>
<hr>
<button class="myBtn">new Button</button>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
jsp 파일의 <style> 에서 css 코드 작성하여 스타일 설정 가능
아래에서 button 태그가 있고 이 태그의 class 를 myBtn 으로 작성함
그리고 이 클래스로 <style> 에 불러와 스타일 설정
02css-external
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/mystyle.css">
</head>
<body>
<button class="myBtn">new Button</button>
</body>외부에 있는 css 파일을 사용하려면 link element 의 href attribute 로 css 파일이 있는 경로 입력해준다
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/mystyle.css">
resource > css > mystyle.css 파일 ↓
.myBtn {
padding: 5px;
border: 2px solid green;
background-color: blue;
color: white;
}
.myHeader {
background-color: black;
color: white;
}
03css-external
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/mystyle.css">
</head>
<body>
<button class="myBtn">button</button>
<h1 class="myHeader">Lorem ipsum dolor sit amet.</h1>
<hr>
<button class="btn btn-primary">Lorem.</button>
</body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> 에 의해
해당 bootstrap 에 있는 css 설정을, btn btn-primary 클래스를 작성함으로써 적용시킴
04container
<head>
<style>
.container {
background-color: skyblue;
}
div {
background-color: silver;
}
.container-fluid {
background-color: springGreen;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et repellat maxime tempore consequatur delectus culpa dolorum quos omnis neque repellendus quo quisquam itaque cupiditate sed molestiae placeat provident dolores incidunt!</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cupiditate illum dolorum a mollitia accusamus. Laboriosam voluptatum saepe dolores veritatis eos ipsum dolorem adipisci inventore eius consequatur iste perferendis beatae.</div>
<div class="container-fluid">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cupiditate necessitatibus iure error animi voluptates iste architecto assumenda ad ipsum? Quisquam a pariatur aspernatur nisi doloremque deleniti quos delectus molestias.</div>
</body>
container (class) 는 어떤 content 를 담을 때 주로 div 와 같이 사용됨
.container : 응답하는 고정 너비 컨테이너를 제공함
.container-fluid : 뷰포트의 전체 너비에 걸쳐 전폭 용기를 제공함
05grid
<head>
<style>
.row {
background-color: silver;
}
.row :nth-child(even) {
background-color: seaGreen;
}
.row :nth-child(odd) {
background-color: springGreen;
}
</style>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil suscipit et hic blanditiis ullam nam vero quas tempore beatae ex minus. Tenetur eos qui odio cum porro commodi itaque.</p>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam expedita alias molestiae nulla adipisci aut dolore eligendi pariatur. Ipsum dolore aperiam natus quo saepe illum perferendis obcaecati dignissimos quia id.</p>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col">Lorem.</div>
<div class="col">Repellat!</div>
<div class="col">Possimus.</div>
<div class="col">Repellat.</div>
<div class="col">Ex.</div>
<div class="col">Hic.</div>
<div class="col">Adipisci.</div>
<div class="col">Pariatur!</div>
<div class="col">Corporis?</div>
<div class="col">Ex.</div>
<div class="col">Nesciunt!</div>
<div class="col">Totam!</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col">Lorem.</div>
<div class="col">Illum.</div>
<div class="col">Atque.</div>
<div class="col">Ipsum!</div>
</div>
</div>
</body>
col 은 같은 비율을 가지게 하며, 가로로 배열한다. (ex. 4개이면 1/4씩)
06grid
<head>
<style>
.row {
background-color: silver;
}
.row :nth-child(even) {
background-color: seaGreen;
}
.row :nth-child(odd) {
background-color: springGreen;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-5">Lorem.</div>
<div class="col-2">Necessitatibus!</div>
<div class="col-3">Dignissimos.</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col-4">2</div>
<div class="col">3</div>
</div>
</div>
</body>
col 에서 숫자 있는 것과 없는 것을 함께 쓰면, 숫자가 있는 게 그 만큼의 크기를 가지고, 나머지가 같은 비율로 나눠가짐
07grid
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h2>SIDE MENU</h2>
<h3>Lorem.</h3>
<h3>Iure.</h3>
<h3>Dicta.</h3>
<h3>Necessitatibus!</h3>
<h3>Provident.</h3>
<h3>Ut?</h3>
<h3>Debitis!</h3>
<h3>Qui?</h3>
<h3>Aut.</h3>
<h3>Mollitia?</h3>
<h3>Excepturi.</h3>
<h3>Officiis.</h3>
<h3>Ut.</h3>
<h3>Aperiam.</h3>
<h3>Illum.</h3>
<h3>Sunt.</h3>
<h3>Distinctio!</h3>
<h3>Explicabo.</h3>
<h3>Facilis.</h3>
<h3>Ad!</h3>
</div>
<div class="col-7">
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis laborum iure rerum molestias officia. Voluptate quo itaque officiis sapiente quisquam esse reprehenderit dolorum provident beatae cum aliquid nobis eaque.</p>
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit maiores blanditiis quibusdam eaque cupiditate nisi veritatis! Consectetur reiciendis nulla enim odit non rem tempore laborum ratione omnis harum voluptatem quam.</div>
<div class="col">Recusandae impedit pariatur iusto ab ipsa reprehenderit omnis quibusdam unde facere hic distinctio doloribus dicta. Repellendus cumque ipsum iusto doloremque laboriosam ab numquam excepturi beatae animi quos tempora aliquid quo?</div>
<div class="col">Eligendi ducimus culpa quisquam tempora error commodi et a totam quis quaerat pariatur inventore incidunt animi exercitationem sequi fuga ipsum est placeat nesciunt nemo dignissimos. Excepturi laboriosam nesciunt magni iusto!</div>
</div>
<h1>Sequi corporis aspernatur.</h1>
<p>Et cum corporis magni id laboriosam nisi consectetur repellat tempore totam dolorum quisquam officia sapiente autem rem beatae natus eum distinctio harum incidunt quam! Itaque inventore eaque cum possimus dolore.</p>
<h1>Nostrum neque excepturi!</h1>
<p>Qui asperiores mollitia voluptate praesentium velit eos quibusdam libero est consequatur molestiae sint et quod sed excepturi a voluptatum quidem fugiat suscipit minus delectus! Ratione vel voluptates sapiente maiores facilis!</p>
<h1>Animi veniam deleniti!</h1>
<p>Nulla aliquid ducimus delectus maxime recusandae aliquam nostrum ullam qui explicabo unde facere doloremque fugit esse numquam laborum earum sint nemo. Voluptate dicta numquam quis minima recusandae! Quidem quaerat laborum.</p>
<h1>Nesciunt impedit consequuntur?</h1>
<p>Facere magnam atque temporibus accusamus ea natus placeat quaerat quisquam aperiam cumque architecto commodi reiciendis dicta dolorum blanditiis corrupti laborum consequatur maiores obcaecati quod saepe reprehenderit autem recusandae iste illum.</p>
<h1>Sequi id ipsam.</h1>
<p>Sint quam iste ratione incidunt corporis aut rem debitis minus atque similique optio fugit fuga magnam perferendis adipisci dicta quibusdam ipsa laboriosam ex necessitatibus obcaecati iusto assumenda temporibus repellendus ab!</p>
<h1>Facere nisi dicta.</h1>
<p>Quidem exercitationem error maiores nihil optio consequuntur cupiditate inventore commodi temporibus magni enim voluptas assumenda quaerat quibusdam architecto. Cumque eius dolor inventore at commodi maiores ab omnis aliquid odit libero?</p>
<h1>Dicta delectus magni.</h1>
<p>Ipsum laborum aliquam et. Et sunt iusto officia provident non accusantium dolores modi dicta voluptatibus rem quam recusandae nemo esse accusamus odit blanditiis asperiores excepturi sed cumque distinctio soluta voluptatum.</p>
<h1>Vitae sint ullam.</h1>
<p>Obcaecati cupiditate similique nulla dolorem amet aliquid doloremque tempora quo minima quam nisi velit nostrum quae repellendus animi natus quia sequi vero. Cupiditate voluptates temporibus cum voluptatum laudantium harum quo!</p>
<h1>Earum nemo aut!</h1>
<p>Architecto repudiandae rerum laborum modi quisquam vitae beatae asperiores recusandae tempora officiis obcaecati eveniet maxime veritatis totam optio nam quas aperiam voluptate tenetur facere mollitia dicta soluta aspernatur nisi possimus.</p>
</div>
<div class="col">
<h1>광고</h1>
</div>
</div>
</div>
</body>
container-fluid, row, col 사용
08grid
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<style>
.row :nth-child(odd) {
background-color: seaGreen;
}
.row :nth-child(even) {
background-color: skyBlue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">Lorem.</div>
<div class="col">Consequatur.</div>
<div class="col">Totam.</div>
<div class="col">Obcaecati!</div>
<div class="col">Sint!</div>
<div class="col">Natus.</div>
<div class="col">Eveniet.</div>
<div class="col">Culpa?</div>
<div class="col">Cupiditate.</div>
<div class="col">Soluta?</div>
<div class="col">Ea.</div>
<div class="col">Velit?</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1">Lorem.</div>
<div class="col-1">Repellendus.</div>
<div class="col-1">Ut!</div>
<div class="col-1">Magnam.</div>
<div class="col-1">Itaque.</div>
<div class="col-1">Totam!</div>
<div class="col-1">Animi?</div>
<div class="col-1">Iste?</div>
<div class="col-1">Itaque?</div>
<div class="col-1">Aspernatur?</div>
<div class="col-1">Placeat.</div>
<div class="col-1">Ipsam.</div>
</div>
</div>
</body><div class="col">Lorem</div>
<div class="col-1">Lorem</div>
차이점 보기
모르겠고 col 은 두줄이나 차지하고, col-1 은 글자 다 잘리는건 알겠음
09grid
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<style>
.row :nth-child(odd) {
background-color: seaGreen;
}
.row :nth-child(even) {
background-color: skyBlue;
}
#shop-container {
background-color: gold;
height: 288px;
}
#login-container {
background-color: silver;
}
#ad-container, #login-container {
height: 135px;
}
#paper-container > .row {
height: 72px;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<div id="ad-container">
..광고...
</div>
<div id="paper-container">
<div class="row">
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
</div>
<div class="row">
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
</div>
<div class="row">
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
</div>
<div class="row">
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
<div class="col-2">paper</div>
</div>
</div>
</div>
<div class="col-4">
<div id="login-container">
...login...
</div>
<div id="shop-container">
...mall...
</div>
</div>
</div>
</div>
</body>container, row, col-8, ad-container, paper-container, col-2, col-4, login-container, shop-container
10button
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<button class="btn">Lorem.</button>
<button class="btn btn-primary">Perferendis!</button>
<button class="btn btn-secondary">Expedita.</button>
<button class="btn btn-success">Expedita?</button>
<button class="btn btn-info">Repellendus.</button>
<button class="btn btn-warning">Adipisci.</button>
<button class="btn btn-danger">Sit.</button>
<button class="btn btn-dark">Facilis.</button>
<button class="btn btn-light">Est.</button>
<button class="btn btn-link">Commodi.</button>
<hr>
<button class="btn btn-lg">Lorem.</button>
<button class="btn btn-primary btn-lg">Perferendis!</button>
<button class="btn btn-secondary btn-sm">Expedita.</button>
<button class="btn btn-success btn-sm">Expedita?</button>
<button class="btn btn-info btn-xs">Repellendus.</button>
<button class="btn btn-warning btn-xs">Adipisci.</button>
<button class="btn btn-danger">Sit.</button>
<button class="btn btn-dark">Facilis.</button>
<button class="btn btn-light">Est.</button>
<button class="btn btn-link">Commodi.</button>
<hr>
<!-- outline buttons -->
<button class="btn btn-outline-primary">Perferendis!</button>
<button class="btn btn-outline-secondary">Expedita.</button>
<button class="btn btn-outline-success">Expedita?</button>
<button class="btn btn-outline-info">Repellendus.</button>
<button class="btn btn-outline-warning">Adipisci.</button>
<button class="btn btn-outline-danger">Sit.</button>
<button class="btn btn-outline-dark">Facilis.</button>
<button class="btn btn-outline-light">Est.</button>
<button class="btn btn-outline-link">Commodi.</button>
<hr>
<!-- button.btn.btn-primary>lorem1 -->
<button class="btn btn-primary">Lorem.</button>
<input type="button" value="lorem" class="btn btn-primary">
<input type="submit" value="submit" class="btn btn-primary">
<a href="#" class="btn btn-primary">lorem</a>
</body>
btn btn-블라블라 로 되어있는 클래스명들 확인하기
11form
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row ">
<div class="col-12">
<form action="../12jstl/25process.jsp" method="post">
<div class="form-group">
<label for="titleInput1">책 제목</label>
<input type="text" name="title" class="form-control" id="titleInput1">
<small id="titleHelp" class="form-text text-muted">책 제목을 입력해주세요.</small>
</div>
<div class="form-group">
<label for="writerInput1">작성자</label>
<input type="text" name="writer" class="form-control" id="writerInput1">
</div>
<div class="form-group">
<label for="priceInput1">가격</label>
<input type="number" name="price" class="form-control" id="priceInput1">
</div>
<div class="form-group">
<label for="publisherInput1">출판사</label>
<input type="text" name="publisher" class="form-control" id="publisherInput1">
</div>
<div class="form-group">
<label for="stockInput1">재고</label>
<input type="number" name="stock" class="form-control" id="stockInput1">
</div>
<button type="submit" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</body>
<form action="경로" method="post"> 도 있네
글자들(책제목, 작성자, 가격, 출판사, 재고) 은 label 태그에 작성됨
- attribute 는 for
input 태그도 그대로인데, class, id 가 추가됨
small 태그로 작은 글씨 (부연설명) 추가
div 의 class 로 "form-group" 작성
12navbar
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<hr>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
등록
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">목록</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">삭제</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false"> 관리 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</body>넓은 화면에서 보이는 창 ↓
작은 화면에서는 숨겨짐 ↓
작은 화면에서 목록펼침 ↓
navbar navbar-expand-lg navbar-light bg-light
navbar-brand
navbar-toggler
navbar-toggler-icon
collapse navbar-collapse
navbar-nav mr-auto
...
https://getbootstrap.com/docs/4.6/components/navbar/
13navbar
<%@ taglib prefix="my" tagdir="/WEB-INF/tags/14bootstrap" %>
<head>
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container">
<my:navBar active="3" menus="Home,About,Info,Address"/>
</div>
<div class="container">
<my:navBar active="1" menus="Home,About,Info,Address"/>
</div>
<div class="container">
<my:navBar active="1" menus="Menu,Add,Modify,Delete"/>
</div>
</body>
WEB-INF > tags > 14bootstrap > navBar.tag 파일
navBar.tag
<%@ attribute name="active" %>
<%@ attribute name="menus" %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<c:forEach items="${fn:split(menus, ',') }" var="menu" varStatus="status">
<li class="nav-item ${status.count eq active ? 'active' : '' }">
<a href="#" class="nav-link">${menu }</a>
</li>
</c:forEach>
</ul>
</div>
</nav>* 주의 - tag 파일 쓸 때, <%@ taglib prefix="my" tagdir="/WEB-INF/tags/14bootstrap" %> 써주기
jsp
div 세개 각각에서 class 로 container 를 줌
각 div 안에 tag 걸림 - attribute 로 active, menus 를 줌
tag
여기에서 nav class 들 작성함
14modal.jsp
+ 25book-list.jsp, t20table.tag
bootstrap - components - modal - live demo 에서 코드 복사
https://getbootstrap.com/docs/4.6/components/modal/#live-demo
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>t20table.tag
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>#</th>
<th>제목</th>
<th>저자</th>
<th>가격</th>
<th>출판사</th>
<th>재고</th>
</tr>
</thead>
<tbody>
<c:forEach items="${books }" var="book" varStatus="status">
<tr>
<c:url value="25delete.jsp" var="deleteUrl">
<c:param name="index" value="${status.index }" />
</c:url>
<c:url value="25modify.jsp" var="modifyUrl">
<c:param name="index" value="${status.index }" />
</c:url>
<td>
<%-- <a class="btn btn-danger" href="${deleteUrl }"><i class="fas fa-trash-alt"></i></a> --%>
<button type="button" class="btn btn-danger delete-modal-button" data-href="${deleteUrl }" data-toggle="modal" data-target="#exampleModal">
<i class="fas fa-trash-alt"></i>
</button>
<a href="${modifyUrl }" class="btn btn-secondary">
<i class="fas fa-edit"></i>
</a>
</td>
<td>${status.count }</td>
<td>
<c:out value="${book.title }" />
</td>
<td>
<c:out value="${book.writer }" />
</td>
<td>
<c:out value="${book.price }" />
</td>
<td>
<c:out value="${book.publisher }" />
</td>
<td>
<c:out value="${book.stock }" />
</td>
</tr>
</c:forEach>
</tbody>
</table>25book-list.jsp
<%@ taglib prefix="my" tagdir="/WEB-INF/tags/13tag"%>
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<h1>책 목록 (${fn:length(books) } 권) w/ TAG</h1>
<a href="25book-form.jsp">책 등록하기</a>
<c:if test="${empty books }">
<p>아직 저장된 책이 없습니다.</p>
</c:if>
<c:if test="${not empty books }">
<my:t20table />
</c:if>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">삭제하시겠습니까?</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<a id="modal-accept-button1" href="#" class="btn btn-primary">확인</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(".delete-modal-button").click(function() {
let href = $(this).attr("data-href");
$("#modal-accept-button1").attr("href", href);
});
});
</script>
</body>
button 이 modal 을 trigger 하려면 data-target 의 attribute 값이 modal 의 id element 값과 일치해야 함
15carousel
그러니까, 1. class 작성으로 bootstrap 의 스타일을 이용할 수 있고,
2. 원하는 스타일을 bootstrap 에서 찾아서 코드를 통째로 복사하여 사용할 수 있음
이때, - 설명을 읽거나, - 코드를 보고 각 element와 class 를 파악하여 일부 변형, 추가, 삭제하여 원하는대로 사용할 수 있음
bootstrap - components - carousel : https://getbootstrap.com/docs/4.6/components/carousel/
(w3school b4 carousel: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp)
carousel: 이미지 슬라이드 (with control, with indicator, with caption 등)
w3schools 의 try it yourself 에서 이미지 세개 다운로드 ↓
https://www.w3schools.com/bootstrap4/la.jpg
https://www.w3schools.com/bootstrap4/chicago.jpg
https://www.w3schools.com/bootstrap4/ny.jpg
같은 크기로 만드는 사전작업 필요함
원본 크기는 달라도 비율은 같아야 함 (1100*500 으로 11:5 비율)
resource 에 image 폴더를 만들어서 이미지 파일들 저장
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error eius ipsa nam amet dolores atque molestias placeat rerum doloribus voluptatem asperiores sit vel iure excepturi earum tempora architecto commodi optio.</p>
<button class="myBtn" data-number="0">0</button>
<button class="myBtn" data-number="1">1</button>
<button class="myBtn" data-number="2">2</button>
</div>
<div class="col">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleSlidesOnly" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleSlidesOnly" data-slide-to="1"></li>
<li data-target="#carouselExampleSlidesOnly" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath }/resource/image/la.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/resource/image/chicago.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/resource/image/ny.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleSlidesOnly" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleSlidesOnly" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".myBtn").click(function() {
let number = Number($(this).attr("data-number"));
$("#carouselExampleSlidesOnly").carousel(number);
});
});
</script>
</body>
사진 엑박떠서 파일명 다시 확인했고, jpg 를 jpeg 로 바꾸니까 정상적으로 뜸
연습해보기↓
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Insert title here</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath }/resource/image/la.jpeg" class="d-block w-100" alt="la image">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/resource/image/chicago.jpeg" class="d-block w-100" alt="chicago image">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/resource/image/ny.jpeg" class="d-block w-100" alt="ny image">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
bootstrap 에서 with controls 코드 복사했고, 파일 경로 입력함
잘 된다!
16pagination
bootstrap - components - pagination : https://getbootstrap.com/docs/4.6/components/pagination/
<div class="container">
<div class="row">
<div class="col">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
17flexbox
<style>
.my-container {
background-color: silver;
display: flex;
justify-content: center;
}
.my-item {
background-color: seaGreen;
}
.my-container2 {
background-color: skyblue;
}
.my-item2 {
background-color: gold;
}
.my-container3 {
height: 300px;
background-color: silver;
/* display: flex;
justify-content: center;
align-items: center; */
}
.my-item3 {
height: 50px;
width: 200px;
background-color: gold;
}
</style>
<title>Insert title here</title>
</head>
<body>
<!-- .my-container>.my-item>lorem3 -->
<div class="my-container">
<div class="my-item">Lorem ipsum dolor.</div>
</div>
<!-- .my-container2>.my-item2>lorem3 -->
<div class="my-container2 d-flex justify-content-center">
<div class="my-item2">Lorem ipsum dolor.</div>
</div>
<hr>
<!-- .my-container3>.my-item3{center} -->
<div class="my-container3 d-flex justify-content-center align-items-center">
<div class="my-item3">center</div>
</div>
복습
flexbox 를 직접 줄수도 있지만(container1), bootstrap 에 있는 d-flex 라는 클래스를 사용할 수도 있음(container2)
d-flex → display:flex
justify-content-center → justify-content:center
3은 align-items-center 추가
18pagination
<!-- .container>.row -->
<div class="container">
<div class="row">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<hr>
<!-- .container>.row>.col -->
<div class="container">
<div class="row">
<div class="col">
<!-- nav>ul.pagination -->
<nav>
<ul class="pagination">
<c:forEach begin="1" end="10" var="i">
<c:if test="${param.cpage eq i }" var="current">
<li class="page-item active">
<a href="#" class="page-link">${i }</a>
</li>
</c:if>
<c:if test="${not current }">
<li class="page-item">
<a href="#" class="page-link">${i }</a>
</li>
</c:if>
<!-- li.page-item>a.page-link -->
</c:forEach>
</ul>
</nav>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col">
<!-- nav>ul.pagination -->
<nav>
<ul class="pagination">
<c:forEach begin="1" end="10" var="i">
<li class="page-item ${param.cpage eq i ? 'active' : '' }">
<a href="#" class="page-link">${i }</a>
</li>
</c:forEach>
</ul>
</nav>
</div>
</div>
</div>
'course 2021 > JSP' 카테고리의 다른 글
| JSP16 - 13customTag (0) | 2021.11.24 |
|---|---|
| JSP15 - 12jstl (0) | 2021.11.22 |
| JSP14 - 11el(3) (0) | 2021.11.21 |
| JSP13 - 11el(2) (0) | 2021.11.20 |
| JSP12 - 11el (0) | 2021.11.19 |
