부트스트랩 점보트론 및 페이지 헤더
점보트론 만들기
점보트론은 특별한 콘텐츠나 정보에 대한 추가 주의를 환기시키기 위한 큰 상자를 나타냅니다.
점보트론은 모서리가 둥근 회색 상자로 표시됩니다. 또한 내부 텍스트의 글꼴 크기를 확대합니다.
팁: 점보트론 내부에는 다른 부트스트랩 요소/클래스를 포함하여 거의 모든 유효한 HTML을 넣을 수 있습니다.
<div>클래스 가 있는 요소 .jumbotron를 사용하여 점보트론을 만듭니다.
부트스트랩 튜토리얼
부트스트랩은 웹에서 반응형 모바일 우선 프로젝트를 개발하기 위해 가장 널리 사용되는 HTML, CSS 및 JS 프레임워크입니다.
컨테이너 내부 점보트론
<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">점보트론을 화면 가장자리까지 확장하려면 점보트론을 외부에 배치합니다.
예시
<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>