지구정복

[Bootstrap] 1/19 | Bootstrp(각종 클래스) 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[Bootstrap] 1/19 | Bootstrp(각종 클래스)

nooh._.jl 2021. 1. 19. 17:21
728x90
반응형

복습 및 배울내용

UI
jQuery Core - DOM($)
	jQuery UI - manager / jQuery Mobile(hybrid, mobile web) - client
	W2UI
	...
	* highcharts
	java - jfreechart
		네이버 데이터랩

	PC / 태블릿 / 스마트폰의 디자인을 통합 => 반응성 => bootstrap

	bootstrap에서 중요한 것 - grid(12개의 영역)
	bootstrap에서는 디자인 template를 많이 제공(기본 디자인이 있는 것)
	(참고사이트: https://startbootstrap.com/templates)
	https://getbootstrap.com - themes

	복잡성을 해결하기 위해 라이브러리들 등장
	angular.js
	react.js
	vue.js

	가장 어려운 것이 문법검사가 가장 어렵다
	이를 위해 마이크로소프트에서 Typescript를 만들었다.
	Typescript에서 문법검사가되고 이를 컴파일하면 js가 나온다.

 

1. BootStrap

더보기

ㅇ Color사용하기

글자에 다양한 색깔을 줄 수 있다.

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<p class="text-muted">Text Color</p>
	<p class="text-primary">Text Color</p>
	<p class="text-success">Text Color</p>
	<p class="text-info">Text Color</p>
</div>

</body>
</html>

배경색 설정

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

글자색깔
<div class="container-fluid">
	<p class="text-muted">Text Color</p>
	<p class="text-primary">Text Color</p>
	<p class="text-success">Text Color</p>
	<p class="text-info">Text Color</p>
<hr>
배경색깔
	<p class="bg-primary text-white">Text Background Color</p>
	<p class="bg-success text-white">Text Background Color</p>
	<p class="bg-info text-white">Text Background Color</p>
	<p class="bg-warning text-white">Text Background Color</p>
	<p class="bg-danger text-white">Text Background Color</p>
	<p class="bg-secondary text-white">Text Background Color</p>
	<p class="bg-dark text-white">Text Background Color</p>
	<p class="bg-light text-white">Text Background Color</p>
</div>


</body>
</html>

 

ㅇ Table 사용하기

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div class="container-fluid">
<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
 </table>
</div>


</body>
</html>
<table class="table table-bordered">

 여러가지 디자인을 동시에 줄 수가 있다.

<table class="table table-dark table-hover">

 테이블 컬럼명에만 색상을 줄 수 있다. 이는 버전을 바꾸고 사용해야 한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<table class="table table-hover">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
</div>

 

 반응성 테이블 만들기

<div class="table-responsive">

 

 ㅇ Images 사용하기

이클립스 웹콘텐츠폴더에 images란 폴더를 만든다. 그리고 아무 이미지나 그 안에 집어넣는다.

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<img src="./images/이시하라사토미6.jpg"/>
	<img src="./images/이시하라사토미6.jpg" class="rounded"/><br>
	<img src="./images/이시하라사토미6.jpg" class="rounded-circle"/>
	<img src="./images/이시하라사토미6.jpg" class="img-thumbnail"/><br>
</div>


</body>
</html>

 

 이미지 배치하기

<div class="container-fluid">
	<img src="./images/이시하라사토미6.jpg" class="mx-auto d-block" style="width:50%/">
</div>

 

ㅇ Alert 사용하기

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 

</head>
<body>

<div class="container-fluid">
	<div class="alert alert-warning alert-dismissible fade show" role="alert">
		<strong>Success!!</strong>Alert Message
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>	
</div>

</body>
</html>

 

ㅇ Button 사용하기

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 

</head>
<body>

<div class="container-fluid">
	<button type="button" class="btn">Basic</button>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-link">Link</button>
</div>

</body>
</html>

각 버튼타입별로 적용가능하다.

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 

</head>
<body>

<div class="container-fluid">
	<button type="button" class="btn btn-primary">Primary</button><br>
	<a href="#" class="btn btn-info">Info1</a><br>
	<input type="button" class="btn btn-info" value="Info2"/><br>
	<input type="submit" class="btn btn-info" value="Info2"/><br>
</div>

</body>
</html>

 

 ㅇ Button Group 사용

버튼을 그룹화하기

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script> 

</head>
<body>

<div class="container-fluid">
	<div class="btn-group bt-group-lg">
		<button type="button" class="btn btn-primary">Apple</button>
		<button type="button" class="btn btn-primary">Samsung</button>
		<button type="button" class="btn btn-primary">Google</button>
	</div>
</div>

</body>
</html>

 

드롭다운버튼 만들기

부트스트랩과 css버전을 다른 것으로 변경했다.

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

버튼그룹
<div class="container-fluid">
	<div class="btn-group bt-group-lg">
		<button type="button" class="btn btn-primary">Apple</button>
		<button type="button" class="btn btn-primary">Samsung</button>
		<button type="button" class="btn btn-primary">Google</button>
	</div>
<br><hr>
드롭다운버튼그룹<br>
	<div class="btn-group">
		<button type="button" class="btn btn-primary">Apple</button>
		<button type="button" class="btn btn-primary">Samsung</button>
		<div class="btn-group">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Google</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="#">Tablet</a>
				<a class="dropdown-item" href="#">Smartphone</a>
			</div>
		</div>
	</div>
</div>


</body>
</html>

 버튼 옆에 뱃지만들기

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

버튼그룹
<div class="container-fluid">
	<div class="btn-group bt-group-lg">
		<button type="button" class="btn btn-primary">Apple</button>
		<button type="button" class="btn btn-primary">Samsung</button>
		<button type="button" class="btn btn-primary">Google</button>
	</div>
<br><hr>
드롭다운버튼그룹<br>
	<div class="btn-group">
		<button type="button" class="btn btn-primary">Apple</button>
		<button type="button" class="btn btn-primary">Samsung</button>
		<div class="btn-group">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Google</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="#">Tablet</a>
				<a class="dropdown-item" href="#">Smartphone</a>
			</div>
		</div>
	</div>
<br><hr>
버튼 옆에 뱃지만들기<br>
	<button type="button" class="btn btn-primary">
		Message <span class="badge badge-light">4</span>
	</button>
</div>



</body>
</html>

 

ㅇ Progressbar 사용

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<div class="progress">
		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
	</div>
</div>

</body>
</html>

 멀티프로그레스바 

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
기본프로그래스바<br>
	<div class="progress">
		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
	</div>
	
멀티프로그래스바<br>
	<div class="progress">
		<div class="progress-bar bg-success" style="width:40%">Free Space</div>
		<div class="progress-bar bg-warning" style="width:10%">Warning</div>
		<div class="progress-bar bg-danger" style="width:20%">Danger</div>
	</div>
</div>

</body>
</html>

 

 ㅇ Spinner Button 사용

<%@ 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>

<!-- 부트스트랩 css와 js파일 / jquery ajax js파일  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<button class="btn btn-primary">
		<span class="spinner-border spinner-border-sm"></span>
	</button>
	
	<button class="btn btn-primary">
		<span class="spinner-border spinner-border-sm"></span>Loading..
	</button>
	
	<button class="btn btn-primary" disabled>
		<span class="spinner-border spinner-border-sm"></span>Loading..
	</button>
	
	<button class="btn btn-primary" disabled>
		<span class="spinner-grow spinner-grow-sm"></span>Loading..
	</button>
</div>

</body>
</html>

 

ㅇ Pagenation 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <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>
</div>

</body>
</html>

 

 

ㅇ List Groups 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
	<ul class="list-group">
		<li class="list-group-item d-flex justify-content-between align-items-center">Inbox
			<span class="badge badge-primary badge-pill">12</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-center">Ads
			<span class="badge badge-primary badge-pill">50</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-center">Junk
			<span class="badge badge-primary badge-pill">99</span>
		</li>		
	</ul>
</div>

</body>
</html>

 

 ㅇ Card 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<div class="card" style="width:400px">
		<img class="card-img-top" src="./images/iu2.jpg" style="width:100%">
		<div class="card-body">
			<h4 class="card-title">아이유</h4>
			<p class="card-text">존예</p>
			<a href="#" class="btn btn-primary">바로가기</a>
		</div>
	</div>
</div>

</body>
</html>

 

ㅇ Dropdown 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<div class="dropdown">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
		<div class="dropdown-menu">
			<h5 class="dropdown-header">Dropdown header1</h5>
			<a class="dropdown-item" href="#">Link 1</a>
			<a class="dropdown-item" href="#">Link 2</a>
			<a class="dropdown-item" href="#">Link 3</a>
			<h5 class="dropdown-header">Dropdown header2</h5>
			<a class="dropdown-item" href="#">Another Link1</a>
		</div>
	</div>
</div>

</body>
</html>

 

 ㅇ Collapse 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div class="container-fluid">
	<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
	<div id="demo" class="collapse">
		내용 1<br>
		내용 2<br>
		내용 3<br>
		내용 4<br>
	</div>
</div>

</body>
</html>

 

 accordion 형태로 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div class="container-fluid">
<div id="accordion">
	
	<div class="card">
		<div class="card-header">
			<a class="card-link" data-bs-toggle="collapse" href="#collapseOne">
				Collapsible Group Item #1
			</a>
		</div>
		<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
			<div class="card-body">
				Lorem ipsum..
			</div>
		</div>
	</div>
	
	<div class="card">
		<div class="card-header">
			<a class="collaspsed card-link" data-bs-toggle="collapse" href="#collapseTwo">
				Collapsible Group Item #2
			</a>
		</div>
		<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
			<div class="card-body">
				Lorem ipsum..
			</div>
		</div>
	</div>
	
	<div class="card">
		<div class="card-header">
			<a class="collapsed card-link" data-bs-toggle="collapse" href="#collapseThree">
				Collapsible Group Item #3
			</a>
		</div>
		<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
			Lorem ipsum..
		</div>
	</div>
	</div>
</div>

</body>
</html>

 

 ㅇ Navs 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div id="home" class="container tab-pane active"><br>
    <h3>HOME</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div id="menu1" class="container tab-pane fade"><br>
    <h3>Menu 1</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div id="menu2" class="container tab-pane fade"><br>
    <h3>Menu 2</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  </div>
</div>

</div>

</body>
</html>

 

 

ㅇ Navigaion Bars

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<a class="navbar-brand" href="./images/고윤정1.jpg">
		<img style="width:100%" src="./images/고윤정1.jpg">
	</a>
	
	<ul class="navbar-nav">
		<li class="nav-item">
			<a class="nav-link" href="#">Link 1</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">Link 2</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">Link 3</a>
		</li>
	</ul>
</nav>

<div class="container-fluid">
	<h3>Brand / Logo</h3>
	<p>The .navbar-brand class is used to highlight the brand/logo/project name of your page.</p>
</div>

</body>
</html>

 

 

ㅇ Form 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

	<form class="form-inline" action="/action_page.php">
		<label for="email">Email:</label>
		<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
		<lable for="pwd">Password:</lable>
		<input type="password" class="form-control" id="pwd" placeholer="Enter password" name="pswd">
		
		<div class="form-check">
			<label class="form-check-lable">
				<input class="form-check-input" type="checkbox" name="remember">Remember me
			</label>	
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</form>

</div>

</body>
</html>

 입력여부를 검사할 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

<form action="/action_page.php" class="was-validated">
	<div class="form-group">
  		<label for="uname">Username:</label>
  		<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
  		<div class="valid-feedback">Valid.</div>
 		<div class="invalid-feedback">Please fill out this field.</div>
	</div>
	<div class="form-group">
  		<label for="pwd">Password:</label>
 		<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
  		<div class="valid-feedback">Valid.</div>
  		<div class="invalid-feedback">Please fill out this field.</div>
	</div>
	<div class="form-group form-check">
  		<label class="form-check-label">
    		<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
    		<div class="valid-feedback">Valid.</div>
    		<div class="invalid-feedback">Check this checkbox to continue.</div>
  		</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

</div>

</body>
</html>

 

 ㅇ Input Group Button

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

<h1>Input Group Buttons</h1>
	<div class="input-group mb-3">
  		<div class="input-group-prepend">
    		<button class="btn btn-outline-primary" type="button">Basic Button</button>  
  		</div>
  		<input type="text" class="form-control" placeholder="Some text">
	</div>

	<div class="input-group mb-3">
  		<input type="text" class="form-control" placeholder="Search">
  		<div class="input-group-append">
    		<button class="btn btn-success" type="submit">Go</button>  
   		</div>
	</div>

	<div class="input-group mb-3">
  		<input type="text" class="form-control" placeholder="Something clever..">
  		<div class="input-group-append">
    		<button class="btn btn-primary" type="button">OK</button>  
    		<button class="btn btn-danger" type="button">Cancel</button>  
   		</div>
	</div>
	
</div>

</body>
</html>

 

ㅇ Custom Forms

토글 스위치 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

  <form action="/action_page.php">
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="switch1" name="example">
      <label class="custom-control-label" for="switch1">Toggle me</label>
    </div>
    <br>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
	
</div>

</body>
</html>

 

 

range 클래스 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

  <form action="/action_page.php">
    <label for="customRange">Custom range</label>
    <input type="range" class="custom-range" id="customRange" name="points1">
    <label for="defaultRange">Default range</label>
    <input type="range" id="defaultRange" name="points2">
    <p><button type="submit" class="btn btn-primary">Submit</button></p>
  </form>
	
</div>

</body>
</html>

 

파일 업로드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">

<form action="/action_page.php">
	<p>Cunstom file:</p>
	<div class="custom-file mb-3">
		<input type="file" class="custom-file-input" id="customFile" name="filename">
		<label class="custom-file-label" for="customFile">Choose file</label>
	</div>
	
	<p>Default file:</p>
	<input type="file" id="myFile" name="filename2">
	
	<div class="mt-3">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>
	
</div>

<script type="text/javascript">
$(".custom-file-input").on("change", function() {
	let fileName = $(this).val().split("\\").pop();
	$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
})
</script>

</body>
</html>

 

ㅇ Carousel 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
	.carousel-inner img{
		width: 100%;
		height: 100%
	}
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div id="demo" class="carousel slide" data-bs-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="./images/고윤정2.jpg" />
			<div class="carousel-caption">
				<h3>Los Angeles</h3>
			    <p>We had such a great time in LA!</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="./images/고윤정3.jpg" />
			<div class="carousel-caption">
				<h3>Los Angeles</h3>
			    <p>We had such a great time in LA!</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="./images/고윤정4.jpg" />
			<div class="carousel-caption">
				<h3>Los Angeles</h3>
			    <p>We had such a great time in LA!</p>
			</div>
		</div>
	</div>
	
	<ul class="carousel-indicators">
		<li data-bs-target="#demo" data-bs-slide-to="0" class="active"></li>
		<li data-bs-target="#demo" data-bs-slide-to="1"></li>
		<li data-bs-target="#demo" data-bs-slide-to="2"></li>
	</ul>
	
	<a href="#demo" class="carousel-control-prev" data-bs-slide="prev">
		<span class="carousel-control-prev-icon"></span>
	</a>
	<a href="#demo" class="carousel-control-next" data-bs-slide="next">
		<span class="carousel-control-next-icon"></span>
	</a>
</div>

</body>
</html>

 

 

ㅇ Modal 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
	.carousel-inner img{
		width: 100%;
		height: 100%
	}
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>

</head>
<body>

<div class="container-fluid">
	
<h2>Modal Example</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
	Open modal
</button>

<div class="modal" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<h4 class="modal-title">Modal Heading</h4>
				<button type="button" class="close" data-bs-dismiss="modal">&times;</button>
			</div>
			
			<div class="modal-body">
				Modal body..
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
			</div>
			
		</div>
	</div>
</div>
	
</div>

</body>
</html>

 

ㅇ Tooltip 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">bottom</a>
  <a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">left</a>
  <a href="#" data-toggle="tooltip" data-placement="rigth" title="Hooray!">rigth</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 동일조건

'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글

[myBatis] 1/21 | Model1 게시판 myBatis로 만들기, 어노테이션(기본sql문, 게시판만들기), Maven(개념, 사용)  (0) 2021.01.21
[myBatis] 1/20 | myBatis(개념및특징, 설치및설정, 실습(select, join, insert, delete, update, drop, create), jsp에서 myBatis사용(우편번호검색기))  (0) 2021.01.21
[Bootstrap] 1/18 | SPA개념 및 특징, W2UI사용하기(레이아웃, 이벤트, 영역 안에 데이터넣기, 그리드, 우편번호검색기), BootStrap사용하기(반응성, typography, mark, blockquote, dl)  (0) 2021.01.18
[JavaScript-jQuery, Ajax] 1/15 | jQuery UI 사용하기(DatePicker, Dialog, Menu, Tabs, Tab으로 구구단만들기, Tooltip), Model2 게시판 jQuery UI으로 구현하기  (0) 2021.01.15
[JavaScript-jQuery, Ajax] 1/14 | jQuery에서 Ajax사용, jQuery UI 사용하기(기본사용, button, event생성, 버튼icon추가, checkbox, radioButton, progressbar, slider, spinner, selectmenu, autocomplete, accordion, 구구단, 우편번호검색..  (0) 2021.01.14
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles more
Comments