Bootstrap导航栏navbar源码分析
1.本⽂⽬地：分析bootstrap导航栏及其响应式的实现⽅式，提升⾃⾝css⽔平
先贴⼀个bootstrap的导航栏模板
2.代码如下
1<nav class="navbar navbar-default navbar-fixed-top">
2<div class="container-fluid">
3<div class="navbar-header">
4<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
5<span class="sr-only">Toggle navigation</span>
6<span class="icon-bar"></span>
7<span class="icon-bar"></span>
8<span class="icon-bar"></span>
9</button>
10<a class="navbar-brand" href="#">Project name</a>
11</div>
12<div id="navbar" class="navbar-collapse collapse">
13<ul class="nav navbar-nav">
14<li class="active"><a href="#">Home</a></li>
15<li><a href="#">About</a></li>
16<li><a href="#">Contact</a></li>
17<li class="dropdown">
18<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
19<ul class="dropdown-menu">
20<li><a href="#">Action</a></li>
21<li><a href="#">Another action</a></li>
22<li><a href="#">Something else here</a></li>
23<li role="separator" class="divider"></li>
24<li class="dropdown-header">Nav header</li>
25<li><a href="#">Separated link</a></li>
26<li><a href="#">One more separated link</a></li>
27</ul>
28</li>
29</ul>
30<ul class="nav navbar-nav navbar-right">
31
32</ul>
33</div><!--/.nav-collapse -->
34</div><!--/.container-fluld -->
35</nav>
效果如下;
移动端：
3.代码分析
从外到内分析每⼀个标签及其样式的作⽤
3.1最外层的div容器（样式为navbar navbar-default navbar-fixed-top）：
源码
.navbar {
position: relative;
min-height: 50px;/**导航条最⼩宽度为50px**/
margin-bottom: 20px;/****/
border: 1px solid transparent;
}
@media (min-width: 768px) {/**>=768的设备，其实就是pc，移动设备width属性都⼩于768px**//**可能有很多⼈不理解，实际上移动端的width属性是以device-width来计量的，不是单纯的像数的概念，建议有疑问的同学⾃⾏搜索device-width关键字 .navbar {
border-radius: 4px;/****/
}
}
.navbar-default {/**设备导航栏的配⾊**/
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;/**相对浏览器定位**/
right: 0;
left: 0;
z-index: 1030;/**样式层叠在上层的优先级**/
}
由源码可见，最外层div容器主要的作⽤是创建⼀个最⼩⾼度为50px的条形容器（.navbar），相对于于浏览器定位(.navbar-fixed-top)，确定导航栏的配⾊（.navbar-default）
3.2 样式为navbar-header的div容器
其css源码如下
/**在pc端显⽰时向右浮动，在移动端此样式⽆效**/
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
此div在pc端和移动端显⽰效果如下
pc端：
移动端：
可见在pc端时，浏览器宽度⾜够，此div仅作为⼀个⼩的块级元素存在；⽽在移动端时，由于屏幕宽度不够，故将导航栏的其他元素以下拉菜单的形式实现，此div单独填满⽗容
器。
navbar-header下还有两个字元素：样式为navbar-toggle的<button>和为navbar-brand的<a>
其css源码如下：
.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) {/**此button在pc端不显⽰**/
.
导航菜单navbar-toggle {
display: none;
}
}
.navbar-toggle .icon-bar {/**icon-bar负责在button盒⼦⾥画横线**/
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
⾄此，navbar-header组件我们就弄清楚了，这是⼀个响应式布局，在pc端，navbar-header只显⽰品牌⽂字，在移动端，navbar-header将独占整个导航栏navbar，其他部分将被隐藏。
3.3继续来看navbar-collapse collapse组件
源码：
/**由于.navbar-collapse，.navbar-collapse.in，.collapse在（@meida min-width:768px）pc端均有定义，故⼀下的属性只对移动端有效**/
.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;/**点击事件发⽣后将被覆盖**/
}
.collapse.in {/**点击事件发⽣后，以块级元素显⽰，覆盖掉display：none**/
display: block;
}
@media (min-width: 768px) {/**pc端**/
.navbar-collapse {
width: auto;
border-top: 0;
-
webkit-box-shadow: none;
box-shadow: none;
}
.llapse {
display: block !important;/**作为块级显⽰，由于兄弟节点navbar-header是浮动元素，所以navbar-collapse会占满⽗元素的宽⾼**/
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
⾄此，我们也弄明⽩了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来修改整个配⾊（决定了整个导航栏的配⾊）
下拉菜单的实现也是样式和是否显⽰的样式分离
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论