Input group Bootstrap 5

ການສະໜອງບົດສະຫຼະການ

.input-group ປະເພດນີ້ເປັນການປະກອບກັນ ໂດຍການເພີ່ມສີນລະບາຍ ຈົນການປ່ຽນມວນຊົນ ຫຼື ກະບຸນສີນລະບາຍ ບ່ອນຫນັງຂອງບົດສະຫຼະການບັນທຶກເຂົ້າເຫຼືອງການບັນທຶກຄວາມຊ່ວຍເຫຼືອ。

ສຳລັບການການຈັດຍົກຍະວາຍຊັບພະຍານນັ້ນ ກະລຸນາໃຊ້ປະເພດ: .input-group-text ປະເພດ:

ຕົວຢ່າງ

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="ຊື່ຜູ້ນຳໃຊ້">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="ທ່ານໄດ້ອີງອິງອີເມວ">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

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

ຂະໜາດຂອງການເຂົ້າມືຂັ້ນຕົວ

ກະຈາຍ: .input-group-sm ປະເພດນຳໃຊ້ສຳລັບການເຂົ້າມືຂັ້ນຕົວຂະໜາດນ້ອຍຈະຕິດຕາມ: .input-group-lg ສຳລັບການເຂົ້າມືຂັ້ນຕົວຂະໜາດໃຫຍ່:

ຕົວຢ່າງ

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">ຂະໜາດນ້ອຍ</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">ຄຳສະເໜີ</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">ຂະໜາດໃຫຍ່</span>
  <input type="text" class="form-control">
</div>

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

ພາບຫຼັກ/ຂໍ້ມູນຊ່ວຍຫຼາຍອັນ

ການເພີ່ມພາບຫຼັກ/ຂໍ້ມູນຊ່ວຍຫຼາຍອັນ:

ຕົວຢ່າງ

<!-- ພາບຫຼັກ/ຂໍ້ມູນຊ່ວຍ -->
<div class="input-group mb-3">
  <span class="input-group-text">ຊື່ນັກຮຽນ</span>
  <input type="text" class="form-control" placeholder="ນາມ">
  <input type="text" class="form-control" placeholder="ຊື່">
</div>
<!-- ພາບຫຼັກ/ຂໍ້ມູນຊ່ວຍ -->
<div class="input-group mb-3">
  <span class="input-group-text">ໜຶ່ງ</span>
  <span class="input-group-text">ສອງ</span>
  <span class="input-group-text">ສາມ</span>
  <input type="text" class="form-control">
</div>

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

ການເຂົ້າມືຂັ້ນຕົວທີ່ມີການເປັນການເລືອກຕົວຫຼືການເປັນການເລືອກຕົວ

ທ່ານສາມາດໃຊ້ການເປັນການເລືອກຕົວຫຼືການເປັນການເລືອກຕົວທີ່ຈະນັດທີ່ຕ້ອງການທີ່ມີຄວາມຈະແຈ້ງ:

ຕົວຢ່າງ

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="ຂໍ້ຄວາມຫຼັກ">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="ຂໍ້ຄວາມຫຼັກ">
</div>

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

ການເຂົ້າມືຂັ້ນຕົວ

ຕົວຢ່າງ

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">ວຽກປະຕິບັດພາບລະບາຍ</button>
  <input type="text" class="form-control" placeholder="ຂໍ້ຄວາມຫຼັກ">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ຄົ້ນຫາ">
  <button class="btn btn-success" type="submit">ດຳເນີນ</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ຂໍ້ຄວາມຫຼັກ">
  <button class="btn btn-primary" type="button">ຢືນ</button>
  <button class="btn btn-danger" type="button">ຍົກເລີກ</button>
</div>

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

ກຸ່ມການເຂົ້າກັບຄະຕິນລົງ

ການເພີ່ມຄະຕິນລົງໃນກຸ່ມການເຂົ້າ. ສະເພາະບໍ່ຕ້ອງມີການລວມໂຕ .dropdown ກັບການກະຕຸ້ມກັບຮູບແບບຂອງຮູບແບບນີ້.

ຕົວຢ່າງ

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ຄະຕິນລົງ
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ທາງ 1</a></li>
    <li><a class="dropdown-item" href="#">ທາງ 2</a></li>
    <li><a class="dropdown-item" href="#">ທາງ 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="ຊື່ຜູ້ນຳໃຊ້">
</div>

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