أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap Form Inputs (more)


مراقبة ثابتة

إذا كنت تحتاج إلى إدراج نص عادي بجانب تسمية نموذج داخل الشكل الأفقي، استخدم .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>
انها محاولة لنفسك »