ലേഔട്ട്
ഞങ്ങളുടെ ഫോം ലേഔട്ട് ഓപ്ഷനുകൾക്കൊപ്പം ഇൻലൈൻ മുതൽ തിരശ്ചീനമായി ഇഷ്ടാനുസൃത ഗ്രിഡ് നടപ്പിലാക്കലുകൾ വരെ നിങ്ങളുടെ ഫോമുകൾക്ക് ചില ഘടന നൽകുക.
ഫോമുകൾ
ഫോം ഫീൽഡുകളുടെ എല്ലാ ഗ്രൂപ്പുകളും ഒരു <form>
ഘടകത്തിൽ വസിക്കണം. ബൂട്ട്സ്ട്രാപ്പ് എലമെന്റിന് ഡിഫോൾട്ട് സ്റ്റൈലിംഗ് നൽകുന്നില്ല <form>
, എന്നാൽ ഡിഫോൾട്ടായി നൽകുന്ന ചില ശക്തമായ ബ്രൗസർ സവിശേഷതകൾ ഉണ്ട്.
- ബ്രൗസർ ഫോമുകളിൽ പുതിയതാണോ? ഒരു അവലോകനത്തിനും ലഭ്യമായ ആട്രിബ്യൂട്ടുകളുടെ പൂർണ്ണമായ ലിസ്റ്റിനും MDN ഫോം ഡോക്സ് അവലോകനം ചെയ്യുന്നത് പരിഗണിക്കുക .
<button>
ഒരു<form>
ഡിഫോൾട്ടിനുള്ളിൽ stype="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-classes
Sass വേരിയബിൾ പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട് (സ്ഥിരസ്ഥിതിയായി).
<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
s ഉപയോഗിക്കുമെന്ന് ഉറപ്പാക്കുക ..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>