إيه هو Bootstrap؟

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

ليه تستخدم Bootstrap؟

1. تصميم متجاوب (Responsive):
   Bootstrap بيخليك تبني تصميمات متجاوبة بسهولة، يعني الموقع هيتناسب مع أي جهاز، سواء كان موبايل، تابلت، أو كمبيوتر. ما تحتاجش تعديل كبير في الكود عشان يخدم على جميع الأجهزة.
2. مكونات جاهزة:
   فيه مكونات جاهزة من Bootstrap زي الأزرار، القوائم المنسدلة، النماذج، الجداول، وغيرها. كل الحاجات دي متاحة ليك على طول، ومش لازم تبنيها من الصفر.
3. سهولة الاستخدام:
   Bootstrap سهل الاستخدام، مش محتاج تتعلم حاجات معقدة عشان تبدأ تشتغل بيه. كل اللي عليك تعمله هو تضمين الملفات الخاصة بيه في مشروعك وتبدأ تستخدم الفئات (Classes) الجاهزة اللي بتسهل عليك بناء التصميمات.
4. دعم متصفحات كتير:
   Bootstrap بيدعم كل المتصفحات الحديثة، يعني موقعك هيظهر تمام على أي متصفح بدون ما تواجه مشاكل.
5. تخصيص سهل:
   لو عايز تغير الألوان أو الخطوط أو حجم العناصر، تقدر بسهولة تخصص Bootstrap باستخدام CSS أو SASS.

المكونات الأساسية في Bootstrap

1. شبكة الـ Grid

شبكة الـ Grid في Bootstrap هي اللي بتسهل تنظيم المحتوى على الصفحة. Bootstrap بيقسم الصفحة إلى 12 عمود، ودي بتساعدك ترتب المحتوى بالطريقة اللي تحبها.

مثال:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>محتوى العمود الأول</p>
    </div>
    <div class="col-md-4">
      <p>محتوى العمود الثاني</p>
    </div>
    <div class="col-md-4">
      <p>محتوى العمود الثالث</p>
    </div>
  </div>
</div>

في المثال ده، إحنا استخدمنا col-md-4 علشان نوزع الأعمدة بالتساوي في الصفحة.

2. الأزرار (Buttons)

Bootstrap بييجي مع مجموعة من الأزرار الجاهزة اللي تقدر تستخدمها في تطبيقك أو موقعك. فيه أنواع مختلفة من الأزرار زي btn-primary و btn-secondary.

مثال:

<button class="btn btn-primary">زر رئيسي</button>
<button class="btn btn-secondary">زر ثانوي</button>

الأزرار دي بتيجي مع تأثيرات وستايلات جاهزة.

3. النماذج (Forms)

Bootstrap بيخليك تبني نماذج تسجيل دخول، استبيانات، أو أي نوع تاني من النماذج بكل سهولة. استخدام form-control بيخلي شكل الحقول متناسق.

مثال:

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="أدخل البريد الإلكتروني">
  </div>
  <button type="submit" class="btn btn-primary">إرسال</button>
</form>

هنا استخدمنا form-control عشان ندي شكل موحد للحقول في النموذج.

4. التبويبات (Tabs)

Bootstrap بيخليك تستخدم التبويبات بسهولة لعرض محتوى مختلف في نفس الصفحة بدون ما تعيد تحميلها. التبويبات بتساعدك تنظم المحتوى بطريقة احترافية.

مثال:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">الصفحة الرئيسية</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">الملف الشخصي</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">الاتصال</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>محتوى الصفحة الرئيسية</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>محتوى الملف الشخصي</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p>محتوى الاتصال</p>
  </div>
</div>

هنا عملنا تبويبات لعرض محتوى مختلف داخل نفس الصفحة بدون إعادة تحميل.

5. الموديلات (Modals)

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

مثال:

<!-- زر لفتح المودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  عرض المودال
</button>

<!-- المودال نفسه -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان المودال</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>

ده مثال على مودال بيظهر عند الضغط على زر.

ازاي تبدأ مع Bootstrap؟

1. إضافة Bootstrap لمشروعك:
   تقدر تضيف Bootstrap باستخدام CDN (شبكة توزيع المحتوى) أو عن طريق تحميل الملفات الخاصة به.
   • باستخدام CDN: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
2. استخدام مكونات Bootstrap:
   بمجرد ما تضيف Bootstrap للمشروع، تقدر تبدأ في استخدام المكونات الجاهزة زي الأزرار، القوائم المنسدلة، والنماذج.

الخاتمة

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