ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

ແຜນຜັງ

ໃຫ້ແບບຟອມຂອງທ່ານບາງໂຄງສ້າງ - ຈາກແຖວໄປຫາແນວນອນໄປຫາການປະຕິບັດຕາຂ່າຍໄຟຟ້າແບບກໍານົດເອງ - ດ້ວຍຕົວເລືອກການຈັດຮູບແບບຂອງພວກເຮົາ.

ໃນໜ້ານີ້

ແບບຟອມ

ທຸກໆກຸ່ມຂອງຊ່ອງຂໍ້ມູນຄວນຢູ່ໃນ <form>ອົງປະກອບ. Bootstrap ບໍ່ໄດ້ສະຫນອງຮູບແບບເລີ່ມຕົ້ນສໍາລັບ <form>ອົງປະກອບ, ແຕ່ມີລັກສະນະຂອງຕົວທ່ອງເວັບທີ່ມີປະສິດທິພາບບາງຢ່າງທີ່ສະຫນອງໃຫ້ໂດຍຄ່າເລີ່ມຕົ້ນ.

  • ໃໝ່ກັບແບບຟອມຂອງຕົວທ່ອງເວັບບໍ? ພິຈາລະນາທົບທວນ ເອກະສານແບບຟອມ MDN ສໍາລັບສະພາບລວມແລະບັນຊີລາຍຊື່ຄົບຖ້ວນຂອງຄຸນລັກສະນະທີ່ມີຢູ່.
  • <button>s ພາຍໃນ <form>ຄ່າເລີ່ມຕົ້ນທີ່ຈະ type="submit", ສະນັ້ນພະຍາຍາມໃຫ້ສະເພາະແລະສະເຫມີປະກອບມີ a 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>

ຕາຕະລາງແບບຟອມ

ຮູບແບບທີ່ຊັບຊ້ອນສາມາດສ້າງໄດ້ໂດຍໃຊ້ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ໃຊ້ສິ່ງເຫຼົ່ານີ້ສຳລັບການຈັດຮູບແບບທີ່ຕ້ອງການຫຼາຍຖັນ, ຄວາມກວ້າງທີ່ຫຼາກຫຼາຍ ແລະຕົວເລືອກການຈັດຮຽງເພີ່ມເຕີມ. ຕ້ອງການ $enable-grid-classesຕົວແປ Sass ເພື່ອເປີດໃຊ້ງານ (ຕາມຄ່າເລີ່ມຕົ້ນ).

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>

Gutters

ໂດຍການເພີ່ມ ຫ້ອງຮຽນຕົວແກ້ໄຂ gutter , ທ່ານສາມາດຄວບຄຸມຄວາມກວ້າງຂອງ gutter ໄດ້ເຊັ່ນດຽວກັນກັບ inline ເປັນທິດທາງຕັນ. ຍັງຕ້ອງການ $enable-grid-classesຕົວແປ Sass ເພື່ອເປີດໃຊ້ງານ (ຕາມຄ່າເລີ່ມຕົ້ນ).

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>s ຂອງເຈົ້າເຊັ່ນກັນເພື່ອໃຫ້ພວກມັນຖືກຈັດໃສ່ໃນແນວຕັ້ງດ້ວຍການຄວບຄຸມແບບຟອມທີ່ກ່ຽວຂ້ອງ.

ບາງຄັ້ງ, ທ່ານອາດຈະຕ້ອງການໃຊ້ຂອບຫຼື padding utilities ເພື່ອສ້າງຄວາມສອດຄ່ອງທີ່ສົມບູນແບບທີ່ທ່ານຕ້ອງການ. ຕົວຢ່າງ, ພວກເຮົາໄດ້ເອົາ 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 ຫຼື 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 ໃດໆພາຍໃນ .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 utility ເພື່ອຈັດວາງເນື້ອໃນຢູ່ໃນແນວຕັ້ງແລະການປ່ຽນແປງ .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ຈະຊ່ວຍໃຫ້ stack ການຄວບຄຸມແບບຟອມແລະອື່ນໆ. ການ ຈັດຮຽງ .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>