* BootStrap이란?
- 트위터 개발자들이 아이콘, 모양, 색상, 디자인 등을 공개한 것이 bootstrap의 시작
- 태그에 클래스만 주더라도 자동으로 크기, 모양, 색상이 잡히게 됨
* 사용 방법
: getbootstrap.com에서
> cnd 복사해서 [bootstrap01]에 복사
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap01</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<style>
div{ border: 1px solid green;}
</style>
</head>
<body>
<div class="container">
<!-- 기본 격자 시스템(12) -->
<!-- 행 == row 열 == col -->
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<!-- div.col{$}*4 -->
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<!-- 컬럼 5개짜리 row를 추가 5~9 -->
<div class="row">
<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>
</div>
</body>
</html>
|
cs |
> snippets에 bootstrapCDN 추가
+ (bootstrapk.com)도 참고
- [bootstrap02.jsp]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap02.jsp</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>표 만들기</h3>
<table class="table table-striped table-hover">
<caption>CATALOG</caption>
<tr>
<th>NO</th>
<th>제품명</th>
<th>가격</th>
</tr>
<tr>
<td>1</td>
<td>김말이</td>
<td>5480</td>
</tr>
<tr>
<td>2</td>s
<td>햇반</td>
<td>25757</td>
</tr>
</table>
<button type="button">버튼</button>
<button type="button" class="btn">버튼</button>
<button type="button" class="btn btn-primary">버튼</button>
<button type="button" class="btn btn-success">버튼</button>
<button type="button" class="btn btn-warning">버튼</button>
<button type="button" class="btn btn-danger">버튼</button>
<button type="button" class="btn btn-info">버튼</button>
<button type="button" class="btn btn-light">버튼</button>
<button type="button" class="btn btn-dark">버튼</button>
<button type="button" class="btn btn-link">버튼</button>
<button type="button" class="btn btn-outline-secondary">버튼</button>
</div>
</body>
</html>
|
cs |
++
* jquery user interface : jquery를 사용하고, 그 위에다 사용하는 것
> 테스트 해보기
'web' 카테고리의 다른 글
| [XML] XML의 개념과 예시 (0) | 2023.05.07 |
|---|---|
| [AJAX] Ajax와 jquery (이미지 변경/로그인&회원가입/데이터 가져오기) (0) | 2023.05.07 |
| [AJAX] 텍스트 입력해서 데이터 출력 / 이미지 변경 (0) | 2023.05.07 |
| [jquery] jquery / css 응용 (0) | 2023.05.07 |
| [jsp] 게시판 만들기 (게시물 작성/수정/게시물 리스트) (0) | 2023.04.30 |