ແຜນຜັງ
ໃຫ້ແບບຟອມຂອງທ່ານບາງໂຄງສ້າງ - ຈາກແຖວໄປຫາແນວນອນໄປຫາການປະຕິບັດຕາຂ່າຍໄຟຟ້າແບບກໍານົດເອງ - ດ້ວຍຕົວເລືອກການຈັດຮູບແບບຂອງພວກເຮົາ.
ແບບຟອມ
ທຸກໆກຸ່ມຂອງຊ່ອງຂໍ້ມູນຄວນຢູ່ໃນ <form>
ອົງປະກອບ. Bootstrap ບໍ່ໄດ້ສະຫນອງຮູບແບບເລີ່ມຕົ້ນສໍາລັບ <form>
ອົງປະກອບ, ແຕ່ມີລັກສະນະຂອງຕົວທ່ອງເວັບທີ່ມີປະສິດທິພາບບາງຢ່າງທີ່ສະຫນອງໃຫ້ໂດຍຄ່າເລີ່ມຕົ້ນ.
- ໃໝ່ກັບແບບຟອມຂອງຕົວທ່ອງເວັບບໍ? ພິຈາລະນາທົບທວນ ເອກະສານແບບຟອມ MDN ສໍາລັບສະພາບລວມແລະບັນຊີລາຍຊື່ຄົບຖ້ວນຂອງຄຸນລັກສະນະທີ່ມີຢູ່.
<button>
s ພາຍໃນ<form>
ຄ່າເລີ່ມຕົ້ນທີ່ຈະtype="submit"
, ສະນັ້ນພະຍາຍາມໃຫ້ສະເພາະແລະສະເຫມີປະກອບມີ atype
.- ທ່ານສາມາດປິດການທໍາງານທຸກອົງປະກອບຂອງຮູບແບບຢູ່ໃນຮູບແບບທີ່ມີ
disabled
ຄຸນລັກສະນະໃນ<form>
.
ເນື່ອງຈາກ Bootstrap ນຳໃຊ້ 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>
ຕາຕະລາງແບບຟອມ
ຮູບແບບທີ່ຊັບຊ້ອນສາມາດສ້າງໄດ້ໂດຍໃຊ້ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ໃຊ້ສິ່ງເຫຼົ່ານີ້ສຳລັບການຈັດຮູບແບບທີ່ຕ້ອງການຫຼາຍຖັນ, ຄວາມກວ້າງທີ່ຫຼາກຫຼາຍ ແລະຕົວເລືອກການຈັດຮຽງເພີ່ມເຕີມ. ຕ້ອງການ $enable-grid-classes
ຕົວແປ Sass ເພື່ອເປີດໃຊ້ງານ (ຕາມຄ່າເລີ່ມຕົ້ນ).
<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 ເພື່ອເປີດໃຊ້ງານ (ຕາມຄ່າເລີ່ມຕົ້ນ).
<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>
s ຂອງເຈົ້າເຊັ່ນກັນເພື່ອໃຫ້ພວກມັນຖືກຈັດໃສ່ໃນແນວຕັ້ງດ້ວຍການຄວບຄຸມແບບຟອມທີ່ກ່ຽວຂ້ອງ.
ບາງຄັ້ງ, ທ່ານອາດຈະຕ້ອງການໃຊ້ຂອບຫຼື padding utilities ເພື່ອສ້າງຄວາມສອດຄ່ອງທີ່ສົມບູນແບບທີ່ທ່ານຕ້ອງການ. ຕົວຢ່າງ, ພວກເຮົາໄດ້ເອົາ 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>
ຂະໜາດປ້າຍກຳກັບແບບແນວນອນ
ໃຫ້ແນ່ໃຈວ່າການນໍາໃຊ້ .col-form-label-sm
ຫຼື s ຫຼື 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
s ທີ່ຍັງເຫຼືອແບ່ງສ່ວນທີ່ເຫລືອເທົ່າທຽມກັນ, ດ້ວຍຊັ້ນຄໍລໍາສະເພາະເຊັ່ນ .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>
ຂະໜາດອັດຕະໂນມັດ
ຕົວຢ່າງຂ້າງລຸ່ມນີ້ໃຊ້ flexbox utility ເພື່ອຈັດວາງເນື້ອໃນຢູ່ໃນແນວຕັ້ງແລະການປ່ຽນແປງ .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-*
ຫ້ອງຮຽນເພື່ອສ້າງການຈັດວາງແນວນອນທີ່ຕອບສະໜອງ. ໂດຍການເພີ່ມ ຊັ້ນຮຽນເຄື່ອງດັດປັບ ທໍ່ນ້ຳ, ພວກເຮົາຈະມີທໍ່ລະບາຍນ້ຳໃນທິດທາງແນວນອນ ແລະແນວຕັ້ງ. ໃນ viewports ມືຖືແຄບ, .col-12
ຈະຊ່ວຍໃຫ້ stack ການຄວບຄຸມແບບຟອມແລະອື່ນໆ. ການ ຈັດຮຽງ .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>