今天完成的事情:

学习了bootstrap的栅格系统

了解了bootstrap组件中的导航栏

先说说栅格系统，这算是bootstrap自适应的精髓

栅格系统通过行和列布局，行（row）必须在.container内吗，列（col）只能放置在行内。

定义行，只需要给div加上bootstrap的样式row

<div class="row"></div>

定义列，bootstrap默认一行被分为12份，每份的长度和横向分辨率有关

<div class="col-针对哪种设备-长度"></div>

栅格系统将屏幕分为4类（横向分辨率）

而定义这四种屏幕大小就要用到媒体查询

 @media (max-width: 767px) {        /*小于 767px 这里的样式生效*/    }    

@media (min-width: 768px) and (max-width: 991px) {        /*在768px ~ 991px之间  这里的样式生效*/    }    

@media (min-width: 1200px) {        /*大于 1200px 这里的样式生效*/    }

bootstrap一般使用max-width，min-width，and语法，用于定义不同分辨率下的样式。

一般还会加上!important，用于提高优先级，优先使用这里定义的样式。

导航栏：

定义一个导航栏首先向nav标签添加class：navbar

给div添加标题class：navbar-header，可以改成图片

再使用ul添加一个带链接的无序列表。

再加上自定义样式就ok

菜鸟教程上的案例

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">菜鸟教程</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">iOS</a></li>
                <li><a href="#">SVN</a></li>
            </ul>
        </div>
    </div>
</nav>

遇到的问题：

练习导航栏的时候，遇到了很多问题，可能是一下接触到太多bootstrap的专有样式，没消化完

明天多看看例子，用审查元素看看源码