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>

ทดลองด้วยตัวเอง