بناء موقع تجاري بسيط باستخدام Bootstrap

الدرس الثالث والعشرون: بناء موقع تجاري بسيط باستخدام Bootstrap

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

---

1. إعداد بيئة العمل

قبل البدء في بناء الموقع، يجب التأكد من أن لديك بيئة تطوير جاهزة. يمكنك استخدام الأدوات التالية:

• محرر نصوص مثل VS Code أو Sublime Text.
• Bootstrap عبر CDN أو تثبيته باستخدام npm.

إعداد Bootstrap عبر CDN:

يمكنك إضافة Bootstrap إلى مشروعك عن طريق إضافة الروابط التالية في ملف الـ HTML الخاص بك:

<!-- رابط إلى CSS الخاص بـ Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- رابط إلى JavaScript الخاص بـ Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

---

2. تصميم الشريط العلوي (Navbar)

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

كتابة HTML للـ Navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">متجركم</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">الرئيسية</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">المنتجات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">الخدمات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">التواصل معنا</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

شرح الـ Navbar:

• navbar-expand-lg: يحدد أن القائمة ستتوسع في الأجهزة الكبيرة (شاشات الكمبيوتر) وتكون قابلة للطي في الأجهزة الصغيرة (الموبايل).
• navbar-light: يعطي الشريط العلوي خلفية فاتحة مع نصوص داكنة.
• bg-light: يعين لون الخلفية إلى لون فاتح.
• navbar-toggler: يجعل الشريط العلوي قابلًا للطي عند الشاشات الصغيرة.

---

3. قسم عرض المنتجات

لإظهار المنتجات في موقعك التجاري، سنستخدم بطاقات (Cards) من Bootstrap لعرض كل منتج.

كتابة HTML لعرض المنتجات:

<div class="container mt-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="product1.jpg" class="card-img-top" alt="منتج 1">
        <div class="card-body">
          <h5 class="card-title">منتج 1</h5>
          <p class="card-text">وصف مختصر للمنتج.</p>
          <a href="#" class="btn btn-primary">شراء الآن</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="product2.jpg" class="card-img-top" alt="منتج 2">
        <div class="card-body">
          <h5 class="card-title">منتج 2</h5>
          <p class="card-text">وصف مختصر للمنتج.</p>
          <a href="#" class="btn btn-primary">شراء الآن</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="product3.jpg" class="card-img-top" alt="منتج 3">
        <div class="card-body">
          <h5 class="card-title">منتج 3</h5>
          <p class="card-text">وصف مختصر للمنتج.</p>
          <a href="#" class="btn btn-primary">شراء الآن</a>
        </div>
      </div>
    </div>
  </div>
</div>

شرح الـ Cards:

• col-md-4: يعني أن كل بطاقة ستأخذ 4 أعمدة من أصل 12 في جهاز كبير.
• card-img-top: لعرض صورة المنتج في أعلى البطاقة.
• btn btn-primary: زر مخصص لشراء المنتج.

---

4. قسم الخدمات

يمكنك أيضًا إضافة قسم لخدمات الموقع مثل الاستشارات أو تقديم العروض.

كتابة HTML لقسم الخدمات:

<section class="bg-light py-5">
  <div class="container">
    <h2 class="text-center mb-4">خدماتنا</h2>
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">خدمة 1</h5>
            <p class="card-text">تفاصيل حول الخدمة الأولى.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">خدمة 2</h5>
            <p class="card-text">تفاصيل حول الخدمة الثانية.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">خدمة 3</h5>
            <p class="card-text">تفاصيل حول الخدمة الثالثة.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

5. قسم الاتصال (Contact Us)

سيكون لديك أيضًا قسم للتواصل مع الشركة. يمكنك إضافة نموذج للاتصال باستخدام Forms من Bootstrap.

كتابة HTML لقسم الاتصال:

<section class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">تواصل معنا</h2>
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">الاسم</label>
        <input type="text" class="form-control" id="name" placeholder="أدخل اسمك">
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">البريد الإلكتروني</label>
        <input type="email" class="form-control" id="email" placeholder="أدخل بريدك الإلكتروني">
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">الرسالة</label>
        <textarea class="form-control" id="message" rows="3" placeholder="أدخل رسالتك"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">إرسال</button>
    </form>
  </div>
</section>

---

6. إضافة التذييل (Footer)

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

كتابة HTML للتذييل:

<footer class="bg-dark text-white py-4">
  <div class="container text-center">
    <p>&copy; 2024 متجركم. جميع الحقوق محفوظة.</p>
    <div>
      <a href="#" class="text-white mx-2">فيسبوك</a>
      <a href="#" class="text-white mx-2">تويتر</a>
      <a href="#" class="text-white mx-2">إنستغرام</a>
    </div>
  </div>
</footer>

---

7. النتيجة النهائية

بعد تجميع كل الأجزاء السابقة، سيكون لديك موقع تجاري بسيط يحتوي على:

• شريط علوي للتنقل بين الأقسام.
• عرض للمنتجات باستخدام البطاقات.
• قسم للخدمات.
• نموذج للتواصل.
• تذييل للموقع مع حقوق الطبع والنشر.

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