انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 19
دورة Bootstrap

عناصر الادخال في BootStrapBootstrap Inputs

ستتعلم في هذا الدرس التحكم في تنسيقات form inputs عناصر الادخال في الاستمارة عن طريق bootstrap.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,651
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

BootStrap Input Groups مجموعات الادخال في bootstrap

  • تستخدم خاصية input group في bootstrap لاضافة عنصر مثل نص او ايقونة او زرار في بداية او نهاية عنصر <input>.
  • لعمل input group يتم انشاء container حاوية داخل <form> مع كلاس input-group.
  • داخل الحاوية يتم انشاء عنصر <input> وعنصر اخر يحتوي على العنصر الذي تريد اضافته قبل او بعد عنصر <input> وهذا العنصر يوضع له كلاس input-group-text.
جرّب بنفسك

Input Group

اضافة نص وصورة وزر لعنصر <input>.

HTML 
<div class="input-group">
   <span class="input-group-text">@</span>
   <input type="text" class="form-control" placeholder="Username">
</div>
جرّب بنفسك

BootStrap Multiple Inputs Group مجموعة بعدة عناصر ادخال في bootstrap

  • يمكن عمل input group بداخله اكثر من <input> واضافة صورة او نص او زرار واحد لهم جميعا.
  • يمكن ايضا عمل العكس فننشئ <input> واحد ونضيف له اكثر من صورة او نص او زرار.
جرّب بنفسك

Multiple Inputs Group

مثال على استخدام input-group-text واحد لاكثر من <input> والعكس.

HTML 
<div class="input-group mb-3">
   <span class="input-group-text">Person</span>
   <input type="text" class="form-control" placeholder="First Name">
   <input type="text" class="form-control" placeholder="Last Name">
</div>
جرّب بنفسك

BootStrap Input Group Sizing التحكم في حجم مجموعة الادخال في bootstrap

  • اي عنصر <input> يمكن التحكم في حجمه, يمكن تكبيره او تصغيره.
  • اضافة كلاس input-group-lg بجوار كلاس input-group يزيد من حجم input-group.
  • اضافة كلاس input-group-sm بجوار كلاس input-group يقلل من حجم input-group.
جرّب بنفسك

Input Group Sizing

التحكم في حجم input-group.

HTML 
<div class="input-group input-group-lg">
   <span class="input-group-text">@</span>
   <input type="text" class="form-control" placeholder="Large Input Group">
</div>
جرّب بنفسك

BootStrap Input Group Checkboxes and Radios

  • يمكن استخدام input checkbox و input radio مع input group في بداية او نهاية عنصر <input>.
  • ولانهما ايضا من نوع <input> لذلك يجب وضعهما داخل container حاوية ويضاف كلاس input-group-text لهذه الحاوية.
جرّب بنفسك

Checkboxes and Radios

استخدام checkbox و radio في input group.

HTML 
<div class="input-group mb-3">
   <div class="input-group-text">
      <input type="checkbox">
   </div>
   <input type="text" class="form-control" placeholder="Some text">
</div>
جرّب بنفسك

BootStrap Custom Switch التبديل المخصص في bootstrap

يمكن استخدام checkbox لعمل زرار toggle كالآتي:

  • نقوم بانشاء container بداخله كلاس form-check وكلاس form-switch.
  • بداخل container نضع checkbox بداخله كلاس form-check-input.
جرّب بنفسك

Custom Switch

عمل toggle switch باستخدام عنصر checkbox.

HTML 
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…