เอลิเมนต์ปุ่มเป็นหนึ่งในองค์ประกอบ HTML ที่มีประโยชน์มาก เพราะให้ผู้ใช้โต้ตอบกับหน้าเว็บได้
Login, subscribe, delete, เปิดสิ่งต่างๆ, แสดงเมนู, เปลี่ยนธีมสี เป็นการกระทำที่ทำด้วยปุ่ม
สไตล์ปุ่มเริ่มต้นของเบราว์เซอร์ไม่สวยและไม่ทันสมัย
การปรับแต่งสไตล์ในทุกโปรเจกต์ทำให้เขียนโค้ดซ้ำเพื่อผลลัพธ์เดิม Bootstrap ช่วยแก้ปัญหานี้ ดูสิ่งที่ทำได้กับ Bootstrap buttons
ปุ่มสี (Colored Buttons)
<button class="btn btn-primary">button 1</button> <button class="btn btn-secondary">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-warning">button 4</button> <button class="btn btn-danger">button 5</button> <button class="btn btn-success">button 6</button> <button class="btn btn-light">button 7</button> <button class="btn btn-dark">button 8</button> <button class="btn btn-link">button 9</button>
เรื่องสี ใช้สี predefined ของ Bootstrap ทั้งหมด รวมถึง BTN-LINK สำหรับสไตล์ลิงก์
ปุ่มสีทุกตัวมี padding สม่ำเสมอ และ transition สีเข้มขึ้นเล็กน้อยเมื่อ hover ลิงก์มี underline เมื่อ hover
หากประกาศแค่ class BTN Bootstrap จะลบสไตล์เบราว์เซอร์เริ่มต้นเท่านั้น:
<button>Without Bootstrap</button> <button class="btn">With Bootstrap</button>
ผลลัพธ์:
ปุ่ม Outline (Outline Buttons)
ใช้สีเดียวกันสร้างปุ่มแค่ outline:
<button class="btn btn-outline-primary">button 1</button> <button class="btn btn-outline-secondary">button 2</button> <button class="btn btn-outline-info">button 3</button> <button class="btn btn-outline-warning">button 4</button> <button class="btn btn-outline-danger">button 5</button> <button class="btn btn-outline-success">button 6</button> <button class="btn btn-outline-light">button 7</button> <button class="btn btn-outline-dark">button 8</button> <button class="btn btn-outline-link">button 9</button>
พื้นหลังสีเดียวกับ outline ข้อความเป็นสีขาว/ดำตามคอนทราสต์ Light และ Warning (เหลือง) ใช้ข้อความดำ Link version ไม่รองรับ outline
ขนาด (Sizing)
Bootstrap รองรับ 3 ขนาด: small, regular, large เพิ่ม class เลือกขนาด:
<div class="m-5"> <button class="btn btn-primary btn-sm">small button 1</button> <button class="btn btn-warning btn-sm">small button 2</button> <button class="btn btn-primary btn-sm">small button 3</button> </div> <div class="m-5"> <button class="btn btn-primary">regular button 1</button> <button class="btn btn-warning">regular button 2</button> <button class="btn btn-danger">regular button 3</button> </div> <div class="m-5"> <button class="btn btn-primary btn-lg">large button 1</button> <button class="btn btn-warning btn-lg">large button 2</button> <button class="btn btn-danger btn-lg">large button 3</button> </div>
สร้าง 3 ปุ่มแต่ละขนาด ห่อแต่ละขนาดใน div class M-5 เพื่อ margin แยก
Block Level Buttons
หากต้องการปุ่มกว้างเต็ม container เพิ่ม class BTN-BLOCK ตัวอย่างฟอร์มง่าย:
<div class="form-group"> <label for="username">username</label> <input type="text" class="form-control" /> <div class="form-group"></div> <label for="email">Email</label> <input type="email" class="form-control" /> </div> <button class="btn btn-lg btn-block btn-primary"> Block Level Button </button> <button class="btn btn-lg btn-secondary my-2">Regular button</button> </form>
ไม่รายละเอียด Bootstrap form classes สร้างฟอร์มรับ username, email พร้อม block level button และ regular button MT-2 คือ margin-top แยกปุ่ม
ความแตกต่าง:
สถานะปุ่ม (Button State)
เช่นเดียวกับคอมโพเนนต์ Bootstrap อื่น สามารถเปลี่ยนลักษณะปุ่มด้วย state class คือ ACTIVE หรือ DISABLED
Active State
ปุ่ม active มีพื้นหลัง ขอบ และเงาสีเข้มขึ้นเล็กน้อย
<button class="btn btn-primary">Regular</button> <button class="btn btn-primary active">Active</button> <button class="btn btn-primary">Regular</button>
Disabled State
ปุ่ม disabled ใช้สีอ่อนกว่าสำหรับคุณสมบัติเดียวกัน การเพิ่ม class DISABLED ให้แค่สีอ่อน เพื่อปิดจริง ต้องประกาศเป็น attribute ของปุ่ม:
<button class="btn btn-primary disabled">Disabled Looking</button> <button class="btn btn-primary" disabled>Truly Disabled</button>
ปุ่มที่มี class DISABLED ยังคลิกได้และทำงาน หากมี action สำหรับ assistive technologies ต้องใส่ ARIA-DISABLED="TRUE" เพื่อ screen reader รู้ว่ามีปุ่ม disabled
ปัจจุบัน <a> elements ไม่รองรับ DISABLED attribute ต้องใช้ class เพื่อลักษณะ disabled
<a class="btn btn-danger" disabled>Attribute Not Supported</a> <a href="#" class="btn btn-danger disabled">Disabled Look</a>
สำหรับ <a> tags class DISABLED เพิ่ม CSS rule POINTER-EVENTS: NONE ปิดการคลิกเมาส์ แต่ยังไม่รองรับเต็มที่ในทุกเบราว์เซอร์ และเข้าถึงได้ผ่านคีย์บอร์ด ควรเพิ่ม TABINDEX="-1" เพื่อไม่ให้ focus ได้ด้วยคีย์บอร์ด ไม่ควรใช้ <a> tags เป็นปุ่ม แต่คุ้มค่าที่รู้
Button Groups
เช่นเดียวกับ CARDS (ยังไม่เผยแพร่ ณ เวลาเขียน) ใน Bootstrap ใช้ GROUP class รวมปุ่มเป็นองค์ประกอบเดียวในมุมมอง
<div class="btn-group"> <button class="btn btn-primary">button 1</button> <button class="btn btn-warning">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-danger">button 4</button> </div>
ห่อใน div class BTN-GROUP เสร็จ! พฤติกรรมเหมือนเดิม แต่ติดกัน และมุมนอกโค้งมน
สรุป
ปุ่มพบได้เกือบทุกเว็บไซต์ เป็นส่วนสำคัญของประสบการณ์ออนไลน์ เรา login, สั่งซื้อออนไลน์, subscribe newsletter, บล็อกสแปม ด้วยปุ่ม โดยไม่มีปุ่ม เว็บไซต์จะเป็นแค่ business card ดิจิทัล ผ่าน Bootstrap เราสามารถทำให้ปุ่มเป็นคอมโพเนนต์ที่สวยงามของเว็บไซต์ได้
