ກາງ Bootstrap 5

ຟອມຂໍ້ມູນທີ່ປົກປັກຮູບ

ທຸກ <input> ແລະ <textarea> ທີ່ມີປະເພດ .form-control ທັງໝົດຈະມີຮູບແບບຟອມຂໍ້ມູນທີ່ຖືກຈັດກຽວຢ່າງຖືກຕ້ອງ:

ຕົວຢ່າງ

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">ອີເມວ：</label>
    <input type="email" class="form-control" id="email" placeholder="ກະລຸນາບັນທຶກອີເມວ" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">ລະບຸລະບັນຍາບັນ：</label>
    <input type="password" class="form-control" id="pwd" placeholder="ກະລຸນາເຂົ້າມາລະບຸລະບັນຍາບັນ" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> ບັນທູກຂໍ້ມູນ
    </label>
  </div>
  <button type="submit" class="btn btn-primary">ການສະນວຍງານ</button>
</form>

ທົດລອງດ້ວຍຕົວເອງ

ບໍ່ວ່ານັ້ນທ່ານຈະເຫັນ .form-label ຊະນິດຄວາມລະອຽດສະໜາມຄວາມເຊື່ອຖືເພື່ອຮັບຮອງການຂຽນຕົວຢ່າງຖືກຕັ້ງຕັດ

ປະກອບຕົວຄຳເຫັນຂອງກົດລະບຽບ .form-check ຊະນິດຄວາມລະອຽດສະໜາມຄວາມເຊື່ອຖືເພື່ອປະກອບຕົວສິ່ງລວມ .form-check-label ຊະນິດຄວາມລະອຽດສະໜາມຄວາມເຊື່ອຖືເພື່ອປະກອບຕົວຂອງກົດລະບຽບ .form-check-input。

Textarea

ຕົວຢ່າງ

<label for="comment">ຄຳເຫັນ：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

ທົດລອງດ້ວຍຕົວເອງ

ສະບັບຟອມ / ການຈັດສາບັນຍາບັນທີ່ສະແດງອອກຫຼັງ

ຖ້າທ່ານຕ້ອງການໃຫ້ປະກອບອອກຕາມການຈັດສາບັນຍາບັນທີ່ໃສ່ຕາມການສະແດງອອກຫຼັງຈາກການປະກອບຕົວ .row ແລະ .col：

ຕົວຢ່າງ

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="ກະລຸນາເຂົ້າມາອີເມວທີ່" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="ກະລຸນາເຂົ້າມາລະບຸລະບັນຍາບັນ" name="pswd">
    </div>
  </div>
</form>

ທົດລອງດ້ວຍຕົວເອງ

ທ່ານຈະໄດ້ Bootstrap Grid ມີຫຍັງຂອງການຮຽນກ່ຽວກັບການກະຈາຍສາຍ ແລະ ວົງກະຈາຍຫລາຍຫຍັງທີ່ບັນທຶກໃນຫນັງ.

ຂະໜາດຂອງຂັ້ນການຮັບຮອງ

ທ່ານສາມາດ .form-control-lg ຫລື .form-control-sm ປ່ຽນ .form-control ຂະໜາດຂອງຂັ້ນນໍ້າມັນ:

ຕົວຢ່າງ

<input type="text" class="form-control form-control-lg" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນໃຫຍ່">
<input type="text" class="form-control" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນປະຈຳ">
<input type="text" class="form-control form-control-sm" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນນ້ອຍ">

ທົດລອງດ້ວຍຕົວເອງ

ຫຍຸດ ແລະ ຕາຍຍິນດີ

ຂ້ອຍຮ້ອງຂໍໃຫ້ນຳໃຊ້ disabled ແລະ/ຫລື readonly ສຳລັບການຫຍຸດຂັ້ນນໍ້າມັນ:

ຕົວຢ່າງ

<input type="text" class="form-control" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນປະຈຳ">
<input type="text" class="form-control" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນຫຍຸດ" disabled>
<input type="text" class="form-control" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນຕາຍຍິນດີ" readonly>

ທົດລອງດ້ວຍຕົວເອງ

ຂັ້ນນໍ້າມັນຂັ້ນປະຈຳ

ຂ້ອຍຮ້ອງຂໍໃຫ້ນຳໃຊ້ .form-control-plaintext ປະເພດໃຊ້ເພື່ອການຕັ້ງຕາປະໂຫຍດຂອງຂັ້ນນໍ້າມັນຂັ້ນບໍ່ມີບໍ່ມີບາດການ, ແຕ່ຂັ້ນການການກວດສອບການຂອງຂັ້ນມາດຕະຫລາຍ:

ຕົວຢ່າງ

<input type="text" class="form-control-plaintext" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນປະຈຳ">
<input type="text" class="form-control" placeholder="ຂັ້ນນໍ້າມັນຂັ້ນປະຈຳ">

ທົດລອງດ້ວຍຕົວເອງ

ການເລືອກສີ

ສຳລັບການການຕັ້ງຕາປະໂຫຍດ type="color" ຂອງຂັ້ນນໍ້າມັນຂັ້ນ, ຂ້ອຍຮ້ອງຂໍໃຫ້ນຳໃຊ້ .form-control-color ປະເພດ:

ຕົວຢ່າງ

<input type="color" class="form-control form-control-color" value="#CCCCCC">

ທົດລອງດ້ວຍຕົວເອງ