মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
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>

ফৰ্ম গ্ৰীড

আমাৰ গ্ৰীড ক্লাছসমূহ ব্যৱহাৰ কৰি অধিক জটিল ফৰ্ম নিৰ্মাণ কৰিব পাৰি। একাধিক স্তম্ভ, বিভিন্ন প্ৰস্থ, আৰু অতিৰিক্ত প্ৰান্তিককৰণ বিকল্পসমূহৰ প্ৰয়োজন হোৱা প্ৰপত্ৰ পৰিকল্পনাসমূহৰ বাবে এইবোৰ ব্যৱহাৰ কৰক। 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-classesSass চলক সামৰ্থবান কৰাৰ প্ৰয়োজন (অবিকল্পিতভাৱে অন)।

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আপোনাৰ s ত যোগ কৰাটো নিশ্চিত কৰক <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>

অনুভূমিক ফৰ্ম লেবেলৰ আকাৰ নিৰ্ধাৰণ

আৰু ৰ আকাৰ সঠিকভাৱে অনুসৰণ কৰিবলৈ বা আপোনাৰ s বা s .col-form-label-smব্যৱহাৰ .col-form-label-lgকৰাটো <label>নিশ্চিত কৰক ।<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>

স্তম্ভৰ আকাৰ নিৰ্ধাৰণ

পূৰ্বৰ উদাহৰণসমূহত দেখুওৱাৰ দৰে, আমাৰ গ্ৰীড ব্যৱস্থাপ্ৰণালীয়ে আপোনাক .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-*সঁহাৰিজনক অনুভূমিক পৰিকল্পনা সৃষ্টি কৰিবলৈ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক । নালা পৰিবৰ্তক শ্ৰেণীসমূহ যোগ কৰি , আমাৰ অনুভূমিক আৰু উলম্ব দিশত নালা থাকিব। সংকীৰ্ণ মোবাইল ভিউপ'ৰ্টসমূহত, .col-12ফৰ্ম নিয়ন্ত্ৰণসমূহ আৰু অধিক ষ্টেক কৰাত সহায় কৰে। The .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>