BootStrap学习(二)——重写首页之topbar

1、布局容器

帮助文档：http://v3.bootcss.com/css/#overview-container

BootStrap需要为页面内容和栅栏系统包裹一个.container容器。提供的两个容器如下，注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

1）.container类用于固定宽度并支持响应式布局的容器’

　　<div class="container">
       ...
    </div>

2）.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

　　<div class="container-fluid">
       ...
    </div>

 2、栅格系统

1）帮助文档：http://v3.bootcss.com/css/#grid-options

2）Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

3）特点：

　　a.“行（row）”必须包含在.container（固定宽度）或 .container-fluid （100% 宽度）中

　　b.“列（column）”可以作为行（row）的直接子元素

　　c.行使用的样式“.row”，列使用的样式“col-*-*”，内容应置于“列（column）”内

　　d.列大于12时，将另起一行排列

　　e.栅格类适用于与屏幕宽度大于等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。

4）栅格参数（large：lg、medium：md、small：sm、x small：xs）

3、响应式工具

帮助文档：http://v3.bootcss.com/css/#responsive-utilities

4、具体代码实现：（head部分直接参照模板）

　　<!--logo部分-->
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="col-lg-5 col-md-4 hidden-xs col-sm-6" >
                    <img src="../img/header.png" />
                </div>
                <div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
        </div>

在谷歌浏览器内运行，效果如下（大屏幕）:

中等屏幕：

小屏幕：