Source

نماذج

أمثلة وإرشادات الاستخدام لأنماط التحكم في النموذج وخيارات التخطيط والمكونات المخصصة لإنشاء مجموعة متنوعة من النماذج.

ملخص

تتوسع عناصر التحكم في نموذج Bootstrap في أنماط النماذج المعاد تمهيدها مع الفئات. استخدم هذه الفئات للاشتراك في شاشات العرض المخصصة الخاصة بهم للحصول على عرض أكثر تناسقًا عبر المتصفحات والأجهزة.

تأكد من استخدام typeسمة مناسبة في جميع المدخلات (على سبيل المثال ، emailلعنوان البريد الإلكتروني أو numberللمعلومات الرقمية) للاستفادة من عناصر التحكم الجديدة في الإدخال مثل التحقق من البريد الإلكتروني واختيار الرقم والمزيد.

إليك مثال سريع لإظهار أنماط نماذج Bootstrap. استمر في القراءة للحصول على وثائق حول الفئات المطلوبة وتخطيط النموذج والمزيد.

لن نشارك بريدك الإلكتروني مع أي شخص آخر.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

ضوابط النموذج

تم تصميم عناصر التحكم في النموذج النصي - مثل <input>s و s <select>و <textarea>s - مع .form-controlالفصل الدراسي. يتم تضمين أنماط للمظهر العام وحالة التركيز والتحجيم والمزيد.

تأكد من استكشاف نماذجنا المخصصة لمزيد من الأنماط <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

لإدخالات الملفات ، قم بتبديل .form-controlملف .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

تحجيم

حدد ارتفاعات باستخدام فئات مثل .form-control-lgو .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

يقرأ فقط

أضف readonlyالسمة المنطقية على إدخال لمنع تعديل قيمة الإدخال. تظهر مدخلات القراءة فقط أخف (تمامًا مثل المدخلات المعطلة) ، لكنها تحتفظ بالمؤشر القياسي.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

للقراءة فقط نص عادي

إذا كنت تريد أن يكون لديك <input readonly>عناصر في النموذج الخاص بك على هيئة نص عادي ، فاستخدم .form-control-plaintextالفئة لإزالة النمط الافتراضي لحقل النموذج والحفاظ على الهامش والحشو الصحيحين.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

مدخلات النطاق

قم بتعيين مدخلات النطاق القابل للتمرير أفقيًا باستخدام .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

مربعات الاختيار وأجهزة الراديو

.form-checkتم تحسين مربعات الاختيار وأجهزة الراديو الافتراضية بمساعدة فئة واحدة لكل من أنواع الإدخال التي تعمل على تحسين تخطيط وسلوك عناصر HTML الخاصة بهم . خانات الاختيار مخصصة لتحديد خيار واحد أو عدة خيارات في القائمة ، بينما تستخدم أجهزة الراديو لتحديد خيار واحد من بين العديد.

يتم دعم مربعات الاختيار وأجهزة الراديو المعطلة ، ولكن لتوفير not-allowedمؤشر على تحويم الوالد <label>، ستحتاج إلى إضافة disabledالسمة إلى .form-check-input. ستطبق السمة المعطلة لونًا أفتح للمساعدة في الإشارة إلى حالة الإدخال.

تم تصميم مربعات الاختيار وأجهزة الراديو لدعم التحقق من صحة النموذج المستند إلى HTML وتقديم تسميات موجزة وسهلة الوصول. على هذا النحو ، فإن عناصر <input>s و s لدينا <label>هي عناصر أشقاء بدلاً من <input>داخل a <label>. هذا مطول أكثر قليلاً حيث يجب عليك تحديد السمات والسمات لربط idو .for<input><label>

افتراضي (مكدس)

بشكل افتراضي ، سيتم تكديس أي عدد من مربعات الاختيار وأجهزة الراديو التي هي أشقاء مباشرون عموديًا ومتباعدة بشكل مناسب معها .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

في النسق

قم بتجميع مربعات الاختيار أو أجهزة الراديو في نفس الصف الأفقي عن طريق الإضافة .form-check-inlineإلى أي منها .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

بدون تسميات

أضف .position-staticإلى المدخلات .form-checkالتي لا تحتوي على أي نص تسمية. تذكر أن تستمر في تقديم شكل من أشكال الملصقات للتقنيات المساعدة (على سبيل المثال ، استخدام aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

تَخطِيط

نظرًا لأن Bootstrap ينطبق display: blockوعلى width: 100%جميع عناصر التحكم في النموذج تقريبًا ، فإن النماذج ستتكدس بشكل افتراضي عموديًا. يمكن استخدام فئات إضافية لتغيير هذا التخطيط على أساس كل نموذج.

مجموعات النموذج

يعتبر .form-groupالفصل أسهل طريقة لإضافة بعض الهياكل إلى النماذج. يوفر فئة مرنة تشجع على التجميع المناسب للتسميات وعناصر التحكم ونص التعليمات الاختيارية ورسائل التحقق من صحة النموذج. بشكل افتراضي ، يتم تطبيقه فقط margin-bottom، لكنه يلتقط أنماطًا إضافية .form-inlineحسب الحاجة. استخدمه مع <fieldset>s أو <div>s أو أي عنصر آخر تقريبًا.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

شبكة النموذج

يمكن بناء أشكال أكثر تعقيدًا باستخدام فئات الشبكة الخاصة بنا. استخدمها لتخطيطات النماذج التي تتطلب أعمدة متعددة وعروض متنوعة وخيارات محاذاة إضافية.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

صف النموذج

يمكنك أيضًا التبديل من .rowأجل .form-row، شكل مختلف لصف الشبكة القياسي الخاص بنا والذي يتجاوز مزاريب العمود الافتراضية لتخطيطات أكثر إحكامًا وأكثر إحكامًا.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

يمكن أيضًا إنشاء تخطيطات أكثر تعقيدًا باستخدام نظام الشبكة.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

شكل أفقي

قم بإنشاء نماذج أفقية باستخدام الشبكة عن طريق إضافة .rowالفئة إلى مجموعات النماذج واستخدام .col-*-*الفئات لتحديد عرض التسميات وعناصر التحكم. تأكد من الإضافة .col-form-labelإلى <label>عناصرك أيضًا بحيث يتم توسيطها رأسياً مع عناصر التحكم في النموذج المرتبطة بها.

في بعض الأحيان ، قد تحتاج إلى استخدام أدوات مساعدة للهامش أو الحشو لإنشاء المحاذاة المثالية التي تحتاجها. على سبيل المثال ، قمنا بإزالة padding-topتسمية مدخلات الراديو المكدسة لدينا لمحاذاة خط الأساس للنص بشكل أفضل.

أجهزة الراديو
خانة اختيار
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
تحجيم ملصق النموذج الأفقي

تأكد من استخدام .col-form-label-smأو .col-form-label-lgالخاص بك <label>أو الخاص بك <legend>لتتبع بشكل صحيح حجم .form-control-lgو .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

تحجيم العمود

كما هو موضح في الأمثلة السابقة ، يسمح لك نظام الشبكة لدينا بوضع أي عدد من .cols داخل .rowأو .form-row. سيقومون بتقسيم العرض المتاح بالتساوي بينهما. يمكنك أيضًا اختيار مجموعة فرعية من الأعمدة الخاصة بك لشغل مساحة أكبر أو أقل ، بينما تقسم الأعمدة المتبقية .colبالتساوي الباقي ، مع فئات أعمدة معينة مثل .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

التحجيم التلقائي

يستخدم المثال أدناه أداة flexbox المساعدة لتوسيط المحتويات والتغييرات بشكل عمودي بحيث لا تشغل .colالأعمدة .col-autoمساحة كبيرة حسب الحاجة. بعبارة أخرى ، حجم العمود نفسه بناءً على المحتويات.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

يمكنك بعد ذلك إعادة مزج ذلك مرة أخرى بفئات الأعمدة الخاصة بالحجم.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

وبالطبع يتم دعم عناصر التحكم في النموذج المخصص .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

النماذج المضمنة

استخدم .form-inlineالفئة لعرض سلسلة من التسميات وعناصر تحكم النماذج والأزرار على صف أفقي واحد. تختلف عناصر تحكم النموذج في النماذج المضمنة قليلاً عن حالاتها الافتراضية.

  • عناصر التحكم هي display: flexطي أي مساحة بيضاء بتنسيق HTML وتتيح لك توفير تحكم في المحاذاة مع أدوات التباعد والمرنة .
  • يتم تلقي عناصر التحكم ومجموعات الإدخال width: autoلتجاوز الإعداد الافتراضي Bootstrap width: 100%.
  • تظهر عناصر التحكم فقط في محاور في إطارات العرض التي يبلغ عرضها 576 بكسل على الأقل لحساب إطارات العرض الضيقة على الأجهزة المحمولة.

قد تحتاج إلى معالجة عرض ومحاذاة عناصر تحكم النموذج الفردية يدويًا باستخدام أدوات مساعدة للتباعد (كما هو موضح أدناه). أخيرًا ، تأكد دائمًا من تضمين <label>عنصر تحكم مع كل عنصر تحكم في النموذج ، حتى إذا كنت بحاجة إلى إخفائه عن الزائرين الذين لا يستخدمون قارئ الشاشة .sr-only.

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

يتم أيضًا دعم عناصر تحكم وتحديدات النماذج المخصصة.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
بدائل التسميات المخفية

ستواجه التقنيات المساعدة مثل برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لهذه النماذج المضمنة ، يمكنك إخفاء التسميات باستخدام .sr-onlyالفئة. هناك طرق بديلة أخرى لتوفير تسمية للتقنيات المساعدة ، مثل aria-label، aria-labelledbyأو titleالسمة. في حالة عدم وجود أي من هذه ، قد تلجأ التقنيات المساعدة إلى استخدام placeholderالسمة ، إن وجدت ، ولكن لاحظ أنه placeholderلا ينصح باستخدامها كبديل لطرق وضع العلامات الأخرى.

نص المساعدة

يمكن إنشاء نص التعليمات على مستوى الكتلة في النماذج باستخدام .form-text(المعروف سابقًا .help-blockفي الإصدار 3). يمكن تنفيذ نص التعليمات المضمن بمرونة باستخدام أي عنصر HTML مضمّن وفئات أدوات مساعدة مثل .text-muted.

إقران نص التعليمات بعناصر تحكم النموذج

يجب أن يرتبط نص التعليمات بشكل صريح بعنصر التحكم في النموذج الذي يتعلق باستخدام aria-describedbyالسمة. سيضمن هذا أن التقنيات المساعدة - مثل برامج قراءة الشاشة - ستعلن عن نص المساعدة هذا عندما يركز المستخدم أو يدخل عنصر التحكم.

يمكن تنسيق نص المساعدة الموجود أسفل المدخلات باستخدام .form-text. تتضمن هذه الفئة display: blockوتضيف بعض الهامش العلوي لتسهيل التباعد بين المدخلات أعلاه.

يجب أن تتكون كلمة مرورك من 8 إلى 20 حرفًا ، وأن تحتوي على أحرف وأرقام ، ويجب ألا تحتوي على مسافات أو أحرف خاصة أو رموز تعبيرية.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

يمكن أن يستخدم النص المضمن أي عنصر HTML مضمن نموذجي (سواء كان ذلك <small>، <span>أو أي شيء آخر) بدون أي شيء أكثر من فئة أدوات مساعدة.

يجب أن يكون طوله من 8 إلى 20 حرفًا.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

أشكال المعوقين

أضف disabledالسمة المنطقية على الإدخال لمنع تفاعلات المستخدم وجعلها تبدو أفتح.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

أضف disabledالسمة إلى <fieldset>لتعطيل جميع عناصر التحكم داخل.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
تحذير مع المراسي

بشكل افتراضي ، ستتعامل المستعرضات مع جميع عناصر التحكم (والعناصر) الأصلية في النموذج <input>على أنها <select>معطلة ، مما يمنع تفاعلات لوحة المفاتيح والماوس عليها. ومع ذلك ، إذا كان النموذج الخاص بك يتضمن أيضًا عناصر ، فسيتم منح هذه العناصر فقط نمط . كما هو مذكور في القسم الخاص بحالة التعطيل للأزرار (وتحديداً في القسم الفرعي لعناصر الربط) ، فإن خاصية CSS هذه لم يتم توحيدها بعد ولا يتم دعمها بالكامل في Internet Explorer 10 ، ولن تمنع مستخدمي لوحة المفاتيح من أن يكونوا قادرة على التركيز أو تفعيل هذه الروابط. حتى تكون آمنًا ، استخدم JavaScript مخصصًا لتعطيل هذه الروابط.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

التوافق عبر المستعرضات

بينما يقوم Bootstrap بتطبيق هذه الأنماط في جميع المستعرضات ، فإن Internet Explorer 11 وما يليه لا يدعم disabledالسمة بشكل كامل في ملف <fieldset>. استخدم JavaScript مخصص لتعطيل مجموعة الحقول في هذه المتصفحات.

تصديق

قدم ملاحظات قيمة وقابلة للتنفيذ إلى المستخدمين لديك من خلال التحقق من صحة نموذج HTML5 - متاح في جميع المتصفحات المدعومة لدينا . اختر من ملاحظات التحقق الافتراضية من المتصفح ، أو نفذ رسائل مخصصة مع الفئات المضمنة وجافا سكريبت المبدئي.

نوصي حاليًا باستخدام أنماط تحقق مخصصة ، حيث إن رسائل التحقق الافتراضية للمتصفح الأصلي لا تتعرض باستمرار للتقنيات المساعدة في جميع المتصفحات (وعلى الأخص Chrome على سطح المكتب والجوال).

كيف تعمل

إليك كيفية عمل التحقق من صحة النموذج مع Bootstrap:

  • يتم تطبيق التحقق من صحة نموذج HTML عبر فئتي CSS الزائفين ، :invalidو :valid. إنه ينطبق على <input>، <select>والعناصر <textarea>.
  • يقوم Bootstrap بنطاقات :invalidوأنماط للفئة :validالأصلية .was-validated، وعادة ما يتم تطبيقها على ملف <form>. وإلا ، فإن أي حقل مطلوب بدون قيمة يظهر على أنه غير صالح عند تحميل الصفحة. بهذه الطريقة ، يمكنك اختيار وقت تنشيطها (عادةً بعد محاولة إرسال النموذج).
  • لإعادة تعيين مظهر النموذج (على سبيل المثال ، في حالة عمليات إرسال النموذج الديناميكي باستخدام AJAX) ، قم بإزالة .was-validatedالفصل الدراسي <form>مرة أخرى بعد الإرسال.
  • كإجراء احتياطي ، .is-invalidيمكن .is-validاستخدام الفئات بدلاً من الفئات الزائفة للتحقق من صحة الخادم . أنها لا تتطلب .was-validatedفئة الوالدين.
  • نظرًا للقيود المفروضة على كيفية عمل CSS ، لا يمكننا (في الوقت الحالي) تطبيق أنماط على عنصر <label>يأتي قبل عنصر تحكم نموذج في DOM بدون مساعدة JavaScript مخصص.
  • تدعم جميع المتصفحات الحديثة واجهة برمجة تطبيقات التحقق من صحة القيد ، وهي سلسلة من أساليب JavaScript للتحقق من عناصر التحكم في النموذج.
  • قد تستخدم رسائل الملاحظات الإعدادات الافتراضية للمتصفح (تختلف لكل متصفح ، وغير قابلة للنمط من خلال CSS) أو أنماط التعليقات المخصصة لدينا مع HTML و CSS إضافيين.
  • يمكنك تقديم رسائل صلاحية مخصصة باستخدام setCustomValidityJavaScript.

مع وضع ذلك في الاعتبار ، ضع في اعتبارك العروض التوضيحية التالية لأنماط التحقق من صحة النماذج المخصصة ، والفئات الاختيارية من جانب الخادم ، وافتراضيات المتصفح.

الأنماط المخصصة

بالنسبة إلى رسائل التحقق من صحة نموذج Bootstrap المخصصة ، ستحتاج إلى إضافة novalidateالسمة المنطقية إلى ملف <form>. يؤدي هذا إلى تعطيل تلميحات أدوات الملاحظات الافتراضية للمتصفح ، ولكنه لا يزال يوفر الوصول إلى واجهات برمجة تطبيقات التحقق من صحة النموذج في JavaScript. حاول إرسال النموذج أدناه ؛ سوف يعترض JavaScript الخاص بنا زر الإرسال وترحيل الملاحظات إليك. :invalidعند محاولة الإرسال ، سترى :validالأنماط المطبقة على عناصر تحكم النموذج.

تطبق أنماط التعليقات المخصصة ألوانًا وحدودًا وأنماط تركيز وأيقونات خلفية مخصصة لتوصيل الملاحظات بشكل أفضل. تتوفر رموز الخلفية لـ <select>s فقط مع .custom-selectوليس .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

المستعرض الافتراضي

لست مهتمًا برسائل ملاحظات التحقق المخصصة أو كتابة JavaScript لتغيير سلوكيات النموذج؟ كل خير ، يمكنك استخدام الإعدادات الافتراضية للمتصفح. حاول إرسال النموذج أدناه. اعتمادًا على المتصفح ونظام التشغيل لديك ، سترى نمطًا مختلفًا قليلاً للتعليقات.

بينما لا يمكن تصميم أنماط التعليقات هذه باستخدام CSS ، لا يزال بإمكانك تخصيص نص الملاحظات من خلال JavaScript.

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

جانب الخادم

نوصي باستخدام التحقق من جانب العميل ، ولكن في حالة طلب التحقق من جانب الخادم ، يمكنك الإشارة إلى حقول النموذج الصالحة وغير الصالحة باستخدام .is-invalidو .is-valid. لاحظ أن .invalid-feedbackهذا مدعوم أيضًا مع هذه الفئات.

تبدو جيدا!
تبدو جيدا!
@
يرجى اختيار اسم المستخدم.
الرجاء إدخال مدينة صالحة.
يرجى تقديم دولة صالحة.
الرجاء تقديم ملف مضغوط صالح.
يجب أن توافق قبل الإرسال.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

العناصر المدعومة

تعرض نماذج الأمثلة الخاصة بنا نماذج نصية أصلية <input>أعلاه ، ولكن أنماط التحقق من صحة النماذج متاحة أيضًا لعناصر <textarea>تحكم النماذج المخصصة.

الرجاء إدخال رسالة في منطقة النص.
مثال على نص ملاحظات غير صالح
المزيد من الأمثلة على نص تعليقات غير صالح
مثال اختيار مخصص غير صالح
مثال غير صالح لملاحظات ملف مخصص
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

تلميحات

إذا كان تخطيط النموذج الخاص بك يسمح بذلك ، يمكنك تبديل .{valid|invalid}-feedbackالفئات .{valid|invalid}-tooltipللفئات لعرض ملاحظات التحقق من الصحة في تلميح أداة مصمم. تأكد من وجود أحد الوالدين position: relativeعليه لوضع تلميح الأداة. في المثال أدناه ، تحتوي فئات العمود لدينا على هذا بالفعل ، ولكن مشروعك قد يتطلب إعدادًا بديلاً.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

النماذج المخصصة

لمزيد من التخصيص والاتساق عبر المستعرضات ، استخدم عناصر النموذج المخصصة تمامًا لاستبدال الإعدادات الافتراضية للمتصفح. لقد تم إنشاؤها فوق العلامات الدلالية والتي يمكن الوصول إليها ، لذا فهي بدائل قوية لأي عنصر تحكم افتراضي في النموذج.

مربعات الاختيار وأجهزة الراديو

يتم تغليف كل خانة اختيار وراديو <input>وإقران في a لإنشاء التحكم المخصص لدينا. من الناحية الهيكلية ، هذا هو نفس نهجنا الافتراضي .<label><div>.form-check

نستخدم محدد الأخوة ( ~) لجميع حالاتنا - <input>مثل - لتصميم مؤشر النموذج المخصص بشكل صحيح. :checkedعند الدمج مع .custom-control-labelالفصل ، يمكننا أيضًا تصميم النص لكل عنصر بناءً على حالة <input>''.

نخفي الإعداد الافتراضي <input>باستخدام opacityونستخدمه .custom-control-labelلإنشاء مؤشر نموذج مخصص جديد في مكانه باستخدام ::beforeو ::after. لسوء الحظ ، لا يمكننا إنشاء عنصر مخصص من فقط <input>لأن CSS contentلا يعمل على هذا العنصر.

في الحالات المحددة ، نستخدم رموز SVG المضمنة في base64 من Open Iconic . يوفر لنا هذا أفضل تحكم في التصميم وتحديد المواقع عبر المتصفحات والأجهزة.

مربعات الاختيار

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

يمكن أن تستخدم مربعات الاختيار المخصصة أيضًا :indeterminateفئة pseudo عند تعيينها يدويًا عبر JavaScript (لا توجد سمة HTML متاحة لتحديدها).

إذا كنت تستخدم jQuery ، فيجب أن يكون شيئًا كهذا كافيًا:

$('.your-checkbox').prop('indeterminate', true)

أجهزة الراديو

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

في النسق

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

عاجز

يمكن أيضًا تعطيل مربعات الاختيار وأجهزة الراديو المخصصة. أضف disabledالسمة المنطقية إلى وسيتم <input>تصميم المؤشر المخصص ووصف التسمية تلقائيًا.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

مفاتيح

يحتوي المحول على ترميز مربع اختيار مخصص ولكنه يستخدم .custom-switchالفئة لتقديم مفتاح تبديل. تدعم المحولات أيضًا disabledالسمة.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

اختر قائمة

القوائم المخصصة <select>تحتاج فقط إلى فئة مخصصة ، .custom-selectلتشغيل الأنماط المخصصة. تقتصر الأنماط المخصصة على <select>المظهر الأولي ولا يمكن تعديلها <option>بسبب قيود المستعرض.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

يمكنك أيضًا الاختيار من بين التحديدات المخصصة الصغيرة والكبيرة لمطابقة إدخالات النص ذات الحجم المماثل.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

السمة multipleمدعومة أيضًا:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

كما هي sizeالسمة:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

نطاق

<input type="range">إنشاء ضوابط مخصصة مع .custom-range. تم تصميم كل من المسار (الخلفية) والإبهام (القيمة) بحيث يظهران بنفس الشكل عبر المتصفحات. نظرًا لأن IE و Firefox فقط يدعمان "ملء" المسار الخاص بهما من يسار أو يمين الإبهام كوسيلة للإشارة بصريًا إلى التقدم ، فإننا لا ندعمه حاليًا.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

تحتوي مدخلات النطاق على قيم ضمنية لـ - minو ، على التوالي. يمكنك تحديد قيم جديدة لأولئك الذين يستخدمون السمات و .max0100minmax

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

بشكل افتراضي ، يدخل النطاق "المفاجئة" لقيم عدد صحيح. لتغيير هذا ، يمكنك تحديد stepقيمة. في المثال أدناه ، نضاعف عدد الخطوات باستخدام step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

متصفح الملفات

المكوّن الإضافي الموصى به لتحريك إدخال ملف مخصص: bs-custom-file-input ، هذا ما نستخدمه حاليًا هنا في مستنداتنا.

يُعد إدخال الملف هو الأكثر شيوعًا بين المجموعة ويتطلب JavaScript إضافيًا إذا كنت ترغب في ربطها مع وظيفي اختر ملفًا ... ونص اسم الملف المحدد.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

نقوم بإخفاء الملف الافتراضي <input>عبر ونقوم opacityبدلاً من ذلك بتنسيق <label>. يتم إنشاء الزر ووضعه مع ::after. widthأخيرًا ، نعلن عن وجود heightمسافة <input>مناسبة للمحتوى المحيط.

ترجمة أو تخصيص السلاسل باستخدام SCSS

تُستخدم :lang()الفئة الزائفة للسماح بترجمة نص "التصفح" إلى لغات أخرى. تجاوز أو أضف إدخالات إلى $custom-file-textمتغير Sass بعلامة اللغة ذات الصلة والسلاسل المترجمة. يمكن تخصيص السلاسل الإنجليزية بنفس الطريقة. على سبيل المثال ، إليك كيفية إضافة ترجمة إسبانية (رمز اللغة الإسبانية هو es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

فيما يلي lang(es)عملية إدخال ملف مخصص لترجمة إسبانية:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

ستحتاج إلى تعيين لغة المستند الخاص بك (أو الشجرة الفرعية الخاصة به) بشكل صحيح حتى يتم عرض النص الصحيح. يمكن القيام بذلك باستخدام السمة langالموجودة على <html>العنصر أو Content-Languageرأس HTTP ، من بين طرق أخرى.

ترجمة أو تخصيص السلاسل باستخدام HTML

يوفر Bootstrap أيضًا طريقة لترجمة نص "التصفح" في HTML data-browseبالسمة التي يمكن إضافتها إلى تسمية الإدخال المخصصة (المثال باللغة الهولندية):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>