쌍용교육(JAVA)/Bootstrap

쌍용교육 -Bootstrap수업 42일차 bootstrap

구 승 2024. 4. 17. 17:44

 

k

https://getbootstrap.com/

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

 

s01_basic.html

<!-- Bootstrap CSS -->
DOcs에서 link를 찾아서 <head> 태그에 넣어줌 넣어줌.

 

Bootstrap JS

DOcs에서 script를 찾아서 <body> 태그에 넣어줌 넣어줌.

 

<!DOCTYPE html>
<html lang = "ko"><!-- 언어지정 -->
<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name ="viewport" content = "width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello Bootstrap</h1>
<!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

s02_container.html 

<!DOCTYPE html>
<html lang = "ko"><!-- 언어지정 -->
<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name ="viewport" content = "width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 <style type="text/css">
 	div{
 		border:1px solid #CCCCCC;
 		background:#EEEEEE;
 	}
 </style>
</head>
<body>
<h4>container - 좌우에 여백이 있음</h4>
<div class="container">
	내용
</div>
<br>

<h4>container-fluid - viewport를 꽉 채운 container</h4>
<div class="container-fluid">
	내용
</div>


<!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

큰 화면일 떄

 

작은 화면일 때는 여백이 없음

s03_container.html 

<!DOCTYPE html>
<html lang = "ko"><!-- 언어지정 -->
<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name ="viewport" content = "width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 <style type="text/css">
 	div{
 		border:1px solid #CCCCCC;
 		background:#EEEEEE;
 	}
 </style>
</head>
<body>
<!-- 
.container
.container-sm	small  		>=576px
.container-md	medium		>=768px
.container-lg	Large		>=992px
.container-xl	X-Large		>=1200px
.container-xxl	XX-Large	>=1400px
.container-fluid
 -->
<h4>모니터 해상도에 따른 container 적용</h4>
<div class="container-sm">내용</div>
<div class="container-md">내용</div>
<div class="container-lg">내용</div>
<div class="container-xl">내용</div>
<div class="container-xxl">내용</div>



<!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>