使用引导程序的标头框

Question

我正在尝试创建一个带标题的方框。我们正在为css [http://getbootstrap.com/]使用bootstrap。该框应如下所示。它是响应式设计的一部分，具有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

我决定花时间为你做这件事，但下次至少尝试之后再问你并向我们提供你所尝试的内容，这样我们就不会犯你所犯的错误。

您需要Jquery和Bootstrap（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/