انتقل إلى محتوى الدرس

(inline-form) BootStrap Form Row-Grid الاستمارة الخطية في bootstrap

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

1 صفوف تعليمية
Bootstrap
2,960 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
  • يمكن استخدام كلاسات bootstrap grid التي تحدثنا عنها في الدرس الثالث, وذلك لتحويل عنصر form الى row صف وتحويل العناصر التي بداخله الى columns اعمدة.
  • بهذه الطريقة نستطيع عمل inline form استمارة خطية, اي تظهر عناصرها جمبا الى جمب على خط واحد.
  • لعمل inline form يضاف كلاس row الى عنصر <form> ثم يضاف كلاس col الى كل عنصر داخل الاستمارة لاعطائهم جميعا عرضا متساويا.
  • يتكون كل row من 12 col عمود لذلك بدلا من كلاس col يمكن استخدام كلاس *-col حيث * رقم من 1 الى 12, وهذا في حالة تخصيص عدد اعمدة مختلفة لكل عنصر.

Inline Form

عمل استمارة خطية باستخدام كلاسات bootstrap grid.

HTML
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
  </div>
</form>