- 이것은 단순 Hero Unit으로서, 추천 콘텐츠나 정보에 대한 추가 주의를 환기시키기 위한 단순한 점보트론 스타일의 구성 요소입니다!
body { margin: 0 auto; max-width: 1024px; }
/* 점보트론 작성 Css */
.jumbotron {
padding: 2rem 1rem; margin-bottom: 1rem; border-radius: 0.5rem;
background-color: rgba(200, 200, 200, 0.1);
} @media (min-width: 576px) { /* 모바일 기기를 위한 미디어쿼리 */
.jumbotron { padding: 4rem 2rem; }
}
/* 둥근 테두리 없는 전체폭 점보트론 */
.jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; }
☞
.jumbotron jumbotron-fluid 클래스를 주고 그 내부 <div>에서
.container(및 .container-fluid) 클래스를 주면; 둥근 테두리 없는 전체폭 점보트론으로 변경할 수 있다:
<div class="jumbotron jumbotron-fluid"><div class="container"> .. </div></div>
* 이는 부트스트랩의 타이포그래피와 간격 유틸리티 클래스를 사용하여 더 큰 컨테이너 내에서 컨텐츠 공간을 확보합니다 Learn more..