رفتن به محتوای اصلی به پیمایش اسناد بروید
Check
in English

چیدمان

با گزینه‌های طرح‌بندی فرم، به فرم‌های خود ساختاری بدهید - از درون خطی تا افقی تا پیاده‌سازی شبکه‌ای سفارشی.

در این صفحه

تشکیل می دهد

هر گروه از فیلدهای فرم باید در یک <form>عنصر قرار گیرند. بوت استرپ هیچ استایل پیش فرضی برای <form>عنصر ارائه نمی دهد، اما برخی از ویژگی های مرورگر قدرتمندی وجود دارد که به طور پیش فرض ارائه شده اند.

  • آیا با فرم های مرورگر آشنا هستید؟ برای مشاهده کلی و فهرست کامل ویژگی های موجود، اسناد فرم MDN را مرور کنید.
  • <button>s در یک <form>پیش‌فرض به type="submit"است، بنابراین سعی کنید خاص باشید و همیشه یک علامت را وارد typeکنید.

از آنجایی که Bootstrap display: blockو width: 100%تقریباً برای همه کنترل‌های فرم ما اعمال می‌شود، فرم‌ها به‌طور پیش‌فرض به صورت عمودی قرار می‌گیرند. می توان از کلاس های اضافی برای تغییر این طرح بر اساس هر فرم استفاده کرد.

خدمات رفاهی

ابزارهای حاشیه ساده ترین راه برای افزودن ساختار به فرم ها هستند. آنها گروه بندی اولیه برچسب ها، کنترل ها، متن فرم اختیاری و پیام های تأیید فرم را ارائه می دهند. توصیه می کنیم به margin-bottomابزارهای کاربردی پایبند باشید و از یک جهت واحد در سراسر فرم برای ثبات استفاده کنید.

به راحتی می توانید فرم های خود را هر طور که دوست دارید، با <fieldset>s، <div>s یا تقریباً هر عنصر دیگری بسازید.

html 
<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 فعال باشد (به طور پیش فرض روشن).

html 
<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 فعال باشد (به طور پیش فرض روشن).

html 
<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>

طرح‌بندی‌های پیچیده‌تری را نیز می‌توان با سیستم شبکه ایجاد کرد.

html 
<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-*-*کلاس ها برای تعیین عرض برچسب ها و کنترل های خود، فرم های افقی را با شبکه ایجاد کنید. حتماً به s .col-form-labelخود <label>نیز اضافه کنید تا به صورت عمودی با کنترل‌های فرم مرتبط خود در مرکز قرار گیرند.

گاهی اوقات، ممکن است لازم باشد از ابزارهای حاشیه یا padding استفاده کنید تا تراز کامل مورد نیاز خود را ایجاد کنید. به عنوان مثال، ما padding-topبرچسب ورودی های رادیویی انباشته خود را حذف کرده ایم تا خط پایه متن را بهتر تراز کنیم.

رادیوها
html 
<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>s یا s خود استفاده کنید تا اندازه و <legend>را به درستی دنبال کنید ..form-control-lg.form-control-sm

html 
<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.

html 
<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ستون‌های شما فقط به اندازه‌ای که فضای لازم را اشغال کنند. به عبارت دیگر، ستون خود را بر اساس محتویات اندازه می گیرد.

@
html 
<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>

سپس می‌توانید آن را یک بار دیگر با کلاس‌های ستونی با اندازه خاص، مجدداً مخلوط کنید.

@
html 
<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-checkتراز را به درستی انجام می دهد.

@
html 
<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>