Twitter bootstrap 3 贝宝需要正确的引导类吗

我已经尝试了各种方法在样式和专栏中模仿这种外观，但无法通过Bootstrap3获得它

是否有人可以为此列出twitter引导标记：

我已经被困了五天了

我尝试了以下方法：

<div class="container">
 <div class="row">
  <div class="col-md-8"></div>
  <div class ="col-md-4"></div>
</div>
</div>

谢谢演示：

html:

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
      <div class="page-header">
           <h1>Example page header<br><small>Subtext for header</small></h1>
      </div>
      </div>

      <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-4">Menu option 1</div>
        <div class="col-sm-4">Menu option 2</div>
        <div class="col-sm-4">Menu option 3</div>
      </div>  
      </div>
    </div>  
  </div>
</div>
<div class="container">
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  
</div>
</div>

<nav class="text-center">
      <ul class="pagination">
        <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
     </ul>
   </nav>

<footer class="container">
  <div class="row">
    <div class="text-center"><a href="#">link 1</a> | <a href="#">link 2</a></div>
    <div class="text-center">Powered by Bootstrap</div>
  </div>  
</footer>  

页眉示例
页眉的子文本
菜单选项1
菜单选项2
菜单选项3









| 
由引导提供动力