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会一条底线,不向上裁减一个像素,会有空落落间隙出现

// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  @include border-top-radius(0);
}

折叠效用(collapse):

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

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

return $(this.options.parent)
      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
      .each($.proxy(function (i, element) {
        var $element = $(element)
        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
      }, this))
      .end()

3、Praent的贯彻,还索要整合.panel类,因为查找时以为所有子列表都是放在.panel类下的
4、Jquery的end()方法:停止目前筛选链,并将匹配元素集还原为事前的情景(链伊始的职位)
$(“p”).find(‘.bak’).find(‘span’).end():还原到$(“p”)
5、scrollHeight:页面的可观(获取为要开展的骨子里低度/宽度),包含视窗不可见的有些,在collapse中用来识别要举办的最大值,在移动成功后都会对height/widht清空处理

var scrollSize = $.camelCase(['scroll', dimension].join('-'))
    this.$element
      .one('bsTransitionEnd', $.proxy(complete, this))
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])

6、对处理元素分为两类,一是要开展或隐藏的元素本身($element),二是触发展开或隐藏元素的按钮($trigger)
7、在hiden方法中,会重绘折叠区域的可观,然后拿走实际区域的可观:

this.$element[dimension](this.$element[dimension]())[0].offsetHeigh

8、Hiden方法的触发默认状况下都是透过show方法中的判断触发的:

if (actives && actives.length) {
    Plugin.call(actives, 'hide')
      activesData || actives.data('bs.collapse', null)
    }

相关文章