البرنامج التعليمي Bootstrap 3

BS HOME ابدأ BS BS Grid Basic بكالوريوس الطباعة جداول BS صور بكالوريوس BS Jumbotron بي إس ويلز تنبيهات BS أزرار BS مجموعات زر BS BS Glyphicons شارات / ملصقات BS أشرطة التقدم BS ترقيم الصفحات BS بكالوريوس بيجر مجموعات قائمة BS لوحات BS القوائم المنسدلة BS انهيار BS علامات التبويب / حبوب BS Navbar نماذج بكالوريوس مدخلات BS مدخلات BS 2 تحجيم المدخلات BS كائنات BS Media BS كاروسيل مشروط BS تلميح BS Tooltip BS Popover BS Scrollspy BS اللصقة مرشحات BS

شبكات التمهيد

نظام BS Grid BS مكدس / أفقي BS Grid Small BS شبكة متوسطة BS شبكة كبيرة أمثلة على شبكة BS

ثيمات Bootstrap

قوالب بكالوريوس موضوع BS "ببساطة أنا" موضوع BS "شركة" موضوع BS "الفرقة"

أمثلة التمهيد

أمثلة بكالوريوس اختبار BS تمارين البكالوريوس شهادة بكالوريوس

Bootstrap CSS المرجع

CSS جميع الفئات طباعة CSS أزرار CSS نماذج CSS مساعدي CSS صور CSS جداول CSS القوائم المنسدلة CSS ملاحق CSS الحروف الرسومية

Bootstrap JS المرجع

شبيبة الملحقة تنبيه JS زر JS JS Carousel طي JS JS المنسدلة شبيبة مشروط شبيبة بوبوفر شبيبة Scrollspy علامة التبويب JS JS Tooltip


مدخلات نموذج التمهيد (المزيد )


تحكم ثابت

إذا كنت بحاجة إلى إدراج نص عادي بجوار تسمية نموذج داخل نموذج أفقي ، فاستخدم .form-control-staticالفئة في <p>عنصر:

مثال

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
</form>

مجموعات الإدخال Bootstrap

الفصل .input-groupعبارة عن حاوية لتحسين الإدخال عن طريق إضافة رمز أو نص أو زر أمامه أو خلفه كـ "نص مساعدة".

يقوم .input-group-addonالفصل بإرفاق رمز أو نص تعليمات بجوار حقل الإدخال.


نص

مثال

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>

يرفق زرًا .input-group-btnبجوار أحد المدخلات. غالبًا ما يستخدم مع شريط البحث:

مثال

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>


حالات التحكم في نموذج Bootstrap

  • INPUT FOCUS - تتم إزالة مخطط الإدخال ويتم تطبيق ظل الصندوق عند التركيز
  • المدخلات المعطلة - أضف disabledسمة لتعطيل حقل إدخال
  • مجموعات الحقول المعطلة - أضف disabledسمة إلى مجموعة الحقول لتعطيل جميع عناصر التحكم بداخلها
  • READONLY INPUTS - أضف readonlyسمة إلى إدخال لمنع إدخال المستخدم
  • حالات التحقق - يتضمن Bootstrap أنماط التحقق من صحة رسائل الخطأ والتحذير والنجاح. لاستخدام العنصر الأصلي أو إضافته أو .has-warningإليه.has-error.has-success
  • الأيقونات - يمكنك إضافة أيقونات ملاحظات مع .has-feedbackالفصل وأيقونة
  • التسميات المخفية - أضف .sr-onlyفئة على الملصقات غير المرئية

يوضح المثال التالي بعض حالات التحكم في النموذج أعلاه في نموذج أفقي :

مثال

<form class="form-horizontal">
  <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="disabledInput" 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">
  <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>