用Bootstrap Navbar component 实现一个响应式导航
理解Bootstrap Navbar component是如何工作的（不包括collepse.js）
清楚自己添加一个规定的类名时是做了些什么
根据自己的需求进行改装
对比自己的实现方法，找出差距。
1.实现：
我想要模仿一个这样的响应式导航：
按照Bootstrap官网上介绍的方法，按照规则创建标签添加类名之后，可以得到一个这样的导航：
代码：
<nav> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a>Live With It</a> </div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav>
2.实现原理：
从他的源码中扒出和nav navbar相关的代码，挑出和位置相关的：
@media (min-width: 768px) { .navbar-header { float: left; } } .navbar-brand { float: left; } @media (min-width: 768px) { .navbar-nav { float: left; } .navbar-nav > li { float: left; } }
两个关键的盒子，navbar-header和navbar-nav
默认是小屏幕，他们的状态是:
大屏幕时，navbar-header左浮动，navbar-nav和里面的li也都左浮动，像下面这样：
所以，他实现的原理就是，利用块级元素在文档流中占满一行，浮动之后挤到一起的特性，来控制堆叠和并排。
所以，为了可以在变成大屏幕时这两个盒子可以顺利地到一行上去，也就是说不要出现下面的情况，需要控制navbar-header和navbar-nav里面元素的总宽度不要超过768px。
再挑出和隐藏于出现相关的样式：
@media (min-width: 768px) { .navbar-toggle { display: none; } } .collapse { display: none; } @media (min-width: 768px) { .navbar-collapse.collapse { display: block !important; height: auto !important; overflow: visible !important; } }
navbar-collapse是控制导航列表隐藏和出现的盒子，按钮会在变成大屏后消失。
3.弄清楚每个类名添加的样式
.navbar 负责定义一个长条
.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; } @media (min-width: 768px) { .navbar { border-radius: 4px; } }
.navbar-header ，负责包裹brand和折叠按钮，控制小屏幕时brand和按钮的位置，控制导航列表的布局。
@media (min-width: 768px) { .navbar-header { float: left; } } .container > .navbar-header, .container-fluid > .navbar-header { margin-right: -15px; //小屏幕的时候header内容左边缘和container左边缘对齐 margin-left: -15px; } @media (min-width: 768px) { .container > .navbar-header, .container-fluid > .navbar-header { margin-right: 0; margin-left: 0; } }
.navbar-brand, 负责左边logo区的默认样式
.navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-brand > img { display: block; } @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; /*大屏幕的时候内容左边缘和header左边缘对齐*/ } }
container和navbar-brand都在左右两边设置了15px的内填充，所以container、header、brand三个盒子左边线本该是这样的：
小屏幕的时候，header左右两边各有一个负边距，所以是这样的状态：
大屏幕的时候，brand左边有一个负边距：
.nav 负责定义成垂直导航的样式