تستخدم خاصية 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>

جربها بنفسك

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Bootstrap Inputs Bootstrap