Bootstrap Navbar Component实现响应式导航
目的：用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的（不包括collepse.js） 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法，找出差距。 1.实现：我想要模仿一个这样的响应式导航：
按照Bootstrap官网上介绍的方法，按照规则创建标签添加类名之后，可以得到一个这样的导航：
代码：2.实现原理：从他的源码中扒出和nav navbar相关的代码，挑出和位置相关的： li {
float: left;
}
}
两个关键的盒子，navbar-header和navbar-nav 默认是小屏幕，他们的状态是:
大屏幕时，navbar-header左浮动，navbar-nav和里面的li也都左浮动，像下面这样：
所以，他实现的原理就是，利用块级元素在文档流中占满一行，浮动之后挤到一起的特性，来控制堆叠和并排。 所以，为了可以在变成大屏幕时这两个盒子可以顺利地到一行上去，也就是说不要出现下面的情况，需要控制navbar-header和navbar-nav里面元素的总宽度不要超过768px。
再挑出和隐藏于出现相关的样式： navbar-collapse是控制导航列表隐藏和出现的盒子，按钮会在变成大屏后消失。 3.弄清楚每个类名添加的样式.navbar 负责定义一个长条 .navbar-header ，负责包裹brand和折叠按钮，控制小屏幕时brand和按钮的位置，控制导航列表的布局。 .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区的默认样式 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 负责定义成垂直导航的样式 li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
navbar-nav：负责竖版导航的填充、实现横版导航。 li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
navbar-right，navbar-left ：负责定位 navbar-toggle：负责定义按钮的样式，里面用三个盒子绘制三条线。在大屏幕时消失。 collapse，负责控制显示和隐藏 .navbar-collapse: 负责被折叠盒子的样式 .navbar-collapse,.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (min-width: 768px) {
.container > .navbar-collapse,.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
以上这些类负责的样式是除了颜色之外的样式，与颜色相关的一切都由.navbar-default负责。 4.改装现在的导航条是这个样子的：
和我想要的还有一些差异，不过知道了它的实现方式，就可以进行想要的改动。 首先让小屏幕的时候导航列表也是水平显示，并且与屏幕两边有一定距离：
（如果以后也会用到这种版式，也可以为他定义一个类） 然后定义一个新的配色方案，替换掉.navbar-default li > a {
color: #F7846B;
}
.navbar-girl .navbar-nav > li > a:hover,.navbar-girl .navbar-nav > li > a:focus {
color: #CEE6E6;
background-color: transparent;
}
.navbar-girl .navbar-nav > .active > a,.navbar-girl .navbar-nav > .active > a:hover,.navbar-girl .navbar-nav > .active > a:focus {
color: #F7846B;
background-color: #FFF;
}
.navbar-girl .navbar-toggle {
border-color: #FFF;
}
.navbar-girl .navbar-toggle:hover,.navbar-girl .navbar-toggle:focus {
background-color: #CEE6E6;
}
.navbar-girl .navbar-toggle .icon-bar {
background-color: #FFF;
}
.navbar-girl .navbar-collapse {
border-color: #FFF;
}
大功告成啦。 5.反思之前用自己的思路实现了一个响应式导航：CSS3media queries+jQuery实现响应式导航
|
