两个bootstrap站点结构分析

ghost中国

• 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也很好

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

azul

• 其他都是常规操作
• 重点看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>