導航分析(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()
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])
7、在hiden方法中,會重繪摺疊區域的高度,然後獲取實際區域的高度:
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
if (actives && actives.length) { Plugin.call(actives, 'hide') activesData || actives.data('bs.collapse', null) }