- header是经典的container,row,col-sm-12
- nav导航栏就复杂啦，都是我不懂的
<span class="nav-toggle-button collapsed"
data-toggle="collapse" data-target="#main-menu">
</span>
<div class="collapse navbar-collapse" id="main-menu">....</div>
<section class="content-wrap">
<div class="container">
<div class="row">
<main class="col-md-8 main-content"></main>
<aside class="col-md-4 sidebar"></aside>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
</footer>
- 其他都是常规操作
- 重点看footer.
注意col-md-7下包含了两个row,所以最终与col-md-5并列。
<div class="container">
<footer>
<div class="row">
<div class="col-xs-12 col-md-5"></div>
<div class="col-xs-12 col-md-7">
<div class="row">
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
</div>
</div>
</div>
</footer>
</div>
