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

推荐阅读更多精彩内容

  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...
    ooocoo阅读 413评论 0 0
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    poetries阅读 3,899评论 0 40
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 198评论 0 1
  • bootstrap CSS# 一、容器.container 包裹其他元素div.row 必须放在.conta...
    贞贞姐阅读 421评论 0 16
  • 特点 跨设备、跨浏览器 响应式布局 提供了全面的组件 内置jQuery插件 支持HTML5、CSS3 支持LESS...
    osoLife阅读 161评论 0 2