مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

ترتيب

پنھنجي فارمن کي ڪجھ ڍانچي ڏيو- ان لائن کان افقي تائين ڪسٽم گرڊ لاڳو ڪرڻ- اسان جي فارم جي ترتيب جي اختيارن سان.

هن صفحي تي

فارم

فارم فيلڊ جي هر گروپ کي هڪ <form>عنصر ۾ رهڻ گهرجي. Bootstrap عنصر لاءِ ڪو به ڊفالٽ اسٽائل مهيا نٿو ڪري <form>، پر ڪجھ طاقتور برائوزر خاصيتون آھن جيڪي ڊفالٽ طرفان مهيا ڪيل آھن.

  • برائوزر فارمن تي نئون؟ غور ڪريو MDN فارم دستاويزن جو جائزو وٺڻ لاءِ ۽ دستياب خاصيتن جي مڪمل فهرست.
  • <button><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>

فارم گرڊ

اسان جي گرڊ ڪلاس استعمال ڪندي وڌيڪ پيچيده فارم ٺاهي سگھجن ٿا. انهن فارم جي ترتيبن لاءِ استعمال ڪريو جن کي گھڻن ڪالمن، مختلف چوٿون، ۽ اضافي ترتيب جي اختيارن جي ضرورت آھي. Sass $enable-grid-classesمتغير کي فعال ٿيڻ جي ضرورت آهي (ڊفالٽ طرفان).

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 (ڊفالٽ طور تي).

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-*-*طبقن کي استعمال ڪندي پنھنجي ليبلز ۽ ڪنٽرولن جي چوٽي بيان ڪرڻ لاءِ. پڪ ڪريو .col-form-labelته توهان <label>جي ايس ۾ پڻ شامل ڪيو وڃي ته جيئن اهي عمودي طور تي انهن جي لاڳاپيل فارم ڪنٽرولن سان مرڪز آهن.

ڪڏهن ڪڏهن، توهان کي شايد ضرورت هجي ته مارجن يا پيڊنگ يوٽيلٽيز استعمال ڪرڻ لاءِ جيڪي توهان کي گهربل هجي اهو مڪمل ترتيب ڏيڻ لاءِ. مثال طور، اسان 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>

افقي فارم ليبل sizing

استعمال ڪرڻ جي پڪ ڪريو .col-form-label-smيا .col-form-label-lgتوهان <label>جي s يا <legend>s کي صحيح طريقي سان .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>

ڪالمن جي ماپ

جيئن پوئين مثالن ۾ ڏيکاريو ويو آهي، اسان جو گرڊ سسٽم توهان کي اجازت ڏئي ٿو ته ڪنهن به نمبر جي .colاندر s رکي .row. اهي انهن جي وچ ۾ موجود ويڪر برابر برابر تقسيم ڪندا. توھان شايد پنھنجي ڪالمن جو ھڪڙو ذيلي سيٽ پڻ چونڊي سگھوٿا وڌيڪ يا گھٽ جاءِ وٺڻ لاءِ، جڏھن ته باقي .cols برابر ورهايو باقي، مخصوص ڪالمن جي ڪلاسن سان .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-*جوابي افقي ترتيب ٺاهڻ لاءِ ڪلاس استعمال ڪريو . گٽر مٽائيندڙ طبقن کي شامل ڪرڻ سان ، اسان وٽ گٽر افقي ۽ عمودي طرفن ۾ هوندا. تنگ موبائيل viewports تي، .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>