ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Buttons


รูปแบบปุ่ม

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 เพื่อสร้างปุ่มระดับบล็อก:

ตัวอย่าง

<button type="button" class="btn btn-primary btn-block">Button 1</button>
ลองตัวเอง»

ใช้งาน / ปุ่มสำหรับผู้พิการ

ปุ่มสามารถตั้งค่าการใช้งาน (ปรากฏกด) หรือคนพิการ (ไม่สามารถคลิก) รัฐ:

ชั้น .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 ปุ่มอ้างอิง