研究bootstrap的navbar

Bootstrap的navbar，用bootstrap制作响应式网站肯定会用的到，这里来研究一下：

最外层包裹的是类名为navbar的div：

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

有两种主题可以选，navbar-default\navbar-inverse(反色)，有边框颜色，背景颜色

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

大屏幕中有圆角边框，使用navbar-fixed-top\bottom后消失

@media (min-width: 768px)
.navbar {
    border-radius: 4px;
}

navbar-header是navbar的子元素，左浮动，内有nabar-toggle和navbar-brand两个子元素，navbar-toggle在大屏幕中隐藏。
当屏幕小于768px,navbar-header不再浮动，而是占满navbar，此时navbar-toggle右浮动，navbar-collapse隐藏。

@media (min-width: 768px)
.navbar-header {
    float: left;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

navbar-toggle大小为44x34,有8px 15px 8px 0 的margin。

.navbar-default .navbar-toggle {
    border-color: #ddd;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

navbar-brand有特定的高度：

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

navbar-collapse在大屏幕中是block元素，默认占满navbar，它可以有navbar-nav元素，这些元素默认都是左浮动，可以设置navbar-left/navbar-right来让它左右浮动。

navbar元素内可以有container，让navbar看起来窄一点。

navbar-brand有50px的高度，并且有15px的padding，其实它content的高度为20px，并且有20px的line-height,我们可以修改它的高度为我们想要的高度：

.navbar-brand {
       display: block;
       padding: 10px 15px;
       height: 86px;
       line-height: 66px;
}

navbar-brand的高度撑开了navbar，会让其它元素的显示显得怪异，所以我们要撑开其它的元素，比如navbar-nav里的a,我们需要合理的设置它的line-height:

.navbar-default .navbar-nav>li>a {
    color: #777;
    line-height: 56px;
}

默认情况下，a有15px的padding。

对于navbar-toggle与navbar-form,我们需要设置它们的margin-top来达到垂直居中的目的。

对于其它不必要的元素，我们需要设置hidden-xs/hidden-sm/hidden-md来让它们不要出现在小屏幕中。

研究bootstrap的navbar

解读Navbar

定制Navbar