Bootstrap Source code Analysis (to be continued) _javascript tips

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-priority WEB projects. --bootstrap Chinese Document

Bootstrap is one of the most popular front-end development frameworks because it supports responsive layout, mobile device priority, and ease of use and easy learning.

Bootstrap's response design, component development, and JavaScript plug-in development and preprocessing script development methods are also worth learning.

Source

Source code Download and compilation

Recommended to GitHub download the latest, most complete Bootstrap source code.

GitHub is a Bootstrap source code hosting repository that contains not only source code, but also Bootstrap source files that use documents. Therefore, in the absence of a network, you can browse the document on the local machine by compiling and running the document source code.

Source code Directory

Bootstrap source code directory contains:
• Document Deployment Code subdirectory _gh_pages/
• Document Source subdirectory docs/
Bootstrap Deployment Code subdirectory dist/
Bootstrap Foot Catalogue js/
Bootstrap style subdirectory less/
Bootstrap Font subdirectory fonts/
Grunt build Tool foot directory grunt/
• Package Manager NuGet subdirectory nuget/
• Many configuration files

Pointcut

The source code of Bootstrap framework is very complex, it is very difficult to analyze from the perspective of the author's development framework. Can simplify the problem, do not care about how the framework is built or deployed, only focus on the working principle of the framework, that is, HTML, css/less and JS parts.

Through the idea of partition, the complex problem is decomposed into many simple problems to solve. When all the small problems are solved, the complex problems are solved.

The whole bootstrap frame is divided into components, taking components as the cut-in point, understanding the working principle, and then analyzing the whole frame gradually.

Component analysis

Drop down menu dropdown

HTML code

<!--components: Pull-down menu-->
<div class= "dropdown" >
 <!--trigger button--> <button class=
 "Btn Btn-default Dropdown-toggle "type=" button "data-toggle=" dropdown ">
 dropdown <span class=
 " caret "></span >
 </button>
 <!--pull-down menu-->
 <ul class= "Dropdown-menu" >
 <li><a href= "# ">Action</a></li>
 <li><a href=" # ">another action</a></li>
 < Li><a href= "#" >something else here</a></li>
 </ul>
</div>

Note: In the code, the accessible property aria-* in the source code is removed for easy analysis. Can not be omitted in practical application. About button styles also do not unfold here for analysis

CSS Code

Dropdown Arrow/caret. caret {display:inline-block;
 width:0;
 height:0;
 margin-left:2px;
 Vertical-align:middle;
 Border-top: @caret-width-base dashed; Border-top: @caret-width-base Solid ~ "\9";
 IE8 border-right: @caret-width-base solid transparent;
Border-left: @caret-width-base solid transparent; }//The dropdown wrapper (Div). Dropup,. dropdown {position:relative;//parent element relative positioning}//Prevent the focus on the DROPD

Own toggle when closing dropdowns. dropdown-toggle:focus {outline:0;}
 The dropdown menu (UL). dropdown-menu {position:absolute;//child element absolute positioning top:100%;//Pull-down menus close to the bottom edge of the parent element left:0;
 Z-index: @zindex-dropdown; Display:none;
 The default is hidden when the trigger button is displayed (Display:block) float:left;
 min-width:160px;
 padding:5px 0; margin:2px 0 0;
 Override default UL List-style:none;
 Font-size: @font-size-base; 
 Text-align:left;
 Background-color: @dropdown-bg; border:1px solid @dropdown-fallback-border;
 IE8 fallback border:1px solid @dropdown-border; border-Radius: @border-radius-base;
 . Box-shadow (0 6px 12px Rgba (0,0,0,.175));

 Background-clip:padding-box;
 Aligns the dropdown menu to right &.pull-right {right:0;
 Left:auto;
 A horizontal divider with a height of 1px. Divider {Nav-divider (@dropdown-divider-bg);
 }//Links within the dropdown menu > li > a {display:block;
 PADDING:3PX 20px;
 Clear:both;
 Font-weight:normal;
 Line-height: @line-height-base;
 Color: @dropdown-link-color; White-space:nowrap;
 Prevent link line wrapping}//Hover/focus state. Dropdown-menu > li > A {&:hover, &:focus {text-decoration:none;
 Color: @dropdown-link-hover-color;
 Background-color: @dropdown-link-hover-bg; }//Active state. Dropdown-menu > Active > A {&:hover, &:focus {color: @dropdown-link-acti
 Ve-color;
 Text-decoration:none;
 outline:0;
 Background-color: @dropdown-link-active-bg; }//Show Drop-down menu. Open {>. dropdown-menu {display:block;//show}//Remove the outline When:focus is Triggered > a {outline:0; }//Menu positioning. dropdown-menu-right {Left:auto;//Reset the default from '. Dropdown-menu ' right:0;}//'.
Pull-right ' Nav component.
 . dropdown-menu-left {left:0;
Right:auto;
 }//Dropdown section headers. dropdown-header {display:block;
 PADDING:3PX 20px;
 Font-size: @font-size-small;
 Line-height: @line-height-base;
 Color: @dropdown-header-color; White-space:nowrap;
 As with > li > A}//not Drop-down menu area. dropdown-backdrop {position:fixed;
 left:0;
 right:0;
 bottom:0;
 top:0; Z-index: (@zindex-dropdown-10);
 Make sure that the Drop-down menu is clicked without closing the Pull-down menu}//Right aligned dropdowns. Pull-right > Dropdown-menu {right:0;
Left:auto;  (aka, Dropup-menu)////Just Add. dropup after the standard. Dropdown class and of Allow for dropdowns to go bottom

You ' re set, bro.//Todo:abstract The NavBar fixed styles are no placed here? . Dropup, Navbar-fixed-bottom dropdown {//Reverse the caret. Caret {border-top:0;
 Border-bottom: @caret-width-base dashed; Border-bottom: @caret-width-base Solid ~ "\9";
 IE8 content: "";
 }//different positioning for bottom up menu. dropdown-menu {top:auto;
 bottom:100%;
 margin-bottom:2px;

}//Component alignment////reiterate per navbar.less and modified Component.
 @media (min-width: @grid-float-breakpoint) {. navbar-right {. dropdown-menu {. Dropdown-menu-right ();
 }//necessary for overrides of the default right aligned menu.
 Would remove come v4 in all likelihood.
 . dropdown-menu-left {. Dropdown-menu-left ();

 }
 }
}

The behavior of the Drop-down menu component is to hide the drop down menu when the trigger button is clicked, the Drop-down menu is displayed below it, and the Drop-down menu area is clicked.

Implementation principle:
1. Start with only the trigger button, the. Dropdown Wrapper default Drop-down menu closes,. Dropdown-menu Default Hide Display:none

2. When the trigger button is clicked, the. Dropdown is added after the class. Open. In. Open. The display value of Dropdown-menu is block. So add/Remove. The Open class represents the display/hide of the Drop-down menu.

3. Click the non-Drop-down menu area,. dropdown deletes the class. Open, that is, hide the Drop-down menu. The principle of the non-Drop-down menu area is that fixed positioning, tiling, and z-index are smaller than drop-down menus, so that when you click the Pull-down menu, the Drop-down menu is not hidden.

JavaScript code

/* ======================================================================== * Bootstrap:dropdown.js v3.3.6 * http:// getbootstrap.com/javascript/#dropdowns * =======================================================================
 = * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (Https://github.com/twbs/bootstrap/blob/master/LICENSE) * =====================================

 =================================== * * +function ($) {' Use strict '; DROPDOWN CLASS DEFINITION//========================= var backdrop = '. Dropdown-backdrop ' var toggle = ' [Data-togg Le= "dropdown"] ' var dropdown = function (Element) {$ (Element). On (' Click.bs.dropdown ', This.toggle)} Dropdown.versio N = ' 3.3.6 ' function GetParent ($this) {var selector = $this. attr (' Data-target ') if (!selector) {selector = $this. attr (' href ') selector = selector &&/#[a-za-z]/.test (selector) && selector.replace (/.* (? =#[^\s]*$)/, ' ')//strip for IE7} var $parent = selector &Amp;& $ (selector) return $parent && $parent. length? $parent: $this. Parent ()} function Clearmenus (e) {if (e && E.which = 3) return $ (backdrop). Remove () $ (to Ggle). each (function () {var $this = $ (this) var $parent = GetParent ($this) var relatedtarget = {relatedtarget: This} if (! $parent. Hasclass (' open ')] return if (e && e.type = = ' click ' &&/input|textarea/i.test E. Target.tagname) && $.contains ($parent [0], E.target)) return $parent. Trigger (E = $.
  Event (' Hide.bs.dropdown ', relatedtarget)) if (e.isdefaultprevented ()) return $this. attr (' aria-expanded ', ' false ') $parent. Removeclass (' open '). Trigger ($. Event (' Hidden.bs.dropdown ', Relatedtarget)}})} Dropdown.prototype.toggle = function (e) {var $this = $ (This) if ($this. Is ('. Disabled,:d isabled ')] return var $parent = GetParent ($this) var isactive = $parent. Hasclass (' open ') Clea Rmenus () if (!isactive) {if (' Ontouchstart ' in Document.documentelEment && $parent. Closest ('. Navbar-nav '). Length) {//If mobile we use a backdrop because click events don ' t del Egate $ (document.createelement (' div ')). addclass (' Dropdown-backdrop '). InsertAfter ($ (this)). On (' click ', Clearm Enus)} var relatedtarget = {Relatedtarget:this} $parent. Trigger (E = $. Event (' Show.bs.dropdown ', relatedtarget)) if (e.isdefaultprevented ()) return to $this. Trigger (' Focus '). attr (' Aria -expanded ', ' true ') $parent. Toggleclass (' open '). Trigger ($. Event (' Shown.bs.dropdown ', Relatedtarget)} return false} Dropdown.prototype.keydown = function (e) {if (!/(38|4 0|27|32)/.test (E.which) | | /input|textarea/i.test (E.target.tagname)) return to var $this = $ (this) E.preventdefault () e.stoppropagation () if ($th Is.is ('. Disabled,:d isabled ')) return var $parent = GetParent ($this) var isactive = $parent. Hasclass (' open ') if (!isa Ctive && E.which!= 27 | | IsActive && E.which = = {if (E.which = 27) $Parent.find (toggle). Trigger ("Focus") return $this. Trigger (' click ')} var desc = ' Li:not (. Disabled): Visible a ' var $ Items = $parent. Find (". Dropdown-menu ' + desc) if (! $items. Length) return return var index = $items. Index (E.target) if (e.wh    Ich = && Index > 0 index--//up if (E.which = = && Index < $items. length-1) index++ Down if (!~index) index = 0 $items. EQ (index). Trigger (' Focus ')}//DROPDOWN PLUGIN DEFINITION//= = ======================= function Plugin (option) {return This.each (function () {var $this = $ (this) var data = $th Is.data (' Bs.dropdown ') if (!data) $this. Data (' Bs.dropdown ', (data = new Dropdown (this)) if (typeof option = = ' string ') Data[option].call ($this)})} var old = $.fn.dropdown $.fn.dropdown = Plugin $.fn.dropdown.constructor = Drop
 Down//DROPDOWN NO CONFLICT//==================== $.fn.dropdown.noconflict = function () {$.fn.dropdown = old return this}//APPLY to STANDARD DROPDOWN ELEMENTS//=================================== $ (document). On (' Click.bs.dropdown.data-api ', Clearmenus). On (' Click.bs.dropdown.data-api ', '. Dropdown form ', function (e) {e.stoppropagation ()}). On (' Click.bs.dro Pdown.data-api ', toggle, Dropdown.prototype.toggle). On (' Keydown.bs.dropdown.data-api ', toggle, Dropdown.prototype.keydown). On (' Keydown.bs.dropdown.data-api ', '. Dropdown-menu ', Dropdown.prototype.keydown)} (
 JQuery);

The JavaScript code structure can be divided into three parts:
1. class definition 1-125 lines
2. Plugin definition 126-144 lines
3. Conflict resolution 148-153 rows
4. Apply to standard Drop-down menu element 155-166 line

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.