1. الشكل
ملف رمز المصدر:
_form.scss
mixins/_form.scss
1. وفقًا للتسلسل الهرمي: مجموعة الشكل-> مجموعة السيطرة/الإدخال/مجموعة-فرضية---> علامات مختلفة
2. يتم تقسيم الحاويات مثل مجموعة النماذج/النماذج/النموذج/مجموعة الإدخال/النموذج-السيطرة إلى طريقتان عرض: الكتلة والكتل المضمسي. يتم استخدام خلايا الجدول لتحقيق مستوى مجموعة الإدخال.
.input-group {display: INLINE TABLE ؛ المحاذاة الرأسية: الأوسط ؛ .input-group-addon ، .input-group-BTN ، .form-control {width: auto ؛ }}3. الإدخال-مجموعة-Addon: إذا قام الفصل بإدراج أيقونة نص صفحة الويب ، فسيقوم بتوضيح البيكسل السابق.
الحل: لا يمكن استخدام الغليفيكون بالاقتران مع أنماط أخرى ، ولكن يتم استخدامه داخليًا ، لأن الغليفيكون لديه إعداد 1 بكسل للأعلى:
. أعلى: 1 بكسل ؛ العرض: كتلة مضمنة. Font-Family: 'Glyphicons halflings' ؛ على غرار الخط: طبيعي ؛ خط الوزن: طبيعي ؛ ارتفاع الخط: 1 ؛ -webkit-font-smooting: مضادة للضغط ؛ -زوز-أوسكس-فونت-رمادي
2. شريط الملاحة (NAVBAR)
ملف رمز المصدر:
_navbar.scss
1. تقسيم المناطق الداخلية بشكل رئيسي ، مثل الرأس ، مناطق أخرى ؛ ومواقع شريط التنقل في وضع
2. تطبيق المجلد (تمت إزالته في 4.0) ، أي فئة Navbar-Collapse ، بدلاً من الانهيار ، وتظهر طبقة خفية على الزر
2.1. Navbar-Collapse: عندما يكون أكبر من نقطة التوقف ، سيتم عرضه (لأن الانهيار مخفي افتراضيًا)
3. يدعم المحتوى NAV ، العلامة التجارية ، النموذج ، التبادل
4. Navbar-Toggler (4.0 تم إزالته): تم تعيينه على العرض عندما تكون الشاشة أقل من قيمة نقطة الإيقاف (768) ، وفي 4.0 ، يتم استخدام الانهيار لعرض هذا الزر مباشرة. لا يوجد حد على حجم الشاشة. يجب أيضًا استخدام تطبيق Navbar-toggle مع الانهيار.
5. Navbar-Static-Top: إنه يضيف Zindex فقط ، ويزيل الزوايا المستديرة ، وعرض الحدود وغيرها من المحتويات.
6. قاع/أسفل القاع المفروض
7. Navbar-Brand: العلامة التجارية ، يمكنك وضع أسماء صفحات الويب وشعارات الشركة وغيرها من المحتويات
8. Navbar-Toggle: صورة لنقرة تستخدم للتقليص ، والتي سيتم عرضها عندما تكون أقل من نقطة التوقف ، وإذا كانت أكبر من هذه القيمة ، فسيتم إخفاؤها (و ، شاشة التبديل تتوافق بشكل صحيح وتعمل كعنصر تحديد موضع نسبي):
.navbar-toggle {الموضع: النسبي ؛ تعويم: صحيح. الهامش اليمين: $ navbar-padding أفقية ؛ الحشو: 9px 10px ؛ include navbar-vertical-align (34px) ؛ لون الخلفية: شفاف. صورة الخلفية: لا شيء ؛ // إعادة تعيين النمط الافتراضي غير المعتاد Firefox-on-Android ؛ انظر https://github.com/necolas/normalize.css/issues/214 الحدود: 1px شفاف صلب ؛ الحدود الحدودية: $ الحدود القاعدة ؛ // نقوم بإزالة "المخطط التفصيلي" هنا ، لكننا نعوض لاحقًا إرفاق `: hover` // الأنماط إلى": Focus`. &: Focus {Outline: 0 ؛ } // bars .icon-bar {display: block ؛ العرض: 22px ؛ الارتفاع: 2px ؛ الحدود الراديوس: 1 بكسل ؛ } .icon-bar + .icon-bar {margin-top: 4px ؛ } media (min-width: $ grid-float-breakpoint) {display: none ؛ }}9. Navbar-Nav: قامت NAV الأصلية ببعض الإعدادات المتوافقة. هل يجب أن نقوم بضبط النمط أسفل نقطة الإيقاف ، والنمط تحت نقطة التوقف ، أو إزالة لون الخلفية الافتراضي ، الظل ، إلخ.
10. شكل Navbar: قم بضبط جميع النماذج بشكل أساسي لتكون العناصر المضمنة
11. Navbar-Text و Navbar-BTN: قام كلاهما بإعداد إعدادات التوافق المناسبة بناءً على الافتراضي
12. Navbar يوفر موضوعين: الافتراضي والعكس. كل موضوع له معالجة توافق النمط المقابل لمكوناتها.
13. شريط التنقل نفسه ليس لديه العديد من الأساليب. إنه يوفر فقط محتلين: التبديل والعلامة التجارية ، وخاصةً توفير موضوعين ، بالإضافة إلى مجموعة من أربعة مكونات: القائمة المنسدلة ، والانهيار ، والنموذج ، والبحرية.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Secorts ، مرحبًا بك في النقر للتعلم.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.