全面解析Bootstrap中nav、collapse的使用方法

前端之家收集整理的这篇文章主要介绍了全面解析Bootstrap中nav、collapse的使用方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、导航分析(nav)

源码文件_navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertical-align.scss:垂直对齐

1、只是用css进行了样式修饰,对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配(table-cell实现,4.0移除)、tabs、胶囊等样式 4、Nav-divider:有一个像素的高度实现分隔线 5、Nav-stacked:垂直对齐实现 6、提供了tab-content类,用于包裹tab,然后tab-pane做为内容区域,用于tab页的扩展 7、Nav-tabs下的dropdown做了位置向上收缩一个像素的处理,因为nav-tabs会一条底线,不向上收缩一个像素,会有空白间隙出现

二、折叠效果(collapse)

源码文件: Mixins/_component-animations.scss:collapse实现,实现折叠效果 Javascripts/bootstrap/collapse.js:折叠效果实现

1、$this.data()收集所有data-*数据 2、Parent属性:指定当前这个collapse被那个父级所控制,主要实现一控多的效果,以下是隐藏同一父级下所有子列表代码

3、Praent的实现,还需要整合.panel类,因为查找时认为所有子列表都是放在.panel类下的 4、Jquery的end()方法:结束当前筛选链,并将匹配元素集还原为之前的状态(链开始的位置) $(“p”).find(‘.bak').find(‘span').end():还原到$(“p”) 5、scrollHeight:页面的高度(获取为要展开的实际高度/宽度),包含视窗不可见的部分,在collapse中用于识别要展开的最大值,在运动完成后都会对height/widht清空处理

6、对处理元素分为两类,一是要展开或隐藏的元素本身($element),二是触发展开或隐藏元素的按钮($trigger) 7、在hiden方法中,会重绘折叠区域的高度,然后获取实际区域的高度: 方法的触发默认情况下都是通过show方法中的判断触发的:

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

原文链接:https://www.f2er.com/bootstrap/48553.html

猜你在找的Bootstrap相关文章