ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
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>

ගටර්ස්

කාණු විකරණකාරක පන්ති එකතු කිරීමෙන් , ඔබට ගටර පළල සහ අවහිර දිශාව ලෙස පේළිය පාලනය කළ හැකිය. Sass විචල්‍යය සක්‍රීය කිරීම ද අවශ්‍ය වේ$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ඔබේ 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>

තිරස් ආකාර ලේබල ප්‍රමාණය

සහ ප්‍රමාණය නිවැරදිව අනුගමනය කිරීමට ඔබගේ .col-form-label-smහෝ s වෙත භාවිතා කිරීමට වග බලා ගන්න ..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>

තීරු ප්රමාණය

පෙර උදාහරණවල පෙන්වා ඇති පරිදි, අපගේ ජාල පද්ධතිය මඟින් ඔබට ඕනෑම .cols ගණනක් a තුළ තැබීමට ඉඩ සලසයි .row. ඔවුන් පවතින පළල ඔවුන් අතර සමානව බෙදනු ඇත. ඔබට වැඩි හෝ අඩු ඉඩක් ලබා ගැනීම සඳහා ඔබේ තීරුවල උප කුලකයක් ද තෝරා ගත හැකි අතර, ඉතිරි ඒවා .colසමානව, වැනි විශේෂිත තීරු පන්ති සමඟින් බෙදනු ඇත .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පෝරම පාලන සහ තවත් බොහෝ දේ ගොඩගැසීමට උපකාරී වේ. .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>