本文目地：分析bootstrap导航栏及其响应式的实现方式，是自己的编程技术更上一层楼
我们首先来分析一下怎么实现，第一步先贴一个bootstrap的导航栏模板
2.代码如下
1
登录后复制
效果如下;
移动端：
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的相关知识，可参考这篇文章
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的
其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的变化本文没有讨论，可以参考这篇文章
以上就是分析bootstrap导航栏及其响应式的实现方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3196046.html
