html - 使用 Bootstrap 的带有标题的框

Question

我正在尝试创建一个带有标题的框。我们正在为 css 使用 Bootstrap [ 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

我决定花时间为您做这件事，但下次至少在您询问之前先尝试一下，并向我们提供您尝试过的内容，这样我们就不会犯与您相同的错误。

您需要 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/