أشكال التمهيد
إعدادات Bootstrap الافتراضية
تتلقى عناصر التحكم في النموذج تلقائيًا بعض الأنماط العامة باستخدام Bootstrap:
يبلغ عرض كل العناصر النصية <input>والعناصر <textarea>التي
<select>بها فئة .form-control100٪.
Bootstrap Form Layouts التخطيطات
يوفر Bootstrap ثلاثة أنواع من تخطيطات النموذج:
- شكل عمودي (هذا افتراضي)
- شكل أفقي
- شكل مضمّن
القواعد القياسية لجميع تخطيطات النماذج الثلاثة:
- ملصقات التفاف وعناصر تحكم النموذج في
<div class="form-group">(مطلوب للتباعد الأمثل) - أضف فئة إلى كل العناصر
.form-controlالنصية<input>والعناصر<textarea><select>
Bootstrap Vertical Form (افتراضي)
ينشئ المثال التالي نموذجًا رأسيًا يحتوي على حقلي إدخال ، ومربع اختيار واحد ، وزر إرسال:
مثال
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Inline Form
في النموذج المضمن ، تكون جميع العناصر مضمنة ومحاذاة إلى اليسار وتكون التسميات جنبًا إلى جنب.
ملاحظة: ينطبق هذا فقط على النماذج الموجودة في إطارات العرض التي يبلغ عرضها 768 بكسل على الأقل!
قاعدة إضافية للنموذج المضمن:
- أضف فئة
.form-inlineإلى<form>العنصر
ينشئ المثال التالي نموذجًا مضمّنًا مع حقلي إدخال ، ومربع اختيار واحد ، وزر إرسال واحد:
مثال
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
تلميح: إذا لم تقم بتضمين تسمية لكل إدخال ، فستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك. يمكنك إخفاء التسميات لجميع الأجهزة ، باستثناء برامج قراءة الشاشة ، باستخدام
.sr-onlyالفئة:
مثال
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap نموذج أفقي
يعني الشكل الأفقي أن الملصقات تتم محاذاتها بجوار حقل الإدخال (أفقيًا) على الشاشات الكبيرة والمتوسطة. على الشاشات الصغيرة (767 بكسل وأقل) ، ستتحول إلى شكل رأسي (يتم وضع الملصقات أعلى كل إدخال).
قواعد إضافية للشكل الأفقي:
- أضف فئة
.form-horizontalإلى<form>العنصر - أضف فئة
.control-labelلجميع<label>العناصر
تلميح: استخدم فئات الشبكة المحددة مسبقًا في Bootstrap لمحاذاة التسميات ومجموعات عناصر التحكم في النموذج في تخطيط أفقي.
ينشئ المثال التالي نموذجًا أفقيًا يحتوي على حقلي إدخال ، ومربع اختيار واحد ، وزر إرسال واحد.
مثال
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>