تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

تَخطِيط

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

نماذج

يجب أن تتواجد كل مجموعة من حقول النموذج في <form>عنصر. لا يوفر Bootstrap تصميمًا افتراضيًا <form>للعنصر ، ولكن هناك بعض ميزات المتصفح القوية التي يتم توفيرها افتراضيًا.

  • جديد في أشكال المتصفح؟ ضع في اعتبارك مراجعة مستندات نموذج MDN للحصول على نظرة عامة وقائمة كاملة بالسمات المتاحة.
  • <button>s ضمن <form>الإعداد الافتراضي type="submit"، لذلك حاول أن تكون محددًا وقم دائمًا بتضمين ملف type.
  • يمكنك تعطيل كل عنصر من عناصر النموذج داخل نموذج مع وجود disabledالسمة على ملف <form>.

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

خدمات

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

لا تتردد في إنشاء النماذج الخاصة بك كيفما تشاء ، مع <fieldset>s ، <div>s ، أو أي عنصر آخر تقريبًا.

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

شبكة النموذج

يمكن بناء أشكال أكثر تعقيدًا باستخدام فئات الشبكة الخاصة بنا. استخدمها لتخطيطات النماذج التي تتطلب أعمدة متعددة وعروضًا متنوعة وخيارات محاذاة إضافية. يتطلب $enable-grid-classesمتغير Sass ليتم تمكينه (افتراضيًا).

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

المزاريب

من خلال إضافة فئات معدِّل الحضيض ، يمكنك التحكم في عرض الحضيض في الاتجاه المضمن مثل اتجاه الكتلة. يتطلب أيضًا $enable-grid-classesتمكين متغير Sass (افتراضيًا).

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

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

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

شكل أفقي

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

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

أجهزة الراديو
<form>
  <div class="row mb-3">
    <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">
    </div>
  </div>
  <div class="row mb-3">
    <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">
    </div>
  </div>
  <fieldset class="row mb-3">
    <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>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

تحجيم ملصق النموذج الأفقي

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

<div class="row mb-3">
  <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="row mb-3">
  <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="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>

تحجيم العمود

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

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

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

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

@
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

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

@
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

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

استخدم .row-cols-*الفئات لإنشاء تخطيطات أفقية سريعة الاستجابة. من خلال إضافة فئات معدّل الحضيض ، سيكون لدينا مزاريب في اتجاهات أفقية ورأسية. في إطارات العرض المحمولة الضيقة ، .col-12يساعد هذا في تكديس عناصر التحكم في النموذج والمزيد. .align-items-centerيحاذي عناصر النموذج إلى المنتصف ، مما يجعل المحاذاة .form-checkboxبشكل صحيح.

@
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>