学习bootstrap源码
栅格系统代码解析[https://www.cnblogs.com/suwin...]
[https://blog.csdn.net/lianjiw...]
container:主要是用box-sizing限制宽度，然后用媒体查询将container多大，加上内边距限定
row:.row {
margin-right: -15px;
margin-left: -15px;
}
看了row的代码，感觉row就是一个标识，重点是还是col
col是根据屏幕大小，设置百分比宽度，所以写好以后是自适应布局，每一列都是用float对齐
使用float实现流动布局，一行分为十二列，如果一行中超过了十二列，放不下的元素会滚到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
使用百分比宽度，让内容宽度平滑渐变。
使用媒体查询，在不同尺寸的设备上应用不同类的预定义列，从而让排版更灵活地适配屏幕尺寸

导航栏源码
[https://www.cnblogs.com/zhang...]
1、最外层div容器主要的作用是创建一个最小高度为50px的条形容器（.navbar），相对于于浏览器定位，Nav class
2、@media (min-width: 768px) {
.navbar-header {

float: left;

}
} 在移动端无效
3、@media (min-width: 768px) {/此button在pc端不显示/
.navbar-toggle {

display: none;

}
} 这个就是在PC端不显示，响应式关键
4、.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);

}
.navbar-collapse.in {/点击navbar-header的navbar-toggle的button后， navbar-collapse collapse会被js修改成。navbar-collapse collapse in/
overflow-y: auto;
}
.collapse {/决定了本组件在移动端时不显示/
display: none;/点击事件发生后将被覆盖/
}

5、.navbar-collapse.collapse {

display: block !important;/**作为块级显示，由于兄弟节点navbar-header是浮动元素，所以navbar-collapse会占满父元素的宽高**/ height: auto !important; padding-bottom: 0; overflow: visible !important;

}

6、@media (min-width: 768px)

样式名{

.....

}

这表示只有浏览器的屏幕宽度达到min-width时，下面的样式才会执行。

7、我们也弄明白了navbar-collapse collapse组件是如何在移动端时隐藏的navbar-collapse负责组件的外表样式，而.collapse负责整个组件是否显示（pc端正常显示，移动端出事不显示（display：none），点击事件发生后以块级元素显示）

4.总结

从bootstrap的导航栏源码分析，可以看出以下几点

4.1：bootstrap的尺寸样式和配色样式是分开设置的，可以想到这样设置可以随意组合，增加了代码的复用性，也可以随意的根据自己的需求修改配色。

4.2：导航栏的实现：导航栏的固定方式由navbar-fixed-top实现，其他值还有navbar-static-top以及默认值其显示效果也不一样（决定了整个导航栏的显示位置）

　　　　　　　　　颜色实现由navbar-default实现，可以通过修改navbar-defau来修改整个配色（决定了整个导航栏的配色）

　　　　　　　　　下拉菜单的实现也是样式和是否显示的样式分离
学习了一下源码，增加自己的代码量，以后碰到同样的问题可以借鉴bootstrap的写法。