انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 02
دورة بوتستراب 5

تثبيت بوتستراب 5 وقالب البدايةBootstrap 5 Setup and Starter Template

تعلّم طرق تثبيت Bootstrap 5.3 عبر CDN المحمي ببصمة SRI أو الملفات المحلية أو npm، وابنِ قالب البداية القياسي بلغة HTML5 مع فحصه في أدوات المطور.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

Bootstrap Installation Methods طرق تثبيت بوتستراب

قبل استخدام أي كلاس من كلاسات بوتستراب، تحتاج صفحتك إلى ربط ملف التنسيقات المترجم CSS، وإضافة حزمة JavaScript عند الحاجة لتشغيل المكونات التفاعلية. يتيح Bootstrap 5.3 ثلاث طرق رسمية للتثبيت تناسب طبيعة كل مشروع:

  • شبكة توصيل المحتوى CDN: استدعاء الملفات الجاهزة مباشرةً من خوادم عالمية موزعة في ثوانٍ معدودة، وهو خيار مثالي للنماذج الأولية السريعة بشرط تفعيل بصمة التحقق الأمني.
  • الملفات المترجمة المحلية: تنزيل مجلدي css و js الجاهزين داخل مجلد مشروعك لضمان عمل الواجهة بكفاءة تامة دون اتصال بالإنترنت أو اعتماد على خوادم خارجية.
  • مدير الحزم npm: تثبيت الحزمة المصدرية عبر الأمر npm install bootstrap لدمج ملفات SCSS ووحدات ESM مع أدوات البناء الحديثة مثل Vite.
مخطط مقارنة مسارات تثبيت Bootstrap 5.3 الثلاثة عبر CDN المحمي ببصمة SRI والملفات المحلية ومدير الحزم npm

Safe CDN Setup with SRI التضمين الآمن عبر CDN

عند ربط ملفات خارجية من شبكة CDN عامة، لا تكتفِ بكتابة عنوان الرابط وحده أبداً؛ بل احرص دائماً على إرفاق السمتين الأمنيتين المعتمدتين في التوثيق الرسمي على وسمي <link> و <script> وهما سمة integrity المحتوية على بصمة التجزئة SHA-384 وسمة crossorigin="anonymous".

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

HTML 
<div class="container">
  <h2>SRI Security Verification</h2>
  <p>Pair CDN links with integrity + crossorigin.</p>
  <p id="sriNote"></p>
</div>
<script>
  document.getElementById('sriNote').textContent =
    'Format: sha384-<base64-hash> + anonymous CORS';
</script>
جرّب بنفسك

Local Compiled Files Setup تشغيل الملفات محلياً

في تطبيقات الإنتاج الفعلية والأنظمة المؤسسية وبيئات التطوير التي تعمل دون إنترنت، تُعد استضافة ملفات بوتستراب المترجمة محلياً داخل مجلدات مشروعك الخيار الأكثر استقراراً وأماناً. عند فك ضغط الحزمة الرسمية تجد عدة نسخ، لكنك في العمل اليومي لا تحتاج سوى ملفين مضغوطين فقط هما bootstrap.min.css للتنسيقات و bootstrap.bundle.min.js للتفاعل.

HTML 
<!-- Inside <head> -->
<link rel="stylesheet"
  href="/vendor/bootstrap-5.3/css/bootstrap.min.css">

<div class="container">
  <h2>Local Hosted Bootstrap 5.3</h2>
  <p>Zero external network dependency.</p>
</div>
جرّب بنفسك

HTML5 Starter Template قالب البداية القياسي

يرتكز كل مشروع مبني ببوتستراب 5 على قالب بداية قياسي بلغة HTML5، وإن إغفال سطر واحد منه قد يفسد حسابات التجاوب بالكامل:

  • إعلان <!DOCTYPE html>: يفعّل الوضع القياسي في المتصفح لضمان دقة أبعاد الصناديق والشبكة المرنة.
  • وسم العرض المتجاوب <meta name="viewport" content="width=device-width, initial-scale=1.0">: يأمر متصفح الهاتف بمساواة عرض الصفحة بالعرض الحقيقي لشاشة الجهاز، فبدونه يتصرف الهاتف كشاشة مكتبية مصغرة بعرض 980px وتظهر النصوص مجهرية.
  • ترتيب استدعاء الملفات: يُربط ملف bootstrap.min.css داخل <head> قبل ملف تنسيقاتك المخصص لمنع وميض المحتوى غير المنسق، وتوضع حزمة bootstrap.bundle.min.js قبيل إغلاق </body>.
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="container"><h1>Ready!</h1></div>
</body>
جرّب بنفسك

Bundle Script vs Popper حزمة Bundle ومكتبة Popper

توفّر حزمة بوتستراب نسختين من ملف السكريبت المترجم، والخلط بينهما يُعد من أكثر أخطاء المبتدئين شيوعاً:

  • ملف الحزمة الشاملة bootstrap.bundle.min.js: الخيار القياسي الموصى به في معظم المشاريع؛ لأنه يدمج كافة إضافات بوتستراب مع مكتبة Popper في طلب شبكة واحد نظيف.
  • ملف الإضافات المنفرد bootstrap.min.js: لا يتضمن مكتبة Popper؛ فإذا استخدمته مع القوائم المنسدلة أو التلميحات وجب تحميل popper.min.js قبله مباشرةً، وإياك أن تجمع بين popper.min.js و bootstrap.bundle.min.js في صفحة واحدة.

Verifying Setup in DevTools فحص الإعداد بأدوات المطور

عندما تلاحظ أن أحد كلاسات بوتستراب لا يطبّق التنسيق المتوقع، يمكنك تشخيص السبب خلال ثوانٍ عبر ثلاث فحوصات سريعة في أدوات المطور DevTools بالضغط على F12:

  1. لوحة الشبكة Network: أعد تحميل الصفحة وتأكد أن ملفي bootstrap.min.css و bootstrap.bundle.min.js يعيدان الحالة 200 دون خطأ مسار 404 أو رفض بصمة SRI.
  2. لوحة العناصر Elements: افحص عنصر <body> وتحقق من ظهور متغيرات الجذر مثل --bs-body-font-family.
  3. لوحة الطرفية Console: اطبع التعبير typeof window.bootstrap لتتأكد من إرجاع القيمة "object" كدليل قاطع على جاهزية الحزمة التفاعلية.
HTML 
<div class="container">
  <h2>Runtime Diagnostic Check</h2>
  <p id="verOut">Running check...</p>
</div>
<script>
  const jsOk = typeof window.bootstrap === 'object';
  const cssVar = getComputedStyle(document.body)
    .getPropertyValue('--bs-body-line-height').trim();
  verOut.textContent = 'JS: ' + jsOk + ' | lh: ' + cssVar;
</script>
جرّب بنفسك
اسم الملف المترجمموضعه القياسي في HTMLهل يضم Popper؟حالة الاستخدام المثالية
bootstrap.min.cssداخل <head> قبل ملفك الخاصملف تنسيق فقطجميع الصفحات القياسية ذات الاتجاه اليساري LTR
bootstrap.rtl.min.cssداخل <head> بدلاً من القياسيملف تنسيق فقطالواجهات العربية المفعّل عليها dir="rtl"
bootstrap.bundle.min.jsقبل إغلاق </body> مباشرةًنعم مدمجة بالكاملالخيار الافتراضي الموصى به لكافة المكونات التفاعلية
bootstrap.min.jsبعد استدعاء popper.min.jsلا يضمهافقط عند إدارة نسخة Popper منفصلة يدوياً
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس طرق تثبيت Bootstrap 5.3 الثلاث، وحماية روابط CDN ببصمة SRI، واستضافة الملفات محلياً، وبناء قالب البداية القياسي مع وسم viewport، والتمييز بين حزمة Bundle ومكتبة Popper، وفحص جاهزية الإطار في DevTools. الخطوة التالية: انتقل الآن إلى الدرس الثالث «دعم اللغة العربية RTL في بوتستراب 5» لإعداد الواجهات العربية الاحترافية من اليمين إلى اليسار.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Starter Template قالب البداية القياسي
الهيكل القياسي الأدنى لمستند HTML5 السليم شاملاً إعلان DOCTYPE وترميز UTF-8 ووسم viewport وربط ملف CSS وحزمة JS بالترتيب الصحيح.
للمراجعة
02 Viewport Meta Tag وسم منطقة العرض المتجاوبة
وسم يوضع داخل head لمساواة عرض الصفحة بالعرض الفعلي لشاشة الهاتف وتفعيل استعلامات التجاوب بدقة.
للمراجعة
03 Bundle Script حزمة السكريبت المدمجة
ملف bootstrap.bundle.min.js الذي يجمع كافة إضافات بوتستراب التفاعلية مع مكتبة التموضع Popper في ملف واحد.
للمراجعة
04 Source Map (.map) ملف خريطة المصدر
ملف تشخيصي مرافق يربط الأسطر المضغوطة بملفات المصدر الأصلية لتسهيل الفحص داخل أدوات المطور في المتصفح.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CDN CDN
Content Delivery Network
شبكة خوادم موزعة جغرافياً تقدم الملفات الثابتة كملفات بوتستراب بسرعة عالية من أقرب نقطة جغرافية للزائر.
للمراجعة
02 SRI SRI
Subresource Integrity
ميزة أمنية في المتصفح تطابق البصمة التشفيرية للملف الخارجي وتمنع تشغيله فوراً إذا تعرض لأي تعديل غير مصرح به.
للمراجعة
03 NPM NPM
Node Package Manager
أداة وسجل إدارة الحزم البرمجية المستخدمة لتثبيت ملفات المصدر SCSS ووحدات JavaScript الخاصة ببوتستراب في مشاريع البناء.
للمراجعة
04 CORS CORS
Cross-Origin Resource Sharing
آلية أمنية في المتصفح تُفعّل عبر crossorigin="anonymous" لتمكين التحقق الآمن من بصمة ملفات CDN الخارجية.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. بدّل بين الحالات الثلاث في مختبر قالب البداية لملاحظة أثر إغفال وسم viewport والفرق بين الترتيب السليم وتكرار تحميل مكتبة Popper.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. افتح مثال الفحص البرمجي في محرر التجريب ولاحظ كيف يؤكد استدعاء bootstrap.Tooltip.VERSION نجاح تحميل حزمة السكريبت.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

لماذا يجب إرفاق سمتي integrity="sha384-..." وcrossorigin="anonymous" عند تضمين بوتستراب من شبكة CDN؟

تفعّل السمتان فحص سلامة الموارد الفرعية SRI لمنع تشغيل أي ملف خارجي تم التلاعب بمحتواه.

02

ماذا يحدث على الهواتف الذكية عند نسيان كتابة وسم <meta name="viewport" content="width=device-width, initial-scale=1.0">؟

بدون وسم viewport يفترض متصفح الهاتف عرضاً مكتبياً يقارب 980 بكسل ويصغّر الصفحة بالكامل فتتعطل استجابة الهاتف.

03

عند تضمين ملف bootstrap.bundle.min.js يجب عليك أيضاً إضافة وسم script منفصل لتحميل مكتبة popper.min.js قبله.

خطأ؛ فملف bootstrap.bundle.min.js يضم مكتبة Popper بداخله مسبقاً، وتحميلها مرة ثانية يكرر الحجم بلا داعٍ.

04

أين يوضع رابط ملف تنسيقات مشروعك المخصص (مثل custom.css) بالنسبة لملف bootstrap.min.css داخل <head>؟

يوضع بعد ملف bootstrap.min.css مباشرةً لكي تتغلب قواعدك المخصصة تلقائياً بفضل ترتيب التتالي في CSS.

05

أي طريقة تثبيت تتيح لك تعديل متغيرات SCSS المصدرية واستيراد وحدات ES6 محددة فقط عبر أدوات البناء مثل Vite؟

التثبيت عبر مدير الحزم npm يوفّر ملفات المصدر SCSS الكاملة ووحدات جافاسكريبت القابلة للاستيراد الانتقائي.

06

يقوم المتصفح بتنزيل ملفات خرائط المصدر .map لجميع الزوار العاديين حتى لو كانت أدوات المطور مغلقة.

خطأ؛ لا يطلب المتصفح ملفات .map إلا عند فتح أدوات المطور DevTools لأغراض الفحص والتشخيص.

07

ما التعبير البرمجي الذي يمكن كتابته في لوحة Console للتحقق السريع من تحميل حزمة Bootstrap ومعرفة إصدارها؟

قراءة الخاصية bootstrap.Tooltip.VERSION تعيد نص الإصدار المحمّل مثل "5.3.3" وتؤكد جاهزية الكائن العام.

08

لماذا يُفضَّل تشغيل ملفات بوتستراب المترجمة محلياً داخل المعامل غير المتصلة بالإنترنت أو الشبكات المؤسسية المغلقة؟

لأن الملفات المحلية تُحمَّل مباشرةً من خادم المشروع دون أي توقف عند انقطاع الإنترنت أو حجب النطاقات الخارجية.