.nav { padding-left: 0; margin-bottom: 0; list-style: none; } .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：负责竖版导航的填充、实现横版导航。
.navbar-nav { margin: 7.5px -15px; /*折叠之后添加一个上下边距，每一行都和屏幕等宽*/ } .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 ：负责定位
@media (min-width: 768px) { .navbar-left { float: left !important; } .navbar-right { float: right !important; margin-right: -15px; //第一个添加navbar-right的元素右边会有一个负边距 } .navbar-right ~ .navbar-right { //之后的都不会有 margin-right: 0; } }
navbar-toggle：负责定义按钮的样式，里面用三个盒子绘制三条线。在大屏幕时消失。
.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-toggle:focus { outline: 0; } @media (min-width: 768px) { .navbar-toggle { display: none; } } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
collapse，负责控制显示和隐藏
.collapse { display: none; } @media (min-width: 768px) { .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } }
.navbar-collapse: 负责被折叠盒子的样式
.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); } .container > .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-nav { text-align:center; } .nav li { display:inline-block; } .navbar { border: 0; } .navbar .navbar-header { padding-top:10px; padding-bottom:10px; } @media(min-width:768px){ .navbar-collapse { padding-top:10px; padding-bottom:10px; } } .navbar-brand { font-size: 34px; font-family: Lobster, Monospace; } .nav { font-size: 20px; } @media(max-width:768px){ .container .navbar-collapse { margin-left: 12px; margin-right: 12px; } }
（如果以后也会用到这种版式，也可以为他定义一个类）
然后定义一个新的配色方案，替换掉.navbar-default
@media(min-width:768px){ .navbar { background-color: #F79C9C; } } .navbar-girl .navbar-header, .navbar-girl .navbar-collapse { background-color: #F79C9C; } .navbar-girl .navbar-brand { color: #FFF; } .navbar-girl .navbar-text { color: #F7846B; } .navbar-girl .navbar-nav > 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实现响应式导航
和Bootstrap的思想对比之后，发现自己的一些问题
①定位：
我的思路是通过position:absolute来控制导航列表的位置。这样有一个明显的缺点，导航列表已经完全脱离普通流。