如何使用bootstrap设置这种类型的网格系统？

Question

我正在学习引导程序，我试图制作一个像这样的网格系统http://consilio.no/demo/consilio/index.html，任何人都知道如何以正确的方式做到这一点？图像可能om不同大小，所以我希望它是坚实的。

Answer 1

该基地可满足您的需求：

Bootply

<!-- header --> 
<header> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 

     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="http://placehold.it/100x60/e67e22/fff" alt="Brand" /></a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</header> 

<!-- content --> 
<section class="main"> 
    <div class="container grid-custom"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive center-block"> 
     </div> 
     <div class="row col-sm-6"> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/3498db/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/e74c3c/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/f1c40f/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/9b59b6/fff" alt="" class="img-responsive"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="row col-sm-6"> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/3498db/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/e74c3c/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/f1c40f/fff" alt="" class="img-responsive"></div> 
     <div class="col-xs-6"><img src="http://placehold.it/300x205/9b59b6/fff" alt="" class="img-responsive"></div> 
     </div> 
     <div class="col-sm-6"> 
     <img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive center-block"> 
     </div> 
    </div> 
    </div> 

    <div class="footer-push"></div> 
</section> 

<!-- footer --> 
<footer> 
    <div class="container"> 

    <div class="col-sm-8 hidden-xs"> 
     <div class="center-block"> 
     <a href="#"><img src="http://placehold.it/100x60/e67e22/fff" alt=""/></a> 
     <a href="#"><img src="http://placehold.it/100x60/e67e22/fff" alt=""/></a> 
     <a href="#"><img src="http://placehold.it/60x60/e67e22/fff" alt=""/></a> 
     <a href="#"><img src="http://placehold.it/30x60/e67e22/fff" alt=""/></a> 
     <a href="#"><img src="http://placehold.it/100x60/e67e22/fff" alt=""/></a> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-4"> 
     <div class="social-icons pull-right"> 
     <a href="#"><i class="glyphicon glyphicon-ok-sign"></i></a> 
     <a href="#"><i class="glyphicon glyphicon-question-sign"></i></a> 
     <a href="#"><i class="glyphicon glyphicon-info-sign"></i></a> 
     </div> 
    </div> 

    </div> 
</footer> 

.navbar { 
    min-height: 95px; 
} 
.navbar-nav > li > a { 
    line-height: 65px; 
} 
.navbar-toggle { 
    margin-top: 25px; 
} 
@media (min-width: 768px) { 
    .navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
    } 
} 
.main { 
    margin: 0 auto -60px; 
} 
.main .img-responsive { 
    margin-bottom: 30px; 
} 
footer, .footer-push { 
    height: 65px; 
    background-color: #f5f5f5; 
} 
.social-icons { 
    margin-right: 15px; 
    font-size: 40px; 
    line-height: 75px; 
}