Bootstrap Inputs
عناصر الادخال في BootStrap
ستتعلم في هذا الدرس التحكم في تنسيقات form inputs عناصر الادخال في الاستمارة عن طريق 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
