ലേഔട്ട്

ഞങ്ങളുടെ ഫോം ലേഔട്ട് ഓപ്‌ഷനുകൾക്കൊപ്പം ഇൻലൈൻ മുതൽ തിരശ്ചീനമായി ഇഷ്‌ടാനുസൃത ഗ്രിഡ് നടപ്പിലാക്കലുകൾ വരെ നിങ്ങളുടെ ഫോമുകൾക്ക് ചില ഘടന നൽകുക.

ഈ പേജിൽ

ഫോമുകൾ

ഫോം ഫീൽഡുകളുടെ എല്ലാ ഗ്രൂപ്പുകളും ഒരു <form>ഘടകത്തിൽ വസിക്കണം. ബൂട്ട്‌സ്‌ട്രാപ്പ് എലമെന്റിന് ഡിഫോൾട്ട് സ്‌റ്റൈലിംഗ് നൽകുന്നില്ല <form>, എന്നാൽ ഡിഫോൾട്ടായി നൽകുന്ന ചില ശക്തമായ ബ്രൗസർ സവിശേഷതകൾ ഉണ്ട്.

ബ്രൗസർ ഫോമുകളിൽ പുതിയതാണോ? ഒരു അവലോകനത്തിനും ലഭ്യമായ ആട്രിബ്യൂട്ടുകളുടെ പൂർണ്ണമായ ലിസ്റ്റിനും MDN ഫോം ഡോക്‌സ് അവലോകനം ചെയ്യുന്നത് പരിഗണിക്കുക .
<button>ഒരു <form>ഡിഫോൾട്ടിനുള്ളിൽ s type="submit", അതിനാൽ പ്രത്യേകമായിരിക്കാൻ ശ്രമിക്കുകയും എപ്പോഴും ഒരു ഉൾപ്പെടുത്തുകയും ചെയ്യുക type.
disabledഎന്നതിലെ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒരു ഫോമിനുള്ളിലെ എല്ലാ ഫോം ഘടകങ്ങളും നിങ്ങൾക്ക് പ്രവർത്തനരഹിതമാക്കാം <form>.

ബൂട്ട്‌സ്‌ട്രാപ്പ് ബാധകമായതിനാൽ 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>

ഫോം ഗ്രിഡ്

ഞങ്ങളുടെ ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിച്ച് കൂടുതൽ സങ്കീർണ്ണമായ രൂപങ്ങൾ നിർമ്മിക്കാൻ കഴിയും. ഒന്നിലധികം നിരകൾ, വ്യത്യസ്‌ത വീതികൾ, അധിക വിന്യാസ ഓപ്‌ഷനുകൾ എന്നിവ ആവശ്യമുള്ള ഫോം ലേഔട്ടുകൾക്കായി ഇവ ഉപയോഗിക്കുക. Sass $enable-grid-classesവേരിയബിൾ പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട് (സ്ഥിരസ്ഥിതിയായി ഓൺ).

<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 വേരിയബിൾ പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട് (സ്ഥിരസ്ഥിതിയായി).

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

തിരശ്ചീന ഫോം ലേബൽ വലുപ്പം

ന്റെ വലുപ്പം ശരിയായി പിന്തുടരുന്നതിന് നിങ്ങളുടെ s അല്ലെങ്കിൽ .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>

നിരയുടെ വലുപ്പം

.colമുമ്പത്തെ ഉദാഹരണങ്ങളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റം ഒരു എന്നതിനുള്ളിൽ എത്ര s-കളും സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു .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>

യാന്ത്രിക വലുപ്പം

ചുവടെയുള്ള ഉദാഹരണം ഉള്ളടക്കങ്ങൾ ലംബമായി കേന്ദ്രീകരിക്കുന്നതിനും മാറ്റുന്നതിനും ഒരു ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നു, .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>