Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 점보트론(jumbotron)


점보트론은 어떤 특정 컨텐츠나 정보를 두르러지게 하기위한 큰 박스를 말한다. 점보트론은 라운드 코너를 가진 회색 박스로 디스플레이 된다. 그 안에 폰트 사이즈 역시 확장된다.

이 점보트론는 다음과 같이 작성한다.

<div class="jumbotron">
    <div class="container">
        여기에 표시 할 내용을 쓰기
    </div>
</div>

이것은 회색 배경으로 채워진 패널 안에 내용을 표시한다. 이 점보트론은 분명히 강조하고 싶은 내용을 표시하는데 유용하다.

점보트론는 “well"라는 클래스도 준비되어 있다. class="jumbotron well"로 지정하면 윤곽이 약간 명확한 스타일이 된다.

(덧붙여서, “점보 트론"라고하는 것은, SONY가 개발한 대형 전광판을 통칭하기도 한다.)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>점보트론</h2>
        </div>
         
        <div class="jumbotron well">
            <div class="container">
            <p>점보트론 표시이다.  점보트론 표시이다. 
            점보트론 표시이다.  점보트론 표시이다. </p>
            </div>
        </div>

    </div>
</div>
     
</div>
 
</body>
</html>