[basic] BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기

목차

 

.jumbotron (점보트론)

.page-header (페이지헤더)

 

.jumbotron (점보트론)

모서리가 둥근 회색 간판 상자

1. 상자 안의 텍스트 글씨를 키움. 

2. 최대너비 설정: .container 밖에 배치.

 

---

 

.container 클래스 안 : 최대너비 X

 

<div class="container">

    <div class="jumbotron">

        <h1>홈짱닷컴</h1> 

        <p>Homzzang.com</p>       

        <p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>

    </div>

    <p>보통 글씨</p> 

</div>

 

결과보기

---

 

.container 클래스 밖 : 최대너비  O

 

<div class="jumbotron">

    <h1>홈짱닷컴 Homzzang.com</h1>    

    <p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>

</div>

<div class="container">

    <p>홈페이지 제작 유지보수 관리</p> 

</div>

결과보기

---

 

.container 클래스 밖:  최대너비 O

 

<div class="jumbotron">

    <h1>홈짱닷컴 Homzzang.com</h1>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>

   <div class="container">

       <p>홈페이지 제작 유지보수 관리</p> 

   </div>

</div>

 

결과보기 

.page-header (페이지헤더)

<div class="page-header">

  <h1>홈짱닷컴 Homzzang.com <small> 홈페이지 제작관리</small></h1>

</div>

 

결과보기

---

 

<h1> 태그를 둘러싸는 옅은 회색 배경상자 역할.

 

CSS 정의

 

.jumbotron {

    padding-right: 60px;

    padding-left: 60px;

    border-radius: 6px;

}

.jumbotron {

    padding-top: 30px;

    padding-bottom: 30px;

    margin-bottom: 30px;

    color: inherit;

    background-color: #eee;

}

 

---

 

.page-header {

    padding-bottom: 9px;

    margin: 40px 0 20px;

    border-bottom: 1px solid #eee;

}