一、導(dǎo)航分析（nav)
源碼文件：
_navs.scss：導(dǎo)航模塊
Mixins/_nav-divider.scss：分隔線
Mixins/_nav-vertical-align.scss：垂直對齊
1、只是用css進(jìn)行了樣式修飾，對Js沒有任何依賴
2、導(dǎo)航模塊可以包含下拉模塊
3、實現(xiàn)了水平、垂直、水平平均分配（table-cell實現(xiàn)，4.0移除）、tabs、膠囊等樣式
4、Nav-divider：有一個像素的高度實現(xiàn)分隔線
5、Nav-stacked：垂直對齊實現(xiàn)
6、提供了tab-content類，用于包裹tab，然后tab-pane做為內(nèi)容區(qū)域，用于tab頁的擴(kuò)展
7、Nav-tabs下的dropdown做了位置向上收縮一個像素的處理，因為nav-tabs會一條底線，不向上收縮一個像素，會有空白間隙出現(xiàn)
// 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實現(xiàn)，實現(xiàn)折疊效果
Javascripts/bootstrap/collapse.js：折疊效果實現(xiàn)
1、$this.data()收集所有data-*數(shù)據(jù)
2、Parent屬性：指定當(dāng)前這個collapse被那個父級所控制，主要實現(xiàn)一控多的效果，以下是隱藏同一父級下所有子列表代碼：
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的實現(xiàn)，還需要整合.panel類，因為查找時認(rèn)為所有子列表都是放在.panel類下的
4、Jquery的end（）方法：結(jié)束當(dāng)前篩選鏈，并將匹配元素集還原為之前的狀態(tài)（鏈開始的位置）
$(“p”).find(‘.bak').find(‘span').end()：還原到$(“p”)
5、scrollHeight：頁面的高度（獲取為要展開的實際高度/寬度），包含視窗不可見的部分，在collapse中用于識別要展開的最大值，在運(yùn)動完成后都會對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），二是觸發(fā)展開或隱藏元素的按鈕（$trigger）
7、在hiden方法中，會重繪折疊區(qū)域的高度，然后獲取實際區(qū)域的高度：
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
8、Hiden方法的觸發(fā)默認(rèn)情況下都是通過show方法中的判斷觸發(fā)的：
if (actives && actives.length) { Plugin.call(actives, 'hide') activesData || actives.data('bs.collapse', null) } 以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
