Source

ملخص

مكونات وخيارات لتخطيط مشروع Bootstrap الخاص بك ، بما في ذلك حاويات التغليف ، ونظام شبكة قوي ، وكائن وسائط مرن ، وفئات أدوات مساعدة سريعة الاستجابة.

حاويات

الحاويات هي عنصر التخطيط الأساسي في Bootstrap وهي مطلوبة عند استخدام نظام الشبكة الافتراضي الخاص بنا . اختر من حاوية سريعة الاستجابة ذات عرض ثابت (بمعنى max-widthالتغييرات في كل نقطة توقف) أو عرض السوائل (مما يعني أنها 100%واسعة طوال الوقت).

بينما يمكن أن تتداخل الحاويات ، فإن معظم التخطيطات لا تتطلب حاوية متداخلة.

<div class="container">
  <!-- Content here -->
</div>

استخدمه .container-fluidلحاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض.

<div class="container-fluid">
  ...
</div>

نقاط توقف مستجيبة

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

يستخدم Bootstrap بشكل أساسي نطاقات استعلام الوسائط التالية - أو نقاط التوقف - في ملفات Sass المصدر الخاصة بنا للتخطيط ونظام الشبكة والمكونات.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

نظرًا لأننا نكتب CSS المصدر في Sass ، فإن جميع استعلاماتنا الإعلامية متاحة عبر Sass mixins:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

نستخدم أحيانًا استعلامات الوسائط التي تسير في الاتجاه الآخر (حجم الشاشة المحدد أو أصغر ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

لاحظ أنه نظرًا لأن المتصفحات لا تدعم حاليًا استعلامات سياق النطاق ، فإننا نتعامل مع القيود والبادئات وإطارات min-العرضmax- ذات العروض الكسرية (والتي يمكن أن تحدث في ظل ظروف معينة على الأجهزة عالية الدقة ، على سبيل المثال) باستخدام قيم ذات دقة أعلى لهذه المقارنات .

مرة أخرى ، تتوفر استعلامات الوسائط هذه أيضًا عبر Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

توجد أيضًا استعلامات ومزيج وسائط لاستهداف شريحة واحدة من أحجام الشاشات باستخدام الحد الأدنى والحد الأقصى لعرض نقاط التوقف.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

استعلامات الوسائط هذه متاحة أيضًا عبر Sass mixins:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

وبالمثل ، قد تمتد استعلامات الوسائط إلى عروض نقاط فاصلة متعددة:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

سيكون مزيج Sass لاستهداف نفس نطاق حجم الشاشة:

@include media-breakpoint-between(md, xl) { ... }

مؤشر Z

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

تبدأ هذه القيم الأعلى برقم عشوائي ، مرتفع ومحدّد بما يكفي لتفادي التعارضات بشكل مثالي. نحن بحاجة إلى مجموعة قياسية من هذه عبر مكوناتنا ذات الطبقات - تلميحات الأدوات ، popovers ، navbars ، القوائم المنسدلة ، النماذج - حتى نتمكن من الاتساق بشكل معقول في السلوكيات. لا يوجد سبب يمنعنا من استخدام 100+ أو 500+.

نحن لا نشجع على تخصيص هذه القيم الفردية ؛ إذا قمت بتغيير واحدة ، فمن المحتمل أن تحتاج إلى تغييرها جميعًا.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

للتعامل مع الحدود المتداخلة داخل المكونات (على سبيل المثال ، الأزرار والمدخلات في مجموعات الإدخال) ، نستخدم z-indexقيمًا منخفضة من رقم واحد للحالات الافتراضية 1، وتحوم 2، 3والحالات النشطة. عند التمرير / التركيز / النشاط ، نضع عنصرًا معينًا في المقدمة z-indexبقيمة أعلى لإظهار حدوده على العناصر الأشقاء.