html
CopyEdit
<i class="bi bi-house-fill">i> الصفحة الرئيسية

أمثلة على أيقونات شائعة

تخصيص مظهر الأيقونات

يمكن التحكم في حجم الأيقونة باستخدام فئات Bootstrap مثل:

html
CopyEdit
<i class="bi bi-search fs-3 text-danger">i>

الفئة fs-3 تحدد حجم الخط (وبالتالي الأيقونة)، بينما text-danger تضبط لونها.

استخدام الأيقونات داخل الأزرار

غالبًا ما تُستخدم الأيقونات داخل الأزرار لتوضيح الإجراء المتوقَّع:

html
CopyEdit
<button class="btn btn-outline-secondary">
  <i class="bi bi-gear-fill">i> إعدادات
button>

ثالثًا: النماذج (Forms) في Bootstrap

تعريف النماذج

النماذج هي أحد العناصر الأساسية في أي موقع ويب، وتُستخدم لجمع البيانات من المستخدم. Bootstrap يقدم بنية غنية ومتماسكة لبناء نماذج مرنة وقابلة للتخصيص.

البنية الأساسية للنموذج

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

مكونات النماذج

حقول الإدخال (Inputs)

يُستخدم form-control لجعل الحقول متوافقة مع تنسيق Bootstrap:

html
CopyEdit
<input type="text" class="form-control" placeholder="اسم المستخدم">

مربعات الاختيار (Checkboxes)

html
CopyEdit
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">أوافق على الشروطlabel>
div>

الأزرار الإذاعية (Radio Buttons)

html
CopyEdit
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male">
  <label class="form-check-label" for="male">ذكرlabel>
div>

قوائم منسدلة (Select)

html
CopyEdit
<select class="form-select">
  <option>اختر المدينةoption>
  <option>الرياضoption>
  <option>جدةoption>
select>

توجيه النموذج أفقيًا (Horizontal Forms)

html
CopyEdit
<form class="row g-3">
  <div class="col-md-6">
    <label for="firstName" class="form-label">الاسم الأولlabel>
    <input type="text" class="form-control" id="firstName">
  div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">الاسم الأخيرlabel>
    <input type="text" class="form-control" id="lastName">
  div>
form>

نماذج بلون داكن

يمكن استخدام فئة form-control مع bg-dark text-white للحصول على نموذج بتصميم داكن:

html
CopyEdit
<input type="text" class="form-control bg-dark text-white" placeholder="إدخال داكن">

التحقق من صحة المدخلات (Validation)

يوفر Bootstrap آلية للتحقق من البيانات داخل النموذج عبر فئات جاهزة:

html
CopyEdit
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">اسم المستخدمlabel>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">الرجاء إدخال اسم المستخدمdiv>
  div>
form>

عرض رسائل التحقق

عند عدم صحة البيانات، تظهر الرسائل المصاحبة باستخدام invalid-feedback أو valid-feedback.

جدول مقارنة خصائص العناصر في Bootstrap

خاتمة تقنية

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

المراجع: