ปุ่ม

ใช้สไตล์ปุ่มแบบกำหนดเองของ Bootstrap สำหรับการดำเนินการในแบบฟอร์ม กล่องโต้ตอบ และอื่นๆ โดยรองรับขนาด สถานะ และอื่นๆ อีกมากมาย

ตัวอย่าง

Bootstrap มีสไตล์ปุ่มที่กำหนดไว้ล่วงหน้าหลายแบบ โดยแต่ละแบบมีจุดประสงค์ตามความหมายของตัวเอง โดยมีคุณสมบัติพิเศษบางอย่างที่เพิ่มเข้ามาเพื่อการควบคุมที่มากขึ้น

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ปิดใช้งานการตัดข้อความ

ถ้าคุณไม่ต้องการให้ข้อความปุ่มตัด คุณสามารถเพิ่ม.text-nowrapชั้นเรียนลงในปุ่มได้ ใน Sass คุณสามารถตั้งค่า$btn-white-space: nowrapให้ปิดใช้งานการตัดข้อความสำหรับแต่ละปุ่มได้

แท็กปุ่ม

คลาส.btnได้รับการออกแบบเพื่อใช้กับ<button>องค์ประกอบ อย่างไรก็ตาม คุณสามารถใช้คลาส<a>หรือ<input>องค์ประกอบเหล่านี้ได้ (แม้ว่าเบราว์เซอร์บางตัวอาจใช้การเรนเดอร์ที่แตกต่างกันเล็กน้อย)

เมื่อใช้คลาสปุ่มบน<a>องค์ประกอบที่ใช้เพื่อทริกเกอร์ฟังก์ชันในหน้าเว็บ (เช่น การยุบเนื้อหา) แทนที่จะลิงก์ไปยังหน้าหรือส่วนใหม่ภายในหน้าปัจจุบัน ลิงก์เหล่านี้ควรให้ a role="button"เพื่อถ่ายทอดวัตถุประสงค์ของเทคโนโลยีช่วยเหลืออย่างเหมาะสม เช่น โปรแกรมอ่านหน้าจอ

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ปุ่มเค้าร่าง

ต้องการปุ่ม แต่ไม่ใช่สีพื้นหลังที่หนักหน่วงที่พวกเขานำมา? แทนที่คลาสตัวปรับแต่งดีฟอลต์ด้วยคลาส.btn-outline-*เพื่อลบภาพพื้นหลังและสีทั้งหมดบนปุ่มใดๆ

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ขนาด

แฟนซีปุ่มขนาดใหญ่หรือเล็ก? เพิ่ม.btn-lgหรือ.btn-smสำหรับขนาดเพิ่มเติม

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

สร้างปุ่มระดับบล็อก—ปุ่มที่ขยายเต็มความกว้างของพาเรนต์—โดยการเพิ่ม.btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

สถานะใช้งาน

ปุ่มต่างๆ จะปรากฏขึ้นเมื่อกดใช้งานโดยมีพื้นหลังที่เข้มกว่า เส้นขอบที่เข้มกว่า และเมื่อเปิดใช้งานเงา เงาที่แทรกอยู่ ไม่จำเป็นต้องเพิ่มคลาสใน<button>s เนื่องจากใช้ pseudo- class อย่างไรก็ตาม คุณยังคงสามารถบังคับลักษณะที่ปรากฏที่แอ็คทีฟเดียวกันกับ.active(และรวมaria-pressed=“true”แอตทริบิวต์) ได้ หากคุณต้องการจำลองสถานะโดยทางโปรแกรม

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

สถานะคนพิการ

ทำให้ปุ่มดูไม่ทำงานโดยเพิ่มdisabledแอตทริบิวต์บูลีนให้กับ<button>องค์ประกอบ ใดๆ

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

ปุ่มที่ปิดใช้งานโดยใช้<a>องค์ประกอบมีลักษณะแตกต่างกันเล็กน้อย:

• <a>ไม่สนับสนุนdisabledแอตทริบิวต์ ดังนั้นคุณต้องเพิ่ม.disabledคลาสเพื่อให้ดูเหมือนปิดการใช้งาน
• รวมสไตล์ที่เป็นมิตรกับอนาคตไว้เพื่อปิดการใช้งานทั้งหมดpointer-eventsบนปุ่มสมอ ในเบราว์เซอร์ที่รองรับคุณสมบัตินั้น คุณจะไม่เห็นเคอร์เซอร์ที่ปิดใช้งานเลย
• ปุ่มที่ปิดการใช้<a>งานควรมีaria-disabled="true"แอตทริบิวต์เพื่อระบุสถานะขององค์ประกอบต่อเทคโนโลยีอำนวยความสะดวก
• ปุ่มที่ปิดการใช้ งาน <a> ไม่ควรมีhrefแอตทริบิวต์

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

คำเตือนฟังก์ชั่นการเชื่อมโยง

เพื่อให้ครอบคลุมกรณีที่คุณต้องเก็บhrefแอตทริบิวต์ไว้ในลิงก์ที่ถูกปิดใช้งาน.disabledชั้นเรียนใช้pointer-events: noneเพื่อพยายามปิดใช้งานฟังก์ชันลิงก์ของ<a>s โปรดทราบว่าคุณสมบัติ CSS นี้ยังไม่ได้กำหนดมาตรฐานสำหรับ HTML แต่เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับคุณสมบัตินี้ นอกจากนี้ แม้ในเบราว์เซอร์ที่รองรับpointer-events: noneการนำทางด้วยแป้นพิมพ์ยังคงไม่ได้รับผลกระทบ หมายความว่าผู้ใช้แป้นพิมพ์ที่มองเห็นได้และผู้ใช้เทคโนโลยีอำนวยความสะดวกจะยังคงสามารถเปิดใช้งานลิงก์เหล่านี้ได้ เพื่อความปลอดภัย นอกเหนือจาก ให้aria-disabled="true"รวมtabindex="-1"แอตทริบิวต์ในลิงก์เหล่านี้เพื่อป้องกันไม่ให้รับโฟกัสของแป้นพิมพ์ และใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานฟังก์ชันการทำงานทั้งหมด

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ปลั๊กอินปุ่ม

ทำสิ่งต่างๆ ได้มากขึ้นด้วยปุ่มต่างๆ สถานะปุ่มควบคุมหรือสร้างกลุ่มปุ่มสำหรับส่วนประกอบเพิ่มเติม เช่น แถบเครื่องมือ

สลับสถานะ

เพิ่ม เพื่อสลับ สถานะdata-toggle="button"ของปุ่ม activeหากคุณกำลังสลับปุ่มล่วงหน้า คุณต้องเพิ่ม.activeชั้นเรียนและ aria-pressed="true"ในไฟล์<button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

ช่องทำเครื่องหมายและปุ่มตัวเลือก

สไตล์ ของ Bootstrap .buttonสามารถใช้กับองค์ประกอบอื่น ๆ เช่น<label>s เพื่อระบุช่องทำเครื่องหมายหรือปุ่มรูปแบบตัวเลือก เพิ่มdata-toggle="buttons"ไปยัง.btn-groupปุ่มที่แก้ไขเหล่านั้นเพื่อเปิดใช้งานลักษณะการสลับผ่าน JavaScript และเพิ่ม.btn-group-toggleเพื่อจัดรูปแบบ<input>s ภายในปุ่มของคุณ โปรดทราบว่าคุณสามารถสร้างปุ่มหรือกลุ่มที่ขับเคลื่อนด้วยอินพุตได้เพียงปุ่มเดียว

สถานะที่ตรวจสอบสำหรับปุ่มเหล่านี้จะได้รับการอัปเดตผ่านclickเหตุการณ์บนปุ่มเท่านั้น หากคุณใช้วิธีอื่นในการอัปเดตอินพุต เช่น ด้วย<input type="reset">หรือโดยการใช้checkedคุณสมบัติของอินพุต คุณจะต้องเปิดสวิตช์.activeด้วย<label>ตนเอง

โปรดทราบว่าปุ่มที่ตรวจสอบล่วงหน้าต้องการให้คุณเพิ่ม.activeคลาสลงในอินพุตของ<label>ไฟล์ด้วยตนเอง

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

วิธีการ