Bootstrap

Bootstrap Inputs
عناصر الادخال في BootStrap

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

التاريخ

06 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1121

المواضيع

6
الشروحات chevron_left Bootstrap Inputs chevron_left Bootstrap

Bootstrap Inputs
عناصر الادخال في BootStrap

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

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

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

<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> والعكس.

<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.

<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.

<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.

<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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.