تحليل رمز مصدر Bootstrap (ليتم متابعته)

Bootstrap هو إطار HTML و CSS و JS الأكثر شعبية لتطوير تخطيطات مستجيبة ومشاريع الويب الأولى للهاتف المحمول. - الوثائق الصينية bootstrap

أصبحت Bootstrap إطار تطوير الواجهة الأمامية الأكثر شعبية بسبب دعمه للتخطيط المستجيب وأولوية الجهاز المحمول وسهل الاستخدام وسهل التعلم.

تستحق التصميم المستجيب لـ Bootstrap وتطوير المكونات وتطوير المكونات الإضافية JavaScript وطرق تطوير البرامج النصية المعالجة المسبقة أيضًا التعلم.

رمز المصدر

تنزيل رمز المصدر وتجميعه

يوصى بتنزيل أحدث وأجمل رمز مصدر bootstrap على Github.

Github هو مستودع لاستضافة رمز مصدر Bootstrap لا يحتوي على رمز المصدر فحسب ، ولكن أيضًا في الملفات المصدر لوثائق Bootstrap. لذلك ، يمكنك تصفح المستندات على الجهاز المحلي عن طريق تجميع وتشغيل رمز مصدر المستند بدون شبكة.

دليل رمز المصدر

يحتوي دليل رمز مصدر bootstrap على:

• رمز نشر المستندات الفرعية subdirectory_gh_pages/

• مستندات الدليل الفرعي لمستندات مصدر الوثيقة/

• رمز نشر Bootstrap subdirectory dist/

• Bootstrap Script Subdirectory JS/

• الدليل الفرعي على نمط Bootstrap أقل/

• خطوط الخطوط الفرعية الخطية/ خطوط Bootstrap/

• Grunt Build Tool Script Subdirectory Grunt/

• مدير الحزمة nuget subdirectory nuget/

• العديد من ملفات التكوين

نقطة الدخول

إن الكود المصدري لإطار bootstrap معقد للغاية ، ومن الصعب بلا شك تحليل من منظور إطار تطوير المؤلف. يمكن تبسيط المشكلة ، دون الاهتمام بكيفية بناء الإطار أو نشره ، ولكن التركيز فقط على كيفية عمل الإطار ، أي أجزاء HTML و CSS/LEM و JS.

من خلال فكرة الانقسام والحوكمة ، يتم تقسيم المشكلات المعقدة إلى العديد من المشكلات البسيطة وحلها. عندما يتم حل جميع المشكلات الصغيرة ، سيتم حل المشكلات المعقدة بسهولة.

قسّم إطار bootstrap بأكمله إلى مكونات ، واتخاذ المكونات كنقطة دخول ، وفهم مبدأ عملهم ، ثم تحليل الإطار بأكمله تدريجياً.

تحليل المكون

القائمة المنسدلة المنسدلة

رمز HTML

 <!-المكون: القائمة المنسدلة-> <div> <!-زر الزناد-> <button type = "button" data-toggle = "sropdown"> المنسدلة <span> </span> </button> <!-القائمة المنسدلة-> <ul> <li> <a href = "#" href = "#"> شيء آخر هنا </a> </li> </ul> </viv>

ملاحظة: تتم إزالة السمة التي يمكن الوصول إليها ARIA-* في الكود المصدر من الكود لتحليل سهل. لا يمكن حذفه في التطبيقات العملية. لا يتم توسيع نمط الزر هنا للتحليل

رمز CSS

 // القائمة المنسدلة السهم/caret.caret {display: inline block ؛ العرض: 0 ؛ الارتفاع: 0 ؛ الهامش اليساري: 2px ؛ المحاذاة الرأسية: الأوسط ؛ أعلى الحدود: @caret-width قاعدة متقطعة ؛ أعلى الحدود: @caret-width قاعدة صلبة ~ "/9" ؛ // ie8 الحدود اليمين: @caret-width قاعدة صلبة شفافة ؛ الحدود اليسار: @caret-width-base شفاف صلبة ؛} // غلاف القائمة المنسدلة (div) .dropup ، .dropdown {الموضع: النسبية ؛ // تحديد المواقع النسبية للعنصر الأصل} // منع التركيز على التبديل المنسدلة عند إغلاق القائمة المنسدلة. // تحديد المواقع المطلقة لعناصر الطفل أعلى: 100 ٪ ؛ // القائمة المنسدلة قريبة من الحافة السفلية للعنصر الأصل اليسار: 0 ؛ Z-index: @zindex-dropdown ؛ العرض: لا شيء ؛ // إخفاء افتراضيًا ، عند عرض زر الزناد (العرض: كتلة) تعويم: اليسار ؛ Min-Width: 160px ؛ الحشو: 5px 0 ؛ الهامش: 2px 0 0 ؛ // تجاوز الافتراضية على قائمة قائمة UL: لا شيء ؛ حجم الخط: @font-size-base ؛ محاذاة النص: اليسار ؛ خلفية اللون: @REPDOWN-BG ؛ الحدود: 1 بكسل Solid @القائمة المنسدلة الحدود ؛ // IE8 Froprack Border: 1px Solid @Retpown-Border ؛ الحدود الحدودية: @border-radius-base ؛ .box-shadow (0 6px 12px RGBA (0،0،0 ، .175)) ؛ Clip الخلفية: صندوق الحشوة ؛ // يتوافق مع القائمة المنسدلة إلى اليمين و .pull-right {right: 0 ؛ اليسار: السيارات ؛ } // مقسم أفقي مع ارتفاع 1px.divider {.nav-divider (@dropdown-divider-bg) ؛ } // الروابط داخل القائمة المنسدلة> li> a {display: block ؛ الحشو: 3px 20px ؛ واضح: كلاهما ؛ خط الوزن: طبيعي ؛ Line-Height: @line-line-base ؛ اللون: @منسدلة الارتباط. الفضاء الأبيض: Nowrap ؛ // منع الروابط من التفاف}} // hover/focus state.dropdown-menu> li> a {&: hover ، &: focus {text-decoration: none ؛ اللون: @القائمة المنسدلة ذات اللون المتوهج ؛ خلفية اللون: @REPDOWN-LINK-HOVER-BG ؛ }} // Active State.dropdown-menu> .active> a {& ، &: hover ، &: focus {color: @stropdown-link-color ؛ تدمير النص: لا شيء ؛ الخطوط العريضة: 0 ؛ خلفية اللون: @REPDOWN-LINK-ACTICTY-BG ؛ }} // إظهار القائمة المنسدلة. open {> .dropdown-menu {display: block ؛ // show} // قم بإزالة المخطط التفصيلي عندما: يتم تشغيل التركيز> A {Outline: 0 ؛ }} // menuiting.dropdown-menu-right {left: auto ؛ // إعادة تعيين الافتراضي من `.dropdown-menu` اليمين: 0 ؛} //` .pull-right` nav component..dropdown-menu-left {left: 0 ؛ اليمين: Auto ؛} // القسائم القائمة المنسدلة. الحشو: 3px 20px ؛ حجم الخط: @font-size-small ؛ Line-Height: @line-line-base ؛ اللون: @القائمة المنسدلة. الفضاء الأبيض: Nowrap ؛ // كما هو الحال مع> li> a} // area area. اليسار: 0 ؛ اليمين: 0 ؛ أسفل: 0 ؛ أعلى: 0 ؛ Z-index: (@zindex-dropdown-10) ؛ // تأكد من عدم إغلاق القائمة المنسدلة عند النقر فوق قائمة القائمة المنسدلة} // Righted Retropdowns.pull-right> .dropdown-menu {right: 0 ؛ اليسار: Auto ؛} // السماح للمنسدلة بالانتقال إلى أعلى (ويعرف أيضًا باسم Dropup-Menu) ////فقط أضف .dropup بعد فئة .DropDown القياسية وأنت تم تعيينه ، Bro.// todo: Actured This بحيث لا يتم وضع أنماط Navbar الثابتة هنا؟ Border-Bottom: @caret-width-base متقطع ؛ border-bottom: @caret-width-base solid ~ "/9" ؛ // محتوى IE8: "" ؛ } // تحديد موقع مختلف للقائمة القاع .dropdown-menu {TOP: Auto ؛ القاع: 100 ٪ ؛ هامش القاع: 2px ؛ }} // محاذاة المكون //// إعادة التكرار لكل navbar.less ومحاذاة المكون المعدلة هناك. } // ضروري لتجاوز القائمة المحاذاة اليمنى الافتراضية. // سوف يزيل يأتي v4 في جميع الاحتمالات. .dropdown-menu-left {.dropdown-menu-left () ؛ }}}

سلوك مكون القائمة المنسدلة هذا هو: عندما يتم النقر فوق زر التشغيل ، يتم عرض القائمة المنسدلة أسفله ، وعندما يتم النقر فوق منطقة القائمة غير المنسدلة ، يتم إخفاء القائمة المنسدلة.

مبدأ التنفيذ:

1. يتم عرض زر الزناد فقط في البداية ، يتم إغلاق القائمة المنسدلة.

2. عند النقر فوق زر الزناد ، أضف فئة. فتح بعد .dropdown. في .epen ، فإن قيمة عرض .dropdown-menu هي كتلة. لذا أضف/إزالة. فئة open تعني إظهار/إخفاء القائمة المنسدلة.

3. عند النقر على منطقة القائمة غير dropdown ، يقوم .dropdown بحذف الفئة. open ، أي ، يخفي القائمة المنسدلة. يتمثل مبدأ تنفيذ منطقة القائمة غير المنخفضة في أن تحديد المواقع الثابتة ، والبلاط ، و z-index أصغر من القائمة المنسدلة ، بحيث لن يتم إخفاء القائمة المنسدلة عند النقر على القائمة المنسدلة.

رمز JavaScript

 /* =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== مرخصة تحت معهد ماساتشوستس للتكنولوجيا (https://github.com/twbs/bootstrap/blob/master/license) * ================================================================ ================================================================ var backdrop = '.dropdown-backdrop' var toggle = '[data-toggle = "tropdown"]' var repdown = function (element) {$ (element) .on ('click.bs.dropdown' ، this.toggle)}}} version = '3.3 $ this.attr ('href') Selector = Selector && /# Bududa-za-z/201/. $ parent: $ this.parent ()} function clearmenus (e) {if (e && e. whish === 3) return $ (backdrop) .remove () $ (toggle) .each (function () && e.type == 'click' && /intextarea/i.test (.target.tagname) && $. $ this.attr ('aria-expanded' ، 'false') $ parent.removeclass ('open'). trigger ($. event ('hidden.bs.dropdown' ، conferenttarget))})} dropdown.prototype.toggle = function (e) {var $ هذا = $ (this) getParent ($ this) var isactive = $ parent.hasClass ('Open') clearmenus () if (! isactive) {if ('onTouchStart' in document.documentElement &&! $ parent.closest ('. navbar-nav'). .addClass ('القائمة المنسدلة backdrop') .InsertAfter ($ (this)) .on ('click' ، clearmenus)} var allingtarget = {conferenceTarget: this} $ parent.trigger (e = $ .event ('show.bs.dropdown' ، conferenceTarget) if ( .attr ('aria-expanded' ، 'true') $ parent .toggleclass ('Open') .Trigger ($. event ('dister.bs.dropdown' ، archandtarget))} return false}} elt (e. whanch) /input Otextarea/i.test(e.target.tagname)) إرجاع var $ this = $ (this) e.preventDefault () E. whish == 27) {if ( ( ======================================================= يتعلق (البيانات = البيانات الجديدة (هذا))) إذا كان (typeof ortion == 'string') data [Option] .Call ($ this)}} var old = $ .fn.dropdown $ .fn.dropdown = plugin $ .fn.dropdow @ ========================================================================= ========================================================================= $ (وثيقة) .on ('click.bs.dropdown.data-api' ، clearmenus) .on ('click.bs.dropdown.data-api' ، '.dropdown form' ، function (e) { .on ('keydown.bs.dropdown.data-api' ، toggle ، dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api' ، '.

يمكن تقسيم بنية رمز JavaScript إلى ثلاثة أجزاء:

1. خطوط تعريف الفئة 1-125

2. خطوط تعريف البرنامج المساعد 126-144

3. حل خطوط الصراع 148-153

4. تنطبق على خطوط عناصر القائمة المنسدلة القياسية 155-166

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.