Bootstrap's الإعدادات الافتراضية
عناصر تحكم النموذج تحصل تلقائيا على بعض التصميم العالمي مع Bootstrap :
جميع النصوص <input> ، <textarea> و <select> العناصر مع الطبقة .form-control لديها عرض 100٪.
Bootstrap نموذج تخطيط
Bootstrap توفر ثلاثة أنواع من تخطيطات النموذج:
- شكل عمودي (هذا هو الافتراضي)
- الشكل الأفقي
- شكل مضمنة
القواعد الموحدة لجميع تخطيطات شكل ثلاثة:
- دائما استخدام
<form role="form">(يساعد على تحسين إمكانية الوصول للأشخاص الذين يستخدمون قارئات الشاشة) - التفاف التسميات وضوابط النموذج في
<div class="form-group">(اللازمة لتباعد الأمثل) - إضافة الطبقة
.form-controlعلى جميع النصوص<input>،<textarea>و<select>عناصر
Bootstrap نموذج عمودي (افتراضي)
يقوم المثال التالي شكل الرأسي مع اثنين من حقول الإدخال، مربع واحد، ويقدم الزر:
مثال
<form role="form">
<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 نموذج مضمنة
في شكل مضمنة، كل العناصر هي مضمنة، باتجاه اليسار، والتسميات وجنبا إلى جنب.
ملاحظة: هذا ينطبق فقط على أشكال ضمن viewports التي 768px على الأقل واسعة!
حكم إضافية للحصول على نموذج مضمنة:
- إضافة الطبقة
.form-inlineإلى<form>العنصر
يقوم المثال التالي شكل مضمنة مع اثنين من حقول الإدخال، مربع واحد، واحد يقدم زر:
مثال
<form class="form-inline" role="form">
<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" role="form">
<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 نموذج الأفقية
وهناك شكل أفقي يقف وبصرف النظر عن أشكال أخرى سواء في كمية من العلامات، وفي عرض النموذج.
قواعد إضافية لشكل أفقي:
- إضافة الطبقة
.form-horizontalإلى<form>العنصر - إضافة الطبقة
.control-labelلجميع<label>عناصر
نصيحة: يمكنك استخدام Bootstrap's دروس شبكة محددة مسبقا إلى محاذاة التسميات ومجموعات من عناصر تحكم النموذج في تخطيط أفقي.
يقوم المثال التالي شكل أفقي مع اثنين من حقول الإدخال، مربع واحد، واحد يقدم زر:
مثال
<form class="form-horizontal" role="form">
<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> انها محاولة لنفسك »