kBootstrap
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>
'쌍용교육(JAVA) > Bootstrap' 카테고리의 다른 글
| 쌍용교육 -Bootstrap수업 43일차 bootstrap(4) (0) | 2024.04.18 |
|---|---|
| 쌍용교육 -Bootstrap수업 43일차 bootstrap(3) (0) | 2024.04.18 |
| 쌍용교육 -Bootstrap수업 43일차 bootstrap(2) (0) | 2024.04.18 |
