부트 스트랩을 사용하는 헤더가있는 상자

Question

헤더가있는 상자를 만들려고합니다. 우리는 CSS [http://getbootstrap.com/]을위한 부트 스트랩을 사용하고 있습니다. 상자는 아래처럼 보입니다. 반응 형 디자인의 일부이며 span9 클래스를가집니다. 어떤 도움이라도 대단히 감사합니다.

CSS와 HTML

.container:before, .container:after { display:table; content:""; } 
 

 
.container:after { clear:both; } 
 

 
.container { width:500px; margin:0 auto; border:1px solid #fff; 
 
    box-shadow:0px 2px 7px #292929; 
 
    -moz-box-shadow: 0px 2px 7px #292929; 
 
    -webkit-box-shadow: 0px 2px 7px #292929; border-radius:10px; 
 
    -moz-border-radius:10px; 
 
    -webkit-border-radius:10px; background-color:#ffffff; } 
 

 
.mainbody { height:250px; width:500px; border: solid #eee; 
 
    border-width:1px 0; } 
 

 
.header, .footer { height: 40px; width:50px; border : 1px solid red; 
 
    padding: 5px; } 
 

 
.footer { background-color: whiteSmoke; 
 
    -webkit-border-bottom-right-radius:5px; 
 
    -webkit-border-bottom-left-radius:5px; 
 
    -moz-border-radius-bottomright:5px; 
 
    -moz-border-radius-bottomleft:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; }

<div class="header container"> 
 
    Header 
 
</div> 
 
<div class="container"> 
 
    <div class="mainbody"> 
 
    main body 
 
    </div> 
 
    <div class="footer"> 
 
    footer 
 
    </div> 
 
</div>

감사

Answer 1

내가 SPE하기로 결정 :

이

내가 같은를 달성하기 위해 노력했다 방법입니다 이것을 위해 시간을 할애하십시오. 그러나 다음 번에 시도해보십시오. 여러분이 시도한 것을 우리에게 제공해 주시길 바랍니다. 그래서 우리는 여러분이 한 실수를하지 마십시오.

당신은 jQuery를, 그리고 부트 스트랩 (CSS와 JS)가 필요합니다.

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Dropdown link</a></li> 
    <li><a href="#">Dropdown link</a></li> 
    </ul> 
</div> 

다음은 작동하는 데모입니다. http://jsfiddle.net/d45SQ/