Bootstrap Jumbotron and Page Header
Creating a Jumbotron
점보트론(jumbotron) 은 특별한 내용이나 정보에 특별한 주의를 끌게 하기 위해 사용되는 커다란 박스를 말합니다.
점보트론(jumbotron)은 모서리가 둥근 회색 박스로 표시되며, 그 안에 텍스트의 폰트 크기를 확대합니다.
Tip: 점보트론 내부에는 다른 Bootstrap elements/classes 를 포함한 거의 모든 유효한 HTML을 넣을 수 있다.
점보트론(jumbotron)을 생성하는데는 .jumbotron 클래스와 함께 <div>
요소를 사용한다. :
A Jumbotron Inside a Container
점보트론이 화면의 가장자리 까지 확장되지 않게 하려면, 콘테이너(container) 안에 점보트론을 놓는다.:
Example
<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>
Try it Yourself » A Jumbotron Outside a Container
점보트론을 화면의 가장자리까지 확장하려면, 콘테이너(container) 밖에 점보트론을 놓는다.
Example
<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>
Try it Yourself » Page Header 생성
페이지 헤더(page header)는 섹션 나누기(section divider)와 같다.
.page-header 클래스는 제목(heading) 아래에 수평 줄을 추가한다.
(+ 요소 주변에 약간의 여백을 추가):
Example Page Header
페이지 제목(page header)을 생성하려면 .page-header 클래스와 합께 <div>
요소를 사용하라.: