Bootstrap

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

تقديم إلى إطار Bootstrap

مقدمة

كيف تضيف إطار عمل Bootstrap إلى مشروعك، وما هي ميزاته الرئيسية.

تنزيل الإطار

تنزيل إطار Bootstrap للحصول على شفرة CSS و JavaScript المجمَّعة (compiled)، أو الشفرة المصدرية (source code)، أو تضمينه باستخدام مدير الحزم.

المحتويات

استكشاف محتوى Bootstrap، بما في ذلك الإصدارات المُجمّعة والشفرات المصدرية. مع ذكر أمور تتعلق بملحقات JavaScript.

دعم المتصفحات

معلومات عن المتصفّحات والأجهزة، من الحديثة إلى القديمة، التي يدعمها Bootstrap؛ مع المرور على الحالات الفريدة والعلل الخاصّة بكل واحد منها.

مكتبات JavaScript

معلومات عن ملحقات JavaScript الاختيارية المبنية على jQuery، وخيارات البيانات وواجهة التطبيقات البرمجية API وأمور أخرى.

تخصيص المظهر (Theming)

التعديل على شكل العناصر في إطار Bootstrap باستخدام Sass.

أدوات البناء (Build tools)

طريقة استخدام سكربتات npm المُضمَّنة في Bootstrap لتوليد التوثيق، وتجميع الشفرة المصدرية، وتشغيل الاختبارات وغير ذلك.

تضمين Bootstrap باستخدام Webpack

كيفية تضمين Bootstrap في المشاريع باستخدام Webpack 3.

سهولة الوصول (Accessibility)

نظرة مُختصرة على ميزات Bootstrap ومواطن قصوره في إنشاء محتوى سهل الوصول Accessibility.

تخطيط الصفحات

لمحة عن تخطيط الصفحات

يحوي إطار العمل Bootstrap عناصر وخيارات لتخطيط مشاريع تطوير الويب؛ بما في ذلك الحاويّات (containers)، ونظام الشبكة (grid system)، وكائنات الوسائط (media object)، وأصناف أدوات متجاوبة.

الشبكة (Grid)

استخدام الصناديق المرنة Flexbox عبر نظام الشبكة Grid المُعرَّف مسبقًا في إطار العمل Bootstrap، والذي يتيح إنشاء مُخطَّطات لصفحات متجاوبة على مختلف الأجهزة وقياسات الشاشة.

تخطيط كائنات الوسائط (Media object)

كيفيّة إنشاء مكوِّنات متداخلة شبيهة بالتعليقات في المدوّنات أو تغريدات تويتر والردود عليها في إطار العمل Bootstrap باستخدام كائن الوسائط Media object.

أدوات مساعدة (Utilities for layout)

تعرّف على الأصناف الخدميّة في إطار العمل Bootstrap واستفد منها في مهامّ مثل إظهار المحتوى، وإخفائه، ومحاذاته ومباعدته.

تنسيق المحتوى

التنسيق الافتراضي (Reboot)

ينبني إطار العمل Bootstrap على مجموعة من تعديلات CSS - تُعرَف باسم Reboot - تغيّر السلوكي الافتراضي لبعضٍ من عناصر الصفحة.

الخطوط والنصوص (Typography)

كيف تُضبَط الإعدادات العامّة للخطوط والنصوص (مثل الترويسات، متن الصفحة Body، القوائم ...إلخ) في إطار العمل Bootstrap.

الشفرات البرمجية (Code)

كيفيّة إدراج تعليمات برمجيّة مهما كان طولها في صفحات ويب تُبنى عبر إطار العمل Bootstrap.

الصور (Images)

تهيئة الصوّر لإنشاء صفحات ويب متجاوبة في إطار العمل Bootstrap، واستخدام الأصنتف الخدميَّة المُعدَّة سلفًا لإضافة تنسيقات متنوّعة عليها.

الجداول (Tables)

تعرَّف على أصناف خدميّة لتنسيق الجداول Tables بأنماط متنوّعة في إطار العمل Bootstrap.

الرسومات التوضيحية (Figures)

تنسيق عنصر <figure> لإنشاء رسومات توضيحيّة توجد بها صوّر ونصوص اختياريّة عن الصوّر.

المكونات

التنبيهات (Alerts)

أظهر رسائل للزوّار باستخدام مكوِّن التنبيهات في إطار العمل Bootstrap بغرض التنبيه، أو التحذير، أو الإبلاغ بنجاح إجراء؛ وغيرها من صوّر التفاعل مع سلوك المستخدم.

الشارات والعلامات المميزة (Badge)

إضافة علامات مميّزة مثل عدّدا الإشعارات والشارات إلى عناصر صفحة الويب باستخدام مكوِّن الشارات المُعرَّف مسبقًا في إطار العمل Bootstrap.

قائمة التنقل التفصيلية (Breadcrumb)

حسّن تجربة المستخدم بعرض قائمة تنقّل تفصيليّة عن طريق المكوِّن المُعرَّف مسبقا في إطار العمل Bootstrap لتوضيح تسلسل وهرميّة الصفحات في الموقع.

الأزرار (Buttons)

تعرَّف على أصناف مكوِّن الأزرار في إطار العمل Bootstrap لاستخدامها في تنسيق الإجراءات في الاستمارات ونوافذ الحوار وما شابههما.

مجموعات الأزرار (Button group)

استخدم مكوِّن مجموعات الأزرار في إطار العمل Bootstrap لتجميع سلسلة من الأزرار معًا واستغلالها لإنشاء وظائف جديدة باستخدام JavaScript.

البطاقات (Card)

اعرض محتوى صفحات الويب على شكل بطاقات مع مكوِّن البطاقات Cards في إطار العمل Bootstrap الذي يوفّر حاويةً مرنة وقابلة للتمديد تنضاف إليها تنويعات متعدّدة.

عرض الشرائح (Carousel)

استخدم مكوِّن الدوّار Carousel في إطار العمل Bootstrap لإضافة شرائح عرض بمحتوى متنوّع إلى صفحات الويب.

العناصر القابلة للطيّ (Collapse)

أظهر المحتوى أو أخفه حسب الحاجة باستخدام مكوِّن الطيّ في إطار العمل Bootstrap.

القوائم المنسدلة (Dropdowns)

استخدم مكوِّن القوائم المنسدلة والمُلحَق المصاحب له لعرض قوائم منسدلة Dropdown بها روابط أو غيرها من العناصر.

الاستمارات (Forms)

نسِّق عناصر التحكّم وأنشئ مُخطَّطات متنوعة للاستمارات Forms عبر المكوِّن الذي يقدّمه إطار العمل Bootstrap.

مجموعات الإدخال (Input group)

استفد من مجموعات الإدخال التي يقدّمها إطار العمل Bootstrap لتخصيص الاستمارات Forms بسهولة.

Jumbotron

أبرز رسائل دعائيّة بالتركيز على محتوى مخصوص في صفحة الويب باستخدام مكوِّن Jumbotron المرن والخفيف الذي يمكنه التمدّد على كامل إطار العرض.

مجموعات القوائم (List group)

اعرض سلاسل محتوى بفعاليّة ومرونة باستخدام مكوِّن مجموعات القوائم List group الذي يأتي مبدئيًّا في إطار العمل Bootstrap.

النوافذ الشرطيّة (Modal)

أظهر نوافذ خفيفة فوق محتوى صفحات الويب المُصمَّمة لسؤال الزوّار أو تنبيههم باستخدام مكوِّن النوافذ الشرطيّة Modals ومُلحَق JavaScript المرافق له.

عناصر التنقل (Navs)

ابن أيّ نوع من مكوِّنات التنقّل بين الفقرات والصفحات باستخدام مكوِّن عناصر التنقّل Navigation الذي يقدّمه إطار العمل Bootstrap.

شرائط التنقل (Navbar)

ضمِّن ترويسات تنقّل متجاوبة في صفحات الويب باستخدام مكوِّن شرائط التنقّل الفعّال والمرن الذي يتوفّر عليه إطار العمل Bootstrap.

ترقيم الصفحات (Pagination)

نسِّق المحتوى متعدِّد الصفحات بإضافة روابط مُرقَّمة للتنقّل بين الصفحات باستخدام مكوِّن الترقيم المُضمَّن في إطار العمل Bootstrap.

العناصر المنبثقة (Popovers)

أضف تنسيقات وتأثيرات ظرفيّة بمحتوى مُخصَّص إلى صفحة الويب باستخدام العناصر المنبثقة التي يوفّرها إطار العمل Bootstrap.

شرائط التقدم (Progress)

أضف شرائط تنقّل مُجمَّعة أو منفردة إلى صفحات الويب ونسِّق خلفيّاتها باستخدام مكوِّن شرائط التقدّم في إطار العمل Bootstrap.

متتبع التمرير (Scrollspy)

يتيح متتبّع التمرير في Bootstrap إمكانية تحديث عناصر التنقّل النشطة بناءً على جزء الصفحة الذي يوجد به شريط التمرير.

دورات الانتظار (spinners)

وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوّارات الانتظار في Bootstrap.

النخب (Toasts)

أظهر إشعارات لزوارك عبر مكونات النخب (toast‎s)، وهي رسائل تنبيه قابلة للتخصيص بسهولة.

التلميحات (Tooltips)

استخدم مكوِّن التلميحات في إطار العمل Bootstrap لإضافة إرشادات سريعة حول محتوى معيَّن في صفحة الويب.

الأدوات المرفقة

الإطارات (Borders)

تنسيق حدود العناصر في Bootstrap وتخصيص أنماطها للصوّر، والأزرار أو أي عنصُر آخر.

Clearfix

ألغ تأثير الخاصيّة float على عناصر صفحة الويب باستخدام أداة Clearfix التي يقدّمها إطار العمل Bootstrap.

أيقونة الإغلاق (Close icon)

استخدم أداة أيقونة الإغلاق التي يقدّمها إطار العمل Bootstrap لتوفير أيقونة موَّحدة عبر المشروع تتيح تجاهل محتوى عناصر مثل النوافذ الشرطيّة Modals والتنبيهات Alerts.

الألوان (Colors)

استعن بأدوات الألوان في إطار العمل Bootstrap لتصميم هويّة بصريّة متناسقة وموَّحدة على صفحات الموقع.

الخاصية display

بدِّل بسرعة بين القيّم الأكثر شيوعًا للخاصيّة display باستخدام أصناف العرض المتجاوبة التي يقدّمها إطار العمل Bootstrap.

العناصر المُضمَّنة (Embeds)

استعن بأدوات التضمين التي يتوفّر عليها إطار العمل Bootstrap لإدراج مقاطع فيديو أو عروض شارئح ضمن صفحات الويب.

حاويات Flex

استخدم حاويّات Flex للتعامل السريع والفعّال مع مُخطّطات Flexbox ونظام الشبكة في إطار العمل Bootstrap.

تعويم العناصر (Float)

فعِّل أدوات التعويم Float المتجاوبة التي يوفّرها إطار العمل Bootstrap على أي عنصُر تختاره عبر أي نقطة حديّة.

تبديل الصور (Image replacement)

ضع صورًا في خلفيّة بعض العناصر مكان النصوص باستخدام أداة تبديل الصوّر المتوفّرة في إطار العمل Bootstrap.

التفاعلات (Interactions)

تعرّف على أصناف مساعدة للتحكم في كيفية تفاعل المستخدمين مع محتويات الموقع.

الطفحان (overflow)

استخدم أدوات المساعدة المختصرة لضبط سلوك طفحان المحتوى عن العنصر.

تموضع العناصر (Position)

استخدم أدوات التموضع التي يتوفّر عليها إطار العمل Bootstrap لتحديد موضع العناصر في صفحة الويب.

قارئات الشاشات (Screenreaders)

استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة.

مكوِّن الظلال (Shadows)

أضف الظلال أو أزلها عن العناصر باستخدام أدوات box-shadow.

الأبعاد (Sizing)

استخدم أدوات العرض والطول التي يوفّرها إطار العمل Bootstrap لجعل يأخذ كامل عرض أو طول العنصُر الذي يحويه.

التباعد (Spacing)

يحتوي إطار العمل Bootstrap على طيفٍ واسع من الأصناف الخدميّة المتجاوبة للتعديل على مظهر العنصُر.

الروابط الممتدة (Stretched link)

اجعل أي عنصر HTML أو مكوّن Bootstrap قابلًا للنقر من خلال "توسيع" ذلك العنصر وإضافة رابط داخلي عبر CSS.

النصوص (Text)

تعرَّف على كيفيّة استخدام أدوات النصوص في إطار العمل Bootstrap للتحكّم في المحاذاة، والالتفاف، وحجم النصّ وغيرها من الأمور.

المحاذاة الرأسية (Vertical alignment)

غيِّر محاذاة العناصر ذات القيم inline و inline-block و inline-table للخاصية display، وخلايا الجداول باستخدام أدوات المحاذاة العموديّة (vertical-align).

قابلية الرؤية (Visibility)

تحكَّم في قابليّة الرؤية دون التعديل على قيمة الخاصيّة display باستخدام أدوات الرؤية المتوفّرة في إطار العمل Bootstrap.

توسعة إطار Boostrap

المنهجية المتبعة (Approach)

تعرَّف على المبادئ التوجيهيّة والإستراتيجيّات والتقنيّات المستخدَمة لبناء إطار العمل Bootstrap وصيّانته بحيث تستطيع تخصيصه أكثر وتمديده بنفسك.

الأيقونات (Icons)

دليل ومُقترَحات حول استخدام مكتبات أيقونات خارجيّة مع إطار العمل Bootstrap.

الهجرة

الهجرة إلى الإصدار 4

الإصدار الرابع من Bootstrap  هو إعادة كتابة جذرية للمشروع بأكمله. سنلخّص في هذه الصفحة أبرز التغييرات التي أتى بها هذا الإصدار، ثمّ سنسرد التغييرات بحسب كل مكونة على حدة.