مراقبة ثابتة
إذا كنت تحتاج إلى إدراج نص عادي بجانب تسمية نموذج داخل الشكل الأفقي، استخدم .form-control-static
الطبقة على <p>
العنصر:
مثال
<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">
<p
class="form-control-static">[email protected]</p>
</div>
</div>
</form>
انها محاولة لنفسك » Bootstrap تحكم نموذج States
- INPUT FOCUS - الخطوط العريضة للمدخلات تتم إزالة ويتم تطبيق الظل مربع على التركيز
- DISABLED INPUTS - أضف
disabled
السمة إلى تعطيل حقل الإدخال - DISABLED FIELDSETS - أضف
disabled
سمة لمجموعة حقول لتعطيل كافة عناصر التحكم في - READONLY INPUTS - إضافة
readonly
السمة إلى مدخلا لمنع إدخال المستخدم - VALIDATION STATES - Bootstrap يشمل أساليب التحقق من صحة رسائل الخطأ والتحذير والنجاح. للاستخدام، إضافة
.has-warning
،.has-error
، أو.has-success
إلى العنصر الأصلي - ICONS - يمكنك إضافة الرموز ردود الفعل مع
.has-feedback
الطبقي ورمز - HIDDEN LABELS - أضف
.sr-only
الطبقة على تسميات غير مرئية
يوضح المثال التالي بعض الدول تحكم النموذج أعلاه في شكل أفقي:
مثال
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="col-sm-2
control-label">Focused</label>
<div
class="col-sm-10">
<input
class="form-control" id="focusedInput" type="text" value="Click to
focus">
</div>
</div>
<div
class="form-group">
<label for="inputPassword"
class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input
class="form-control" id="disabledInput" type="text"
disabled>
</div>
</div>
<fieldset disabled>
<div
class="form-group">
<label for="disabledTextInput"
class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group
has-success has-feedback">
<label class="col-sm-2
control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning
has-feedback">
<label class="col-sm-2
control-label" for="inputWarning">
Input with warning and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error
and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
انها محاولة لنفسك » وهنا مثال لبعض الدول تحكم النموذج في شكل مضمنة:
مثال
<form class="form-inline" role="form">
<div
class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label
for="inputPassword">Disabled</label>
<input
class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
<div
class="form-group has-error has-feedback">
<label
for="inputError2">Input with error</label>
<input
type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
انها محاولة لنفسك »