부트 스트랩 Jumbotron 및 페이지 헤더

부트 스트랩 Jumbotron 및 페이지 헤더


점보트론 만들기
점보 트론 (jumbotron)은 특별한 내용이나 정보에 특별한 관심을 기울일 수있는 큰 상자를 나타냅니다.

점보 트론은 모서리가 둥근 회색 상자로 표시됩니다. 또한 내부 텍스트의 글꼴 크기를 확대합니다.

팁 : jumbotron 내부에는 다른 부트 스트랩 요소 / 클래스를 포함하여 거의 모든 유효한 HTML을 넣을 수 있습니다.

jumbotron을 생성하기 위해 <div>클래스와 함께 요소를 사용하십시오 .jumbotron:


컨테이너 내부의 점보트론
<div class="container">점보 트론을 화면 가장자리까지 펼치지 않으려면 점보 트론을 안에 넣으십시오 .

예
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>


컨테이너 외부의 점보트론
<div class="container">jumbotron을 화면 가장자리까지 확장하려면 jumbotron을 바깥쪽에 놓습니다.

예
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>

페이지 머리글 만들기
페이지 머리글은 섹션 구분선과 같습니다.

.page-header클래스는 제목 아래 수평 라인을 추가 (+ 요소 주위에 약간의 여분의 공간을 추가)

예제 페이지 머리글
<div>클래스 .page-header가 있는 요소 를 사용하여 페이지 머리글을 만듭니다.

예
<div class="page-header">
<h1>Example Page Header</h1>
</div>