목차

Bootstrap Jumbotron

  • description : Bootstrap Jumbotron
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-23


Bootstrap Jumbotron and Page Header

Creating a Jumbotron

점보트론은 특별한 콘텐츠 또는 정보에 특별한 주의를 기울이게 하는 큰 상자를 나타냅니다.

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

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

.jumbotron 클래스와 함께 <div> 요소를 사용하여 jumbotron을 만듭니다.

Jumbotron Inside Container

점보트론이 화면 가장자리까지 확장되지 않도록 하려면 <div class = "container"> 내부에 점보트론을 배치합니다.

예제

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile-first projects on the web.

This is some text.

This is another text.


Jumbotron Outside Container

점보트론을 화면 가장자리까지 확장하려면, 점보트론을 <div class = "container"> 외부에 배치합니다.

예제

Jumbotron outside the container

Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile-first projects on the web.

This is some text.

This is another text.


Creating a Page Header

페이지 헤더(page header)는 섹션 구분자(section divider)와 같습니다.

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

Example Page Header

.page-header 클래스와 함깨 <div>를 사용하여 페이지 헤더를 만듭니다:

예제

This is some text.

This is another text.