Bootstrapは、レスポンシブレイアウト、モバイルファーストWebプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSフレームワークです。 - 中国のドキュメントをブートストラップします
ブートストラップは、レスポンシブレイアウト、モバイルデバイスの優先順位、使いやすく、学習しやすいため、最も人気のあるフロントエンド開発フレームワークになりました。
Bootstrapのレスポンシブデザイン、コンポーネント開発、JavaScriptプラグイン開発とプリプロセシングスクリプト開発方法も学習する価値があります。
ソースコード
ソースコードのダウンロードとコンピレーション
GitHubに最新か最も完全なブートストラップソースコードをダウンロードすることをお勧めします。
GitHubは、ソースコードだけでなく、ブートストラップドキュメントのソースファイルも含まれるブートストラップソースコードホスティングリポジトリです。したがって、ネットワークなしでドキュメントソースコードをコンパイルして実行することにより、ローカルマシンのドキュメントを閲覧できます。
ソースコードディレクトリ
ブートストラップソースコードディレクトリには次のものが含まれています。
•展開コードSubdirectory_gh_pagesを文書化する
•ソースコードのドキュメントサブディレクトリドキュメント/
•ブートストラップ展開コードSubdirectory Dist/
•ブートストラップスクリプトサブディレクトリJS/
•ブートストラップスタイルのサブディレクトリレス/
•ブートストラップフォントサブディレクトリフォント/
•グラントビルドツールスクリプトサブディレクトリグラント/
•パッケージマネージャーNuget Subdirectory Nuget/
•多くの構成ファイル
エントリポイント
ブートストラップフレームワークのソースコードは非常に複雑であり、著者の開発フレームワークの観点から分析することは間違いなく困難です。フレームワークの構築方法または展開方法に注意を払うことなく、問題を簡素化できますが、フレームワークの仕組み、つまりHTML、CSS/LESS、JSパーツのみに焦点を当てることができます。
分裂とガバナンスのアイデアを通して、複雑な問題は多くの単純な問題に分類され、解決されます。すべての小さな問題が解決すると、複雑な問題が簡単に解決されます。
ブートストラップフレームワーク全体をコンポーネントに分割し、エントリポイントとしてコンポーネントを取り、それらの作業原則を理解してから、フレームワーク全体を徐々に分析します。
コンポーネント分析
ドロップダウンメニュードロップダウン
HTMLコード
<！ - コンポーネント：ドロップダウンメニュー - > <div> - トリガーボタン - > <ボタンタイプ= "ボタン=" data-toggle = "ドロップダウン">ドロップダウン<span> </span> </button> <！ - ドロップダウンメニュー - > <ul> <li> <a href = "＃">アクション</a> href = "＃">ここに何か他のもの</a> </li> </ul> </div>
注：ソースコードのアクセス可能な属性ARIA-*は、簡単な分析のためにコードから削除されます。実際のアプリケーションでは省略することはできません。ボタンスタイルは分析のためにここでは拡張されていません
CSSコード
//ドロップダウン矢印/caret.caret {display：inline-block;幅：0;高さ：0;マージン左：2px;垂直アライイン：中央; border-top： @caret-width-base dushed; border-top： @caret-width-base solid〜 "/9"; // IE8 Border-Right： @Caret-Width-Base Solid透明。境界左： @caret-width-base solid transparent;} //ドロップダウンラッパー（div）.dropup、.dropdown {position：relative; //親要素の相対的な位置付け} //ドロップダウンを閉じるときにドロップダウントグルのフォーカスを防止します。DropDown-Toggle：Focus {outline：0;} //ドロップダウンメニュー（ul）.dropdown-menu {position：absolute; //子要素の絶対的なポジショニングTOP：100％; //ドロップダウンメニューは、左：0; z-index： @zindex-dropdown;表示：なし; //デフォルトで非表示、トリガーボタンが表示されたとき（表示：ブロック）フロート：左;最小幅：160px;パディング：5px 0;マージン：2px 0 0; //デフォルトのULリストスタイルをオーバーライド：なし; font-size： @font-size-base;テキストアライグ：左;バックグラウンドカラー： @dropdown-bg;境界線：1px solid @dropdown-fallback-border; // IE8フォールバックボーダー：1PX SOLID @DropDown-Border; Border-Radius： @Border-Radius-Base; .box-shadow（0 6px 12px RGBA（0,0,0、.175））;バックグラウンドクリップ：パディングボックス。 //ドロップダウンメニューを右に並べる＆.Pull-right {右：0;左：auto; } // 1px.divider {.nav-divider（@dropdown-divider-bg）の高さの水平方向の仕切り; } //ドロップダウンメニュー内のリンク> li> a {display：block;パディング：3px 20px;クリア：両方; font-weight：正常; line-height： @line-height-base;色： @Dropdown-Link-Color;ホワイトスペース：nowrap; //リンクがラッピングを防ぐ}} // hover/focus state.dropdown-menu> li> a {＆：hover、＆：focus {text-decoration：none;色： @Dropdown-Link-Hover-Color;バックグラウンドカラー： @Dropdown-Link-Hover-BG; }} // Active State.DropDown-Menu> .active> a {＆、＆：Hover、＆：focus {color： @dropdown-link-active-color;テキスト装置：なし;アウトライン：0;バックグラウンドカラー： @DropDown-Link-Active-BG; }} //ドロップダウンメニューを表示します。Open{> .DropDown-Menu {display：block; // show} //次の場合のアウトラインを削除します：フォーカスがトリガーされた> a {outline：0; }} //メニューPositioning.dropdown-menu-right {left：auto; // `.dropdown-menu` right：0;}からデフォルトをリセットします。右：auto;} //ドロップダウンセクションHeaders.dropdown-Header {display：block;パディング：3px 20px; font-size： @font-size-small; line-height： @line-height-base;色： @Dropdown-Header-Color;ホワイトスペース：nowrap; //> li> a> a} //ノンドロップダウンメニュー領域。ドロップダウンバックドロップ{position：sixt;左：0;右：0;下：0;上：0; z-index：（@zindex-dropdown-10）; //ドロップダウンメニューをクリックすると、ドロップダウンメニューが閉じられないことを確認してください} //右アラインドドロップダウン> pull-right> .dropdown-menu {right：0;左：auto;} //ドロップダウンがボトムアップ（別名、ドロップアップメニュー）////標準の.dropdownクラスの後に.dropupを追加するだけで、bro。//todo：これを抽象化します。 Border-Bottom： @Caret-Width-base dashed; Border-Bottom： @Caret-Width-Base Solid〜 "/9"; // IE8コンテンツ： ""; } //ボトムアップメニューのさまざまな位置決め.dropdown-menu {top：auto;下：100％;マージンボトム：2px; }} //コンポーネントアラインメント//// Navbar.lessと変更されたコンポーネントアライメントあたりの繰り返し。 } //デフォルトの右アライメントメニューのオーバーライドに必要です。 // bewelihoodでcome v4を削除します。 .dropdown-menu-left {.dropdown-menu-left（）; }}}このドロップダウンメニューコンポーネントの動作は次のとおりです。トリガーボタンをクリックすると、ドロップダウンメニューが表示され、非ドロップダウンメニュー領域がクリックされると、ドロップダウンメニューが表示されます。
実装の原則：
1.トリガーボタンのみが最初に表示され、.DropDownラッパーのデフォルトのドロップダウンメニューが閉じられ、.DropDown-Menu Hidesディスプレイ：デフォルトではありません
2。[トリガー]ボタンがクリックされたら、.dropdownの後にクラスを追加します。 .openでは、.dropdown-menuの表示値はブロックです。したがって、追加/削除します。クラスは、ドロップダウンメニューを表示/非表示にすることを意味します。
3.非ドロップダウンメニュー領域をクリックすると、.dropdownはclass.penを削除します。つまり、ドロップダウンメニューを隠します。非ドロップダウンメニュー領域を実装する原則は、固定された位置決め、タイル、Zインデックスがドロップダウンメニューよりも小さいため、ドロップダウンメニューをクリックするとドロップダウンメニューが非表示にならないことです。
JavaScriptコード
/* ================================================================================ ============================================================================== ================================================================================ ============================================================================== ================================================================================ ============================================================================== ============================================================================== ==============================================================================ライセンスMIT（https://github.com/twbs/bootstrap/blob/master/license） * ============================================================================= ============================================================================= var backdrop = '.dropdown-backdrop' var toggle = '[data-toggle = "dropdown"]' var dropdown = function（element）{$（element）{$（element）.on（ 'click.bs.dropdown'、this.toggle）} version = '3.3.6' function getSparent（$ this）{var selectr = $ this.attr（ 'selectr（' selectr（ 'selecter（' selecter）） $ this.attr（ 'href'）selector = selector && /# [a-za-z]/.test(selector）&& selector.replace（/.*(？=# [^/ s]*$）/、 ''）// ie7} var $ parent = selector＆$（selector $（selector $（selector " $ parent：$ this.parent（）} function clearmenus（e）{if（e && e.which === 3）return $（backdrop）.remove（）$（gruction（）{var $ this = $（this）var $ parent = getParent（$ this）var relatedtarget = {returntarget：if（！$ 'eeasclass（' end.hasclass） e.type == 'クリック' && /input|textarea/i.test(e.target.tagname）&& $ .contains（$ parent [0]、e.target））return $ parent.trigger（e = $ .event（ 'hide.bs.dropdown'、relatettarget））） 'false'）$ parent.removeclass（ 'open'）。トリガー（$ $ parent.hasclass（ 'open'）clearmenus（）if（！isactive）{if（ 'ontouchstart' in document.documentelement &&！$ parent.closest（ '。Navbar-nav'）。 .intertafter（$（this））.on（ 'click'、clearmenus）} var relatedtarget = {relatedtarget：this} $ parent.trigger（e = $ .event（ 'show.bs.dropdown'、relatedtarget））if（e.isdefaultPrevented（））return $ $ this.attr（ 'focie'） .toggleclass（ 'open'）.trigger（$。event（ 'shown.bs.dropdown'、relategtarget））} return false} dropdown.prototype.keydown = function（e）{if（！/（！/（38 | 27 | 32）/。 $（this）e.preventdefault（）e.stoppropagation（）if（$ this.is（ '。無効、：disabled'））return var $ parent = getParent（$ this）var isactive = $ parent.hasclass（ 'open'） $ parent.find（トグル）.trigger（ 'focus'）return $ this.trigger（ 'click'）} var desc = 'li：not（.disabled）：var $ items = $ parent.find（'。Dropdown-Menu' + desc）if（！$ items.length）return var index = $ items.index（e.terget）if（e. （E.which == 40 && index <$ items.length -1）index ++ // down if（！〜index）index = 0 $ items.eq（index）.trigger（ 'focus'）} //ドロップダウンプラグイン定義// ==================================================プラグイン（オプション）{return this.each（function（）{var $ this = $（this）var data = $ this.data（ 'bs.dropdown'）if（！data）$ this.data（ 'bs.dropdown'、（data = new dropdown（this）））if（typeof option == 'string'）data [$ option [$ option] .call. $ .fn.dropdown = plugin $ .fn.dropdown.constructor = dropdown // Dropdown no conflence // ================================== =============================================================================================== =============================================================================================== $（document）.on（ 'click.bs.dropdown.data-api'、clearmenus）.on（ 'click.bs.dropdown.data-api'、 '.dropdown form'、function（e）{e.Stoppropagation（）}）.on .on（ 'keydown.bs.dropdown.data-api'、トグル、ドロップダウン.prototype.keydown）.on（ 'keydown.bs.dropdown.data-api'、 '.dropdown-menu'、dropdown.prototype.keydown）}（jquery）;JavaScriptコード構造は、次の3つの部分に分割できます。
1。クラス定義行1-125
2。プラグインの定義行126-144
3。競合線148-153を解決します
4.標準のドロップダウンメニュー要素行155-166に適用します
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。