چیدمان

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

طرح بندی فرم در بوت استرپ
فرم پایه
<form>
  <div class="mb-3"><label class="form-label" for="basic-form-name">Name</label><input class="form-control" id="basic-form-name" type="text" placeholder="Name" /></div>
  <div class="mb-3"><label class="form-label" for="basic-form-email">Email address</label><input class="form-control" id="basic-form-email" type="email" placeholder="name@example.com" /></div>
  <div class="mb-3"><label class="form-label" for="basic-form-password">Password</label><input class="form-control" id="basic-form-password" type="password" placeholder="Password" /></div>
  <div class="mb-3"><label class="form-label" for="basic-form-dob">Date of Birth</label><input class="form-control" id="basic-form-dob" type="date" /></div>
  <div class="mb-3"><label class="form-label" for="basic-form-gender">Gender</label><select class="form-select" id="basic-form-gender" aria-label="Default select example">
      <option selected="selected">Select your gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
    </select></div>
  <div class="mb-3">
    <div class="form-check"><input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault" /><label class="form-check-label mb-0" for="flexRadioDefault1">Personal Account</label></div>
    <div class="form-check"><input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="checked" /><label class="form-check-label mb-0" for="flexRadioDefault2">Business Account</label></div>
  </div>
  <div class="mb-3"><label class="form-label">Upload Image</label><input class="form-control" type="file" /></div>
  <div class="mb-3"><label class="form-label" for="basic-form-textarea">Description</label><textarea class="form-control" id="basic-form-textarea" rows="3" placeholder="Description"></textarea></div>
  <div class="mb-3 form-check"><input class="form-check-input" id="basic-form-checkbox" type="checkbox" /><label class="form-check-label" for="basic-form-checkbox">Remember me</label></div><button class="btn btn-primary" type="submit">Submit</button>
</form>
فرم افقی

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

چک باکس
<form>
  <div class="row mb-3"><label class="col-sm-2 col-form-label" for="inputEmail3">Email</label>
    <div class="col-sm-10"><input class="form-control" id="inputEmail3" type="email" /></div>
  </div>
  <div class="row mb-3"><label class="col-sm-2 col-form-label" for="inputPassword3">Password</label>
    <div class="col-sm-10"><input class="form-control" id="inputPassword3" type="password" /></div>
  </div>
  <fieldset>
    <div class="row mb-3"><label class="col-form-label col-sm-2 pt-0">Radios</label>
      <div class="col-sm-10">
        <div class="form-check"><input class="form-check-input" id="gridRadios1" type="radio" name="gridRadios" value="option1" checked="" /><label class="form-check-label" for="gridRadios1">First radio</label></div>
        <div class="form-check"><input class="form-check-input" id="gridRadios2" type="radio" name="gridRadios" value="option2" /><label class="form-check-label" for="gridRadios2">Second radio</label></div>
        <div class="form-check disabled"><input class="form-check-input" id="gridRadios3" type="radio" name="gridRadios" value="option3" disabled="" /><label class="form-check-label" for="gridRadios3">Third disabled radio</label></div>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-form-label col-sm-2 pt-0">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check"><input class="form-check-input" id="gridCheck1" type="checkbox" /><label class="form-check-label" for="gridCheck1">Example checkbox</label></div>
    </div>
  </div><button class="btn btn-primary" type="submit">Sign in</button>
</form>
اندازه برچسب فرم افقی

حتماً از .col-form-label-smیا .col-form-label-lgبه <label>s یا s خود استفاده کنید تا اندازه و <legend>را به درستی دنبال کنید ..form-control-lg.form-control-sm

<div class="row mb-3"><label class="col-sm-2 col-form-label col-form-label-sm" for="colFormLabelSm">Email</label>
  <div class="col-sm-10"><input class="form-control form-control-sm" id="colFormLabelSm" type="email" placeholder="col-form-label-sm" /></div>
</div>
<div class="row mb-3"><label class="col-sm-2 col-form-label" for="colFormLabel">Email</label>
  <div class="col-sm-10"><input class="form-control" id="colFormLabel" type="email" placeholder="col-form-label" /></div>
</div>
<div class="row"><label class="col-sm-2 col-form-label col-form-label-lg" for="colFormLabelLg">Email</label>
  <div class="col-sm-10"><input class="form-control form-control-lg" id="colFormLabelLg" type="email" placeholder="col-form-label-lg" /></div>
</div>
شبکه فرم

فرم های پیچیده تری را می توان با استفاده از کلاس های گرید ما ساخت. از این ها برای طرح بندی فرم هایی که نیاز به ستون های متعدد، عرض های متنوع و گزینه های تراز اضافی دارند استفاده کنید. باید $enable-grid-classesمتغیر Sass فعال باشد (به طور پیش فرض روشن).

<div class="row">
  <div class="col"><input class="form-control" type="text" placeholder="First name" aria-label="First name" /></div>
  <div class="col"><input class="form-control" type="text" placeholder="Last name" aria-label="Last name" /></div>
</div>
طرح بندی شبکه ای فرم

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

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

سیستم گرید به شما این امکان را می دهد که هر تعداد را .colsدر یک قرار دهید .row. آنها عرض موجود را به طور مساوی بین خود تقسیم می کنند

<div class="row g-3">
  <div class="col-sm-7"><input class="form-control" type="text" placeholder="City" aria-label="City" /></div>
  <div class="col-sm"><input class="form-control" type="text" placeholder="State" aria-label="State" /></div>
  <div class="col-sm"><input class="form-control" type="text" placeholder="Zip" aria-label="Zip" /></div>
</div>
شبکه - اندازه خودکار

برای اینکه ستون‌ها فقط به اندازه‌ای که فضای لازم را اشغال کنند، .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 class="form-control" id="autoSizingInput" type="text" 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 class="form-control" id="autoSizingInputGroup" type="text" placeholder="Username" />
    </div>
  </div>
  <div class="col-auto"><label class="visually-hidden" for="autoSizingSelect">Preference</label><select class="form-select" id="autoSizingSelect">
      <option selected="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 mb-0"><input class="form-check-input" id="autoSizingCheck" type="checkbox" /><label class="form-check-label mb-0" for="autoSizingCheck">Remember me</label></div>
  </div>
  <div class="col-auto"><button class="btn btn-primary" type="submit">Submit</button></div>
</form>
ناودان

با افزودن کلاس‌های اصلاح‌کننده ناودان ، می‌توانید بر عرض ناودان در جهت خطی و بلوک کنترل داشته باشید. همچنین باید $enable-grid-classesمتغیر Sass فعال باشد (به طور پیش فرض روشن).

<div class="row g-3">
  <div class="col"><input class="form-control" type="text" placeholder="First name" aria-label="First name" /></div>
  <div class="col"><input class="form-control" type="text" placeholder="Last name" aria-label="Last name" /></div>
</div>
فرم های درون خطی

از .row-cols-*کلاس ها برای ایجاد طرح بندی های افقی پاسخگو استفاده کنید. با اضافه کردن gutter modifier classes، ناودانی در جهت افقی و عمودی خواهیم داشت. در نماهای باریک تلفن همراه، .col-12به جمع کردن کنترل‌های فرم و موارد دیگر کمک می‌کند. عناصر .align-items-centerفرم را به وسط تراز می کند و .form-checkboxتراز را به درستی انجام می دهد.

@
<form class="row row-cols-lg-5 g-3 align-items-center">
  <div class="col-12"><label class="sr-only" for="inlineFormInputName">Name</label><input class="form-control" id="inlineFormInputName" type="text" placeholder="Jane Doe" /></div>
  <div class="col-12"><label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div><input class="form-control" id="inlineFormInputGroupUsername" type="text" placeholder="Username" />
    </div>
  </div>
  <div class="col-12"><label class="sr-only" 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 mb-0"><input class="form-check-input" id="inlineFormCheck" type="checkbox" /><label class="mb-0 form-check-label" for="inlineFormCheck">Remember me</label></div>
  </div>
  <div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div>
</form>
خدمات رفاهی

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

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

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی