1. Navigation Analysis (nav)
Source code file:
_navs.scss: navigation module
Mixins/_nav-divider.scss: Divider line
Mixins/_nav-vertical-align.scss: vertical alignment
1. It is just styled with css and has no dependence on Js.
2. The navigation module can include a pull-down module
3. Realize horizontal, vertical, horizontal equal distribution (table-cell implementation, 4.0 removal), tabs, capsules and other styles
4. Nav-divider: There is a pixel height to realize the divider line
5. Nav-stacked: Vertical alignment implementation
6. Provides tab-content class to wrap tabs, and then tab-pane is used as content area for tab page extension
7. The dropdown under Nav-tabs has been processed to shrink one pixel upward, because nav-tabs will have a bottom line and not shrink one pixel upward, and there will be blank gaps.
// 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);}2. Collapse effect
Source code file:
Mixins/_component-animations.scss: collapse implementation to achieve folding effect
Javascripts/bootstrap/collapse.js: Collapse effect implementation
1. $this.data() collects all data-* data
2. Parent property: Specifies that the current collapse is controlled by the parent, which mainly realizes the effect of one control and many. The following is the code of hiding all child lists under the same parent:
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. The implementation of Praent also requires the integration of the .panel class, because when searching, it is believed that all sublists are placed under the .panel class.
4. Jquery's end() method: end the current filter chain and restore the matching element set to its previous state (the position where the chain starts)
$("p").find('.bak').find('span').end(): Restore to $("p")
5. scrollHeight: The height of the page (get the actual height/width to be expanded), contains the invisible part of the window, which is used in collapse to identify the maximum value to be expanded, and the height/widht will be cleared after the movement is completed.
var scrollSize = $.camelCase(['scroll', dimension].join('-')) this.$element .one('bsTransitionEnd', $.proxy(complete, this)) .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])6. The processing elements are divided into two categories: one is to expand or hide the element itself ($element), and the other is to touch the button to develop or hide the element ($trigger)
7. In the hiden method, the height of the folded area will be redrawn, and then the height of the actual area will be obtained:
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
8. The trigger of the Hiden method is triggered by default through the judgment in the show method:
if (actives && actives.length) { Plugin.call(actives, 'hide') activesData || actives.data('bs.collapse', null) }The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.