Jumbotron
- 일종의 대형 전광판
- 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한 큰 박스
예제 - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 컨테이너</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron alert-success">
<h1>Jumbotron</h1>
<p>둥근 모서리 사각형 영역</p>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Jumbotron</h1>
<p>컨테이너 밖에 있는 jumbotron : 살짝 둥근 모서리</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Jumbotron</h1>
<p>jumbotron-fluid 클래스 : 각진 모서리</p>
</div>
</div>
</body>
</html>
예제 - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 컨테이너</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron alert-primary">
<h1 class="text-center">지능형 웹서비스 풀스택 과정</h1>
<p class="text-center text-danger">
Java / MySQL / HTML / CSS / Javasctipr / jQuery / Bootstrap
Servlet / JSP / Spring Framework / AI API
</p>
<p class="text-center">
<a class="btn btn-primary btn-lg" href="#">커리큘럼 보기</a>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Jumbotron</h1>
<p>컨테이너 밖에 있는 jumbotron : 살짝 둥근 모서리</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Jumbotron</h1>
<p>jumbotron-fluid 클래스 : 각진 모서리</p>
</div>
</div>
</body>
</html>'Frontend > Bootstrap' 카테고리의 다른 글
| 이미지 (0) | 2021.12.07 |
|---|---|
| Button (0) | 2021.12.07 |
| 그리드 (Grid) (0) | 2021.12.07 |
| container; 컨테이너 (0) | 2021.12.07 |
| Bootstrap 개념 및 사용법 (0) | 2021.12.06 |
