English 中文 العربية 日本語 Português

Bootstrap: مشروع عملي: صفحة رئيسية لموقع شركة

آخر تحديث: 2026-08-26

1. مقدمة الدرس

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

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

(3) المشكلة

تواجه Alice صفحة فارغة وتحتاج إلى بناء صفحة رئيسية كاملة لموقع شركة من الصفر — شريط التنقل وHero وبطاقات المميزات وتعريف الفريق ونموذج الاتصال والتذييل. كل وحدة تحتاج إلى تصميم دقيق، ولا تعرف من أين تبدأ.

(4) الحل

يُطبّق هذا الدرس بشكل شامل المعارف المتعلمة في الدروس الـ18 السابقة لبناء صفحة رئيسية كاملة لموقع شركة من الصفر. تكمل Alice مشروع Bootstrap كاملًا للمرة الأولى بشكل مستقل — ستستخدم القالب من هذا الدرس لإنشاء موقع أعمالها الخاص.

لفهم الفكرة: التطبيق = بناء منزل بمكعبات — كل مكوّن تعلّمته سابقًا (navbar، card، carousel، form) هو مكعب. الآن، نجمعها في صفحة كاملة.

(5) الفائدة

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

2. نظرة عامة على المشروع

سنبني صفحة رئيسية لموقع شركة تحتوي على الوحدات التالية:

100% 
graph TD
    A[Navbar - Fixed Top] --> B[Hero Banner - Full-width background + CTA]
    B --> C[Features - Three cards]
    C --> D[About - Mixed text and image]
    D --> E[Team - Four member cards]
    E --> F[Contact Form - Form + Information]
    F --> G[Footer - Links + Copyright]

النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

▶ مثال: قالب موقع شركة كامل

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Corp - Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-box me-2"></i>Acme Corp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#hero">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section id="hero" class="bg-primary text-white py-5 mt-5">
    <div class="container text-center py-5">
      <h1 class="display-4 fw-bold">Build Faster with Bootstrap</h1>
      <p class="lead mb-4">A modern, responsive framework for your next project.</p>
      <a href="#features" class="btn btn-light btn-lg px-4">Learn More</a>
      <a href="#contact" class="btn btn-outline-light btn-lg px-4 ms-2">Contact Us</a>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Why Choose Us</h2>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-lightning-charge-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fast Performance</h5>
              <p class="card-text text-body-secondary">Optimized for speed with minimal CSS and JS footprint.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-phone-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fully Responsive</h5>
              <p class="card-text text-body-secondary">Works flawlessly on mobile, tablet, and desktop.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-palette-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Customizable</h5>
              <p class="card-text text-body-secondary">Easy to theme with Sass variables and CSS custom properties.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <img src="https://via.placeholder.com/600x400/0d6efd/fff?text=About+Us" class="img-fluid rounded-3 shadow" alt="About">
        </div>
        <div class="col-lg-6">
          <h2>About Our Company</h2>
          <p class="lead text-body-secondary">We have been building web solutions since 2015.</p>
          <p>Our team of experienced developers uses Bootstrap to create fast, reliable, and beautiful web applications for clients worldwide.</p>
          <ul class="list-unstyled">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>200+ projects delivered</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50+ enterprise clients</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>99% client satisfaction</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Team -->
  <section id="team" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Meet Our Team</h2>
      <div class="row g-4">
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/0d6efd/fff?text=AW" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Alice">
            <div class="card-body">
              <h5 class="card-title">Alice Wang</h5>
              <p class="card-text text-body-secondary">CEO & Founder</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/198754/fff?text=BC" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Bob">
            <div class="card-body">
              <h5 class="card-title">Bob Chen</h5>
              <p class="card-text text-body-secondary">CTO</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/dc3545/fff?text=CL" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Charlie">
            <div class="card-body">
              <h5 class="card-title">Charlie Li</h5>
              <p class="card-text text-body-secondary">Lead Developer</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/6f42c1/fff?text=DY" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Diana">
            <div class="card-body">
              <h5 class="card-title">Diana Yang</h5>
              <p class="card-text text-body-secondary">UX Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Get In Touch</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" required>
              <div class="invalid-feedback">Please enter your name.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" required>
              <div class="invalid-feedback">Please enter a valid email.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Message</label>
              <textarea class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">Please enter a message.</div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p class="mb-0">&copy; 2026 Acme Corp. All rights reserved.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-white me-3"><i class="bi bi-github"></i></a>
          <a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

3. تفكيك الوحدات

الوحدة المكونات/الفئات المستخدمة النقاط الفنية
Navbar navbar-expand-lg fixed-top scroll مثبّت في الأعلى، روابط داخلية بتمرير سلس
Hero display-4 lead btn-lg bg-primary خلفية بعرض كامل + زري CTA
Features card h-100 shadow-sm row-cols-* ثلاث بطاقات بارتفاع متساوٍ، بدون JS
About row align-items-center img-fluid نص وصورة جنبًا إلى جنب، التفاف متجاوب
Team rounded-circle card border-0 شبكة أربعة أعضاء متجاوبة
Form form-control needs-validation التحقق الكامل من النموذج
Footer bg-dark flex text-md-end عمودان يسار-يمين متجاوبان

4. تنويعات وتوسيعات الوحدات

▶ مثال: تنويعات قسم Hero

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Variations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- Hero Type 1: Centered Text -->
  <section class="bg-primary text-white py-5">
    <div class="container text-center py-4">
      <h1 class="display-4 fw-bold">Centered Hero</h1>
      <p class="lead mb-4">Simple centered text with CTA buttons.</p>
      <a href="#" class="btn btn-light btn-lg px-4">Get Started</a>
    </div>
  </section>

  <!-- Hero Type 2: Split Image + Text -->
  <section class="bg-dark text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <h1 class="display-5 fw-bold">Split Layout Hero</h1>
          <p class="lead mb-4">Text on left, image on right. Great for product pages.</p>
          <a href="#" class="btn btn-warning btn-lg">Learn More</a>
        </div>
        <div class="col-lg-6 text-center">
          <i class="bi bi-laptop display-1 text-warning"></i>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Type 3: Background Image -->
  <section class="py-5" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400/333/fff?text=BG'); background-size: cover; background-position: center;">
    <div class="container text-center py-5 text-white">
      <p class="text-uppercase small fw-bold text-warning">Limited Offer</p>
      <h1 class="display-4 fw-bold">Background Image Hero</h1>
      <p class="lead mb-4">With overlay gradient for readability.</p>
      <div class="d-flex justify-content-center gap-2">
        <a href="#" class="btn btn-warning btn-lg px-4">Shop Now</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Learn More</a>
      </div>
    </div>
  </section>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

▶ مثال: شبكة مميزات بأيقونات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Grid with Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">Why Choose Us</h2>
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-primary"></i>
          </div>
          <h5>Fast Delivery</h5>
          <p class="text-body-secondary small">Lightning-fast deployment with global CDN.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-shield-check fs-2 text-success"></i>
          </div>
          <h5>Secure</h5>
          <p class="text-body-secondary small">Enterprise-grade security built-in.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-graph-up-arrow fs-2 text-warning"></i>
          </div>
          <h5>Scalable</h5>
          <p class="text-body-secondary small">Grows with your business, no limits.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-headset fs-2 text-info"></i>
          </div>
          <h5>24/7 Support</h5>
          <p class="text-body-secondary small">Round-the-clock expert assistance.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonial Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">What Our Clients Say</h2>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-primary"></i>
            <p class="lead mb-4">"Bootstrap transformed our development workflow. We shipped the MVP in 2 weeks instead of 2 months."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/0d6efd/fff?text=JD" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>John Doe</strong>
                <small class="d-block text-body-secondary">CEO, TechStart</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-success"></i>
            <p class="lead mb-4">"The responsive components saved us countless hours. Everything just works across all devices."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/198754/fff?text=JS" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Jane Smith</strong>
                <small class="d-block text-body-secondary">CTO, WebFlow Inc</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-warning"></i>
            <p class="lead mb-4">"Sass customization was a game-changer. We matched our brand perfectly without fighting the framework."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/dc3545/fff?text=MW" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Mike Wang</strong>
                <small class="d-block text-body-secondary">Lead Dev, DesignCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </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 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

▶ مثال: قسم جدول الأسعار

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-2">Pricing Plans</h2>
    <p class="text-center text-body-secondary mb-5">Choose the plan that fits your needs.</p>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Starter</h5>
          <div class="display-4 fw-bold my-3">$9</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 project</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Basic support</li>
            <li class="mb-2 text-body-tertiary"><i class="bi bi-x-circle-fill me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-primary border-2 shadow">
          <div class="badge bg-primary text-uppercase mb-2" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);">Popular</div>
          <h5>Professional</h5>
          <div class="display-4 fw-bold my-3">$29</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Priority support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Enterprise</h5>
          <div class="display-4 fw-bold my-3">$99</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>24/7 support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom integrations</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Contact Us</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكونات بأسلوب Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.

(1) جدول مرجع مكونات الصفحة

القسم المكوّن الموصى به تركيبة الفئات المساعدة الاستخدام المتجاوب
Hero container + display-* bg-primary text-white py-5 text-center text-md-start
بطاقة المميزات card + row-cols-* border-0 shadow-sm h-100 col-12 col-md-4
About row align-items-center img-fluid rounded-3 shadow col-lg-6 stacking
Team card + rounded-circle border-0 text-center col-6 col-lg-3
الآراء carousel + card border-0 p-5 mx-auto d-none d-md-block
الأسعار card + list-unstyled border-primary shadow col-lg-3 col-md-6
النموذج form-control + needs-validation w-100 mb-3 col-md-8 col-lg-6
التذييل bg-dark text-white py-4 text-md-end col-md-6 columns

(2) جدول مرجع نقاط التوقف المتجاوبة

نقطة التوقف بادئة الفئة الحد الأدنى للعرض الجهاز المستهدف
X-Small لا شيء < 576px جوال عمودي
Small sm ≥ 576px جوال أفقي
Medium md ≥ 768px لوحي
Large lg ≥ 992px حاسوب محمول
X-Large xl ≥ 1200px شاشة سطح مكتب
XX-Large xxl ≥ 1400px شاشة عريضة
يستخدم هذا القالب md / lg MD + LG يغطي من اللوحي إلى سطح المكتب

(3) جدول مخطط الألوان

متغير CSS القيمة الافتراضية مثال لون العلامة الاستخدام
--bs-primary #0d6efd #6f42c1 (بنفسجي) الأزرار والروابط الأساسية، لون التمييز
--bs-secondary #6c757d #adb5bd (رمادي) النص الثانوي، المعلومات المساعدة
--bs-success #198754 #20c997 (سماوي) حالة النجاح، ملاحظات الاكتمال
--bs-warning #ffc107 #fd7e14 (برتقالي) التحذير، الانتباه، علامات الترويج
--bs-danger #dc3545 #e83e8c (وردي) الخطأ، الحذف، المخاطر العالية
--bs-info #0dcaf0 #0d6efd (أزرق) تنبيهات معلوماتية، علامات إرشادية
--bs-light #f8f9fa #f8f9fa منطقة خلفية فاتحة
--bs-dark #212529 #1a1a2e التذييل، المنطقة الداكنة

❓ أسئلة شائعة

س هل يمكن استخدام موقع الشركة هذا مباشرة للإنتاج؟
ج يمكن استخدام القالب مباشرة، لكن يُنصح بـ: (1) استبدال الصور المؤقتة بمحتوى حقيقي؛ (2) تعديل متغيرات Sass وفق ألوان العلامة التجارية؛ (3) إضافة منطق معالجة النموذج الخلفي الفعلي؛ (4) إضافة وسوم SEO الوصفية.
س كيف أجعل الصفحة أكثر تميزًا؟
ج يمكن إجراء تخصيص Sass في المرحلة الخامسة لتحقيق ألوان العلامة التجارية والخطوط المخصصة وتعديلات المسافات العامة. يمكنك أيضًا تجاوز إعدادات Bootstrap الافتراضية بسرعة باستخدام متغيرات CSS.
س كيف يتم تحديث الحالة النشطة لشريط التنقل مع التمرير؟
ج تحتاج إلى JavaScript للاستماع إلى أحداث التمرير، مع استخدام IntersectionObserver لتحديد القسم المرئي حاليًا. هذه ليست ميزة مدمجة في Bootstrap، لكن يمكن تحقيقها بمكتبات خارجية.
س كيف يتكيف هذا القالب مع الشاشات المختلفة؟
ج القالب متجاوب بطبيعته: col-md-4 يُتراكم تلقائيًا على الجوال، navbar-expand-lg يُطوى إلى قائمة همبرغر على الشاشات الضيقة، وimg-fluid يجعل الصور متجاوبة. لتعزيز التكيف، يمكنك إضافة فئات نقاط توقف مثل col-12 col-sm-6 col-lg-3 للتحكم في عدد الأعمدة على الشاشات المختلفة، أو استخدام d-none d-md-block لإخفاء الوحدات الثانوية على الجوال.
س كم يجب أن أستخدم من أنماط Bootstrap الافتراضية مقابل CSS المخصص في المشروع؟
ج يُنصح بمبدأ 80/20: 80% فئات ومكونات Bootstrap المساعدة، 20% CSS مخصص. أولاً، استخدم الفئات المساعدة للتخطيط والمسافات، وتجاوز ألوان العلامة بمتغيرات Sass، وأخيرًا أضف CSS مخصصًا للتأثيرات الخاصة. تجنب تحويل مشروع Bootstrap إلى "CSS مخصص بالكامل" — فهذا يفقد إطار العمل ميزاته الكفاءة.

📖 ملخص

📝 تمارين

  1. ⭐ بناءً على قالب هذا الدرس، أنشئ صفحة رئيسية شخصية: استبدل اسم العلامة باسمك، غيّر قسم Hero إلى "Hi, I'm [Your Name]"، غيّر قسم المميزات إلى وسوم مهاراتك، وغيّر قسم الفريق لعرض مشاريعك.
  2. ⭐⭐ أضف وحدة Carousel "آراء العملاء" جديدة إلى القالب باستخدام تركيبة carousel + card.
  3. ⭐⭐⭐ أضف حركات التمرير: استخدم سمات data-bs-* في Bootstrap أو CSS بسيط @keyframes لجعل وحدات الصفحة تتلاشى تدريجيًا عند التحميل.

الدرس السابق: الفئات المساعدة · الدرس التالي: تخصيص Sass

Web-Tutorial.com

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

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

100%