BootstrapBootstrap导航栏navbar源码分析

         下拉菜单的达成也是样式和是或不是出示的样式分离

从bootstrap的导航栏源码分析,能够看来以下几点

从外到内分析每1个标签及其样式的效应

4.总结

成效如下;

3.2 样式为navbar-header的div容器

足见在pc端时,浏览器宽度丰盛,此div仅看成三个小的块级成分存在;而在活动端时,由于显示器宽度不够,故将导航栏的别的因素以下拉菜单的款型落到实处,此div单独填满父容器。

         颜色完成由navbar-default达成,能够透过改动navbar-defau来修改总体配色(决定了全副导航栏的配色)

3.1最外层的div容器(样式为navbar navbar-default navbar-fixed-top):

移动端:

3.3一而再来看navbar-collapse collapse组件

navbar-header下还有四个字成分:样式为navbar-toggle的<button>和为navbar-brand的<a>

Bootstrap 1

 .collapse.in
{/**点击事件爆发后,以块级成分显示,覆盖掉display:none**/
  display: block;
 }

1.本文目地:分析bootstrap导航栏及其响应式的兑现方式,升高自小编css水平

其css源码如下:

2.代码如下

由源码可知,最外层div容器首要的成效是开创四个细小高度为50px的线形容器(.navbar),相对于于浏览器定位(.navbar-fixed-top),明确导航栏的配色(.navbar-default)

Bootstrap 2

其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;
}

此div在pc端和移动端展示效果如下

 

先贴2个bootstrap的导航栏模板

Bootstrap 3

移动端:

/**由于.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;/**点击事件发生后将被覆盖**/
}

 至此,navbar-header组件大家就弄掌握了,那是一个响应式布局,在pc端,navbar-header只突显品牌文字,在移动端,navbar-header将独占全体导航栏navbar,别的一些将被隐形。

时至明天,我们也弄了然了navbar-collapse
collapse组件是什么在活动端时埋伏的navbar-collapse负责组件的表面样式,而.collapse负责整个组件是还是不是出示(pc端符合规律呈现,移动端出事不显得(display:none),点击事件时有发生后以块级成分展现)

4.1:bootstrap的尺码样式和配色样式是分手设置的,能够想到这么设置能够随心所欲组合,扩展了代码的复用性,也足以无限制的基于本身的须要修改配色。

关于device-width的连带文化,可参照那篇文章 http://www.tuicool.com/articles/ri2AJv

3.代码分析

pc端: 

 

源码:

5.注:其中许多细节如margin
padding的转变本文没有座谈,能够参见那篇小说http://www.cnblogs.com/zhangw1994/p/7124252.html

4.2:导航栏的贯彻:导航栏的一定情势由navbar-fixed-top福衢寿车,别的值还有navbar-static-top以及暗中认可值其出示效果也不均等(决定了一切导航栏的显示地点)

源码

 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               Toggle navigation
 6               
 7               
 8               
 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 </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>

  Bootstrap 4

/**在pc端显示时向右浮动,在移动端此样式无效**/

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

http://v3.bootcss.com/examples/navbar-fixed-top/

@media (min-width: 768px) {/**pc端**/
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    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 {
  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;/**样式层叠在上层的优先级**/
}

相关文章