รูปแบบปุ่ม
Bootstrap ให้เจ็ดรูปแบบของปุ่ม:
เพื่อให้บรรลุรูปแบบปุ่มข้างต้น Bootstrap มีการเรียนต่อไปนี้:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
ตัวอย่างต่อไปนี้แสดงให้เห็นรหัสสำหรับรูปแบบปุ่มที่แตกต่างกัน
ตัวอย่าง
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> ลองตัวเอง» เรียนปุ่มสามารถนำมาใช้ใน <a> , <button> หรือ <input> องค์ประกอบ:
ตัวอย่าง
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> ลองตัวเอง» ทำไมเราใส่ # ใน href แอตทริบิวต์ของการเชื่อมโยงหรือไม่
เนื่องจากเราไม่ได้มีหน้าใด ๆ ที่จะเชื่อมโยงไปยังและเราไม่ต้องการที่จะได้รับ "404" ข้อความที่เราใส่ # เป็นลิงค์ ในชีวิตจริงมันควรจะแน่นอนรับ URL ที่แท้จริงในการ "ค้นหา" หน้า
ขนาดปุ่ม
เงินทุนให้สี่ปุ่มขนาด:
ชั้นเรียนที่กำหนดขนาดที่แตกต่างกัน:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
ตัวอย่างต่อไปนี้แสดงให้เห็นรหัสสำหรับขนาดปุ่มที่แตกต่างกัน
ตัวอย่าง
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
ลองตัวเอง» ปุ่มระดับบล็อก
ปุ่มระดับบล็อกครอบคลุมกว้างทั้งหมดขององค์ประกอบหลัก
เพิ่มระดับ .btn-block เพื่อสร้างปุ่มระดับบล็อก:
ใช้งาน / ปุ่มสำหรับผู้พิการ
ปุ่มสามารถตั้งค่าการใช้งาน (ปรากฏกด) หรือคนพิการ (ไม่สามารถคลิก) รัฐ:
ชั้น .active ทำให้ปุ่มกดปรากฏและชั้น .disabled ทำให้ไม่สามารถคลิกปุ่ม:
ตัวอย่าง
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
สมบูรณ์อ้างอิงปุ่ม Bootstrap
สำหรับการอ้างอิงที่สมบูรณ์ของทุกชั้นเรียนปุ่มไปของเราสมบูรณ์ Bootstrap ปุ่มอ้างอิง