EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

مقدمة في Bootstrap والتثبيت

1. نظرة عامة على الدرس

(1) المتطلبات المسبقة

(2) 🎯 ما ستتعلمه

(3) المشكلة

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

(4) الحل

Bootstrap هو حاليًا إطار CSS الأمامي الأكثر شعبية. يوفر مكتبة كاملة من المكونات ونظام شبكة متجاوب، مما يتيح لك بناء صفحات ويب جميلة ومتوافقة مع أجهزة متعددة بسرعة دون كتابة CSS من الصفر.

لفهم الفكرة: كتابة CSS يدويًا تشبه شراء المكونات وتقطيع الخضار وطهي الطعام بنفسك؛ أما استخدام Bootstrap ف يشبه طلب الطعام الجاهز — تختار المكونات وهو يتولى التنسيق بينما تركز أنت على التجميع.

(5) الفوائد

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

2. ما هو Bootstrap

طوّر Bootstrap في البداية مهندسا تويتر مارك أوتو وجاكوب ثورنتون في عام 2011، وكان يُسمى في الأصل Twitter Blueprint. بعد أكثر من عقد من تكرارات الإصدارات الرئيسية، أصبح Bootstrap 5.3 الحالي إطارًا ناضجًا ومستقرًا.

(1) الميزات الأساسية

يوفر Bootstrap أربع قدرات رئيسية:

القدرة الوصف مثال
نظام الشبكة تخطيط متجاوب من 12 عمودًا يتكيف مع الجوال/الجهاز اللوحي/سطح المكتب col-md-6 col-lg-4
مكتبة المكونات أكثر من 70 مكوّن جاهز من HTML/CSS/JS أزرار، بطاقات، أشرطة تنقل، نوافذ منبثقة
أصناف مساعدة أدوات CSS ذرية تُلغي الحاجة للأنماط المخصصة mt-3، text-center، d-flex
إضافات JS لا يحتاج إلى jQuery، مبني على JavaScript الأصلي عرض شرائح، نوافذ منبثقة، أكورديون

(2) المقارنة مع الأطر الأخرى

البُعد Bootstrap Tailwind CSS CSS مكتوب يدويًا
منحنى التعلم منخفض (تسمية أصناف بديهية) متوسط-مرتفع (عدد كبير من الأصناف المساعدة للحفظ) مرتفع (يتطلب معرفة بالتخطيط/المحددات/التوافق)
سرعة التطوير سريع سريع بطيء
مرونة التخصيص متوسطة (تغطية متغيرات Sass) عالية (تخصيص على مستوى نظام التصميم) الأعلى
حجم الملف متوسط (~30KB مضغوط) صغير (تجميع عند الطلب) يعتمد على حجم الكود
ثراء المكونات 70+ مكوّن لا مكونات مدمجة كله مُخصص
السيناريوهات المناسبة التطوير السريع، لوحات الإدارة، MVP أنظمة التصميم، تخصيص العلامة التجارية الأعمال الأساسية، تحسين الأداء

(3) تاريخ الإصدارات

100% 
timeline
    title Bootstrap Version Timeline
    2011 : v2.0 : Twitter Blueprint Open Source
    2013 : v3.0 : Flat Design + Mobile First
    2018 : v4.0 : Flexbox Grid + Sass
    2021 : v5.0 : Removed jQuery + CSS Variables
    2023 : v5.3 : Dark Mode + Accent Colors

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

3. تثبيت Bootstrap

تستخدم الدروس الـ15 الأولى من هذا البرنامج التعليمي طريقة CDN — لا تحتاج إلى تنزيل أي ملفات؛ فقط أدخل سطرين من الكود في HTML.

(1) الطريقة الأولى: الت introducción عبر CDN (موصى بها)

▶ مثال: قالب أساسي عبر CDN

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <p class="lead">This is my first Bootstrap page.</p>

  <!-- Bootstrap JS + Popper (needed for interactive components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

نقاط رئيسية:

(2) الطريقة الثانية: التثبيت عبر npm (تُستخدم في المرحلة 5)

BASH 
npm install bootstrap@5.3.3
JAVASCRIPT 
// import in JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

يجب دمج هذه الطريقة مع تخصيص Sass في المرحلة 5؛ ويمكن تخطيها في المرحلة الأولى.

4. مثال على صفحة كاملة

فيما يلي صفحة Bootstrap كاملة تحتوي على شريط تنقل وأزرار وبطاقات وتخطيط شبكة:

▶ مثال: قالب صفحة شخصية شامل

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Demo - Alice's Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <div class="bg-primary text-white text-center py-5">
    <div class="container">
      <h1 class="display-4">Hi, I'm Alice</h1>
      <p class="lead">A web developer who loves building clean, responsive websites.</p>
      <a href="#" class="btn btn-light btn-lg">View My Work</a>
    </div>
  </div>

  <!-- Cards -->
  <div class="container my-5">
    <div class="row">
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Web Design</h5>
            <p class="card-text">Clean and modern interfaces built with Bootstrap.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Responsive Layout</h5>
            <p class="card-text">Works perfectly on mobile, tablet, and desktop.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">UI Components</h5>
            <p class="card-text">Over 70 ready-to-use components at your fingertips.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

يتكون هذا الكود من حوالي 40 سطرًا فقط من HTML — مقارنةً بكتابة CSS يدويًا والتي كانت ستتطلب 150+ سطرًا على الأقل.

5. قواعد تسمية أصناف Bootstrap

تتبع تسمية أصناف Bootstrap نمطًا ثابتًا؛ فهم هذا النموذج يتيح لك "تخمين" معظم أسماء الأصناف:

TEXT 
{property}{direction}-{size}-{value}
الجزء المعنى مثال
property اختصار الخاصية m=margin، p=padding، text=text-align
direction الاتجاه (اختياري) t=أعلى، b=أسفل، s=بداية، e=نهاية
size نقاط التوقف (اختياري) sm، md، lg، xl، xxl
value القيمة 0 ~ 5، auto، center، start

على سبيل المثال، mt-md-3 يضبط margin-top: 1rem على شاشات md فأكبر. يمتد نظام التسمية هذا عبر جميع أنحاء Bootstrap وسيتم تفصيله في الدروس اللاحقة.

(1) مقارنة كفاءة التطوير بين Bootstrap وCSS الخالص

السيناريو CSS الأصلي Bootstrap الوقت الموفّر
شبكة 3 أعمدة متجاوبة 40+ سطر media queries سطر واحد row-cols-md-3 ~90%
شريط تنقل + قائمة قابلة للطي 80+ سطر CSS + JS مكوّن navbar واحد ~85%
تخطيط بالبطاقات 60+ سطر CSS مكوّن card واحد ~95%
أنماط التحقق من النماذج 30+ سطر CSS صنف was-validated ~90%

(2) مقارنة اختيار إصدار Bootstrap

الإصدار jQuery متغيرات CSS الوضع الداكن الشبكة دعم IE
v4.6 مطلوب لا يوجد لا يوجد Flexbox ✅
v5.0 أُزيل أُضيف لا يوجد Flexbox + xxl ❌
v5.3 أُزيل محسّن ✅ Flexbox + مساعدو CSS Grid ❌

▶ مثال: التحقق من نجاح تحميل Bootstrap

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container text-center py-5">
    <div class="spinner-border text-primary mb-3" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <h3>Bootstrap 5.3.3 is loaded</h3>
    <p class="text-success"><strong>✓</strong> CSS is working</p>
    <button class="btn btn-primary" onclick="alert('JS is working!')">Test JS</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

▶ مثال: استخدام سريع لمكونات شائعة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Components</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <span class="badge bg-primary">New</span>
    <span class="badge bg-success">Active</span>
    <span class="badge bg-danger">Expired</span>
    <div class="progress mt-3" style="height: 20px;">
      <div class="progress-bar bg-success" style="width: 75%">75% Complete</div>
    </div>
    <div class="alert alert-info mt-3">Info alert with an <a href="#" class="alert-link">example link</a>.</div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

▶ مثال: تقنيات تصحيح الأخطاء بأدوات المطور

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevTools Practice</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h1>DevTools Practice</h1>
    <p class="text-muted">Open DevTools (F12) and inspect these Bootstrap elements.</p>
    <div class="row">
      <div class="col-4"><div class="bg-primary text-white p-3 rounded">Col 1</div></div>
      <div class="col-4"><div class="bg-success text-white p-3 rounded">Col 2</div></div>
      <div class="col-4"><div class="bg-info text-white p-3 rounded">Col 3</div></div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 حيث تكون الأنماط فعّالة (مثل الأزرار، البطاقات، عرض الشرائح، الأكورديون)، مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.

❓ أسئلة شائعة

س هل يحتاج Bootstrap 5 إلى jQuery؟
ج إطلاقًا. أزال Bootstrap 5 تمامًا اعتماديته على jQuery؛ جميع إضافات JS مبنية على JavaScript الأصلي. تحتاج فقط إلى إدخال bootstrap.bundle.min.js لاستخدام جميع المكونات التفاعلية.
س هل أختار Bootstrap أم Tailwind؟
ج اختر Bootstrap لسرعة التطوير وثراء المكونات؛ واختر Tailwind لأنظمة تصميم مخصصة بدرجة عالية وأنماط علامة تجارية صارمة. كمسار تعلم، يُنصح بدراسة Bootstrap أولاً (عتبة منخفضة، مجتمع كبير، مفيد للبحث عن عمل)، ثم Tailwind.
س هل سيكون التحميل عبر CDN بطيئًا؟
ج ملفات CDN لـ Bootstrap تأتي من شبكة jsDelivr العالمية المعجّلة. ملف CSS المضغوط حوالي 28KB و JS حوالي 22KB، تأثيرها على تحميل الصفحة ضئيل. كما يقوم المتصفح بتخزين ملفات CDN مؤقتًا، مما يُلغي الحاجة لإعادة التنزيل في الصفحات اللاحقة.
س هل يمكنني استخدام Bootstrap دون معرفة JavaScript مسبقًا؟
ج نعم. يمكن استخدام جزء CSS من Bootstrap (الشبكة، الخطوط، الأزرار، البطاقات، إلخ) بشكل مستقل عن JS. المرحلتان 1-2 هما محتوى CSS بالكامل، ولا تتطلبان أي معرفة بـ JS.
س ما الفروق الرئيسية بين Bootstrap 5 و4؟
ج أزال Bootstrap 5 اعتمادية jQuery، وأضاف دعم خصائص CSS المخصصة، وحسّن نظام الشبكة (أضاف نقطة توقف xxl)، وقدم الوضع الداكن، وأسقط دعم IE. عند الانتقال من v4، لاحظ تغييرات مثل استبدال left/right بـ start/end.
س هل هناك مخاطر فشل نقطة واحدة لطريقة CDN؟
ج يمكن حل ذلك عبر استراتيجية احتياطية متعددة CDN. عند فشل CDN الرئيسي، التبديل إلى CDN بديل، أو استخدام سمة integrity للتحقق من سلامة الملف. لبيئات الإنتاج، فكّر في استضافة ملفات Bootstrap على CDN الخاص بك.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ ملف HTML جديدًا واستخدم طريقة CDN لاستيراد Bootstrap 5.3.3. ضع <h1> و <p class="lead"> في الصفحة لمراقبة تأثيرات الخط والمسافات الافتراضية.
  2. ⭐⭐ ارجع إلى قالب "
Web-Tutorial.com

فريق Web-Tutorial التقني

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

100%