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

Question

我正在学习bootstrap，我试图创建一个像http://consilio.no/demo/consilio/index.html这样的网格系统，有谁知道如何以正确的方式做到这一点？图像可能有不同的尺寸，所以我希望它是坚固的。

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;
}