الدرس الواحد والعشرون: بناء صفحة هبوط باستخدام Bootstrap
في هذا الدرس، سنتعلم كيفية بناء صفحة هبوط (Landing Page) باستخدام Bootstrap. صفحة الهبوط هي صفحة ويب مصممة خصيصًا لتحقيق هدف معين، مثل جمع البيانات من المستخدمين أو الترويج لمنتج أو خدمة. سنتعلم كيفية استخدام مكونات Bootstrap الأساسية لإنشاء صفحة هبوط عملية، وكذلك دمج الأزرار والنماذج والتصاميم التفاعلية لجعل الصفحة أكثر فعالية وجاذبية.
1. الهيكل الأساسي لصفحة الهبوط
لبداية، نحتاج إلى هيكل أساسي للصفحة. نبدأ باستخدام container و row و col- لتقسيم الصفحة إلى أجزاء مختلفة، مثل العنوان، الفقرة، الأزرار، والنماذج.
مثال على الهيكل الأساسي لصفحة هبوط:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة هبوط باستخدام Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">مرحبًا بك في صفحة الهبوط</h1>
<p class="lead">اكتشف المزيد عن خدماتنا وكيف يمكننا مساعدتك في تحسين عملك</p>
</div>
</header>
<section class="py-5">
<div class="container">
<div class="row text-center">
<div class="col-lg-4">
<h2>الخدمة الأولى</h2>
<p>شرح مختصر للخدمة الأولى التي نقدمها.</p>
</div>
<div class="col-lg-4">
<h2>الخدمة الثانية</h2>
<p>شرح مختصر للخدمة الثانية التي نقدمها.</p>
</div>
<div class="col-lg-4">
<h2>الخدمة الثالثة</h2>
<p>شرح مختصر للخدمة الثالثة التي نقدمها.</p>
</div>
</div>
</div>
</section>
<section class="bg-light py-5">
<div class="container text-center">
<h2 class="mb-4">اشترك للحصول على التحديثات</h2>
<form>
<div class="row justify-content-center">
<div class="col-md-6">
<input type="email" class="form-control mb-2" placeholder="أدخل بريدك الإلكتروني" required>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary btn-block">اشترك الآن</button>
</div>
</div>
</form>
</div>
</section>
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 شركتنا. جميع الحقوق محفوظة.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. شرح الكود:
- header: يبدأ الصفحة بعنوان جذاب مع نص توضيحي باستخدام فئة
bg-primaryلتحديد الخلفية اللون الأزرق. يتضمن أيضًا فئةtext-centerلمركزة النصوص داخل العنصر. داخل container، يوجد العنوان باستخدام فئةdisplay-4لجعل النص كبيرًا. - section للخدمات: تحتوي هذه المنطقة على ثلاث أعمدة باستخدام row و col-lg-4. هذا يسمح لنا بعرض ثلاث خدمات في صف واحد، مع شرح مختصر تحت كل عنوان خدمة.
- نموذج الاشتراك: يحتوي على input لادخال البريد الإلكتروني وزر button للتفاعل مع النموذج. يتم استخدام form-control لتحسين تنسيق الحقول و btn btn-primary لتخصيص مظهر الزر.
- footer: يتم إضافة فاصل في الأسفل مع خلفية داكنة باستخدام فئة
bg-darkونص أبيض باستخدامtext-whiteلإعطاء صفحة الهبوط مظهرًا احترافيًا. يتضمن نص حقوق الملكية.
3. دمج الأزرار والنماذج التفاعلية
تعتبر الأزرار والنماذج من العناصر الأساسية في صفحة الهبوط. يمكن استخدام الأزرار لتوجيه المستخدم إلى المزيد من المعلومات أو تشجيعه على اتخاذ إجراء معين، مثل التسجيل أو الشراء.
إضافة زر تفاعلي مع تأثيرات:
<a href="#subscribe" class="btn btn-lg btn-success">اشترك الآن</a>
شرح الكود:
- btn btn-lg btn-success: يعطينا زر كبير بلون أخضر.
- href=”#subscribe”: يوجه المستخدم إلى نموذج الاشتراك عندما ينقر على الزر.
إضافة نموذج مع التحقق من البيانات:
يمكنك إضافة تحقق من البيانات باستخدام الفئات المدمجة في Bootstrap مثل form-control, form-group, و is-invalid لجعل النموذج تفاعليًا، والتأكد من أن البيانات المدخلة صحيحة قبل إرسالها.
<form>
<div class="mb-3">
<label for="email" class="form-label">البريد الإلكتروني</label>
<input type="email" class="form-control" id="email" placeholder="أدخل بريدك الإلكتروني" required>
<div class="invalid-feedback">
من فضلك أدخل بريدًا إلكترونيًا صالحًا.
</div>
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
</form>
شرح الكود:
- form-control: تستخدم لتنسيق الحقل بحيث يكون متناسقًا مع تصميم Bootstrap.
- invalid-feedback: تعرض رسالة خطأ إذا كان الإدخال غير صالح.
4. تحسين التصميم باستخدام عناصر Bootstrap المتقدمة
يمكنك إضافة المزيد من التأثيرات الجمالية والتفاعلية إلى صفحة الهبوط باستخدام مكونات إضافية من Bootstrap مثل Modals، Tooltips، و Carousels.
إضافة مودال (Modal) للتفاعل مع الزوار:
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">
اعرف المزيد
</button>
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">معلومات إضافية</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
هنا يمكنك إضافة مزيد من المعلومات حول المنتج أو الخدمة.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
<button type="button" class="btn btn-primary">حفظ التغييرات</button>
</div>
</div>
</div>
</div>
شرح الكود:
- يتم استخدام Modal لإظهار نافذة منبثقة تحتوي على مزيد من المعلومات حول المنتج أو الخدمة عندما ينقر المستخدم على الزر.
- data-bs-toggle=”modal” و data-bs-target=”#myModal” تحدد أنه عند النقر على الزر سيتم فتح نافذة المودال الخاصة بـ myModal.
5. خاتمة
بناء صفحة هبوط باستخدام Bootstrap يوفر لك الأدوات اللازمة لإنشاء صفحة جذابة وفعالة مع العديد من المكونات التفاعلية مثل الأزرار والنماذج، بالإضافة إلى المكونات المتقدمة مثل Modals و Tooltips. باستخدام Bootstrap، يمكنك تخصيص وتصميم صفحة هبوط مثالية لأي غرض كان، سواء كان لجمع البيانات أو الترويج لمنتج أو خدمة.
