Bootstrap导航栏navbar源码分析
2018-06-24 01:34:41来源:未知 阅读 ()
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平
先贴一个bootstrap的导航栏模板
http://v3.bootcss.com/examples/navbar-fixed-top/
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)
关于device-width的相关知识,可参考这篇文章 http://www.tuicool.com/articles/ri2AJv
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; } .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-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来修改整个配色(决定了整个导航栏的配色)
下拉菜单的实现也是样式和是否显示的样式分离
5.注:其中许多细节如margin padding的变化本文没有讨论,可以参考这篇文章http://www.cnblogs.com/zhangw1994/p/7124252.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS导航栏下划线跟随效果 2020-06-11
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash