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

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 JS ปุ่ม


JS ปุ่ม (button.js)

ใช้ปลั๊กอินนี้ถ้าคุณต้องการที่จะมีการควบคุมที่มากกว่าปุ่มของคุณ

สำหรับการสอนเกี่ยวกับปุ่มอ่านของเรา Bootstrap สอนปุ่ม


เรียนปลั๊กอินปุ่ม

เรียนด้านล่างสามารถใช้ในรูปแบบใด <a>, <button> หรือ <input> องค์ประกอบ:

ชั้น ลักษณะ ตัวอย่าง
.btn เพิ่มขั้นพื้นฐานเพื่อจัดแต่งทรงผมปุ่มใด ๆ ลองมัน
.btn-default ระบุว่ามีการเริ่มต้น / ปุ่มมาตรฐาน ลองมัน
.btn-primary ให้น้ำหนักภาพพิเศษและระบุการดำเนินการหลักในชุดของปุ่ม ลองมัน
.btn-success บ่งชี้ว่ามีการดำเนินการที่ประสบความสำเร็จหรือบวก ลองมัน
.btn-info ปุ่มบริบทสำหรับข้อความแจ้งเตือนให้ข้อมูล ลองมัน
.btn-warning แสดงความระมัดระวังควรจะต้องดำเนินการกับการกระทำนี้ ลองมัน
.btn-danger บ่งชี้ว่ามีการกระทำที่เป็นอันตรายหรือเชิงลบ ลองมัน
.btn-link ทำให้ปุ่มมีลักษณะเหมือนการเชื่อมโยง (จะยังคงมีพฤติกรรมปุ่ม) ลองมัน
.btn-lg ทำให้ปุ่มขนาดใหญ่ ลองมัน
.btn-sm ทำให้ปุ่มเล็ก ๆ ลองมัน
.btn-xs ทำให้ปุ่มขนาดเล็กพิเศษ ลองมัน
.btn-block ทำให้ปุ่มระดับบล็อก (ครอบคลุมเต็มความกว้างขององค์ประกอบหลัก) ลองมัน
.active ทำให้ปุ่มกดปรากฏ ลองมัน
.disabled ทำให้ปุ่มปิดการใช้งาน ลองมัน

ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

$('.btn').button();

ตัวเลือกปุ่ม

None

วิธีปุ่ม

ตารางต่อไปนี้แสดงวิธีการกดปุ่มที่มีอยู่ทั้งหมด

หมายเหตุ: สำหรับปลั๊กอินนี้วิธีนี้ยังสามารถส่งผ่านทางคุณลักษณะข้อมูล ผนวกชื่อวิธีการที่จะ DATA- ในขณะที่ข้อมูลสลับหรือข้อมูลในการโหลด

วิธี ลักษณะ ลองมัน
.button("toggle") ทำให้ดูปุ่มกด ลองมัน
.button("loading") ปิดการใช้งานปุ่มและการเปลี่ยนแปลงข้อความปุ่มเพื่อ "โหลด ... " ลองมัน
.button("reset") เปลี่ยนข้อความปุ่มเพื่อข้อความเดิม (ถ้ามีการเปลี่ยนแปลง) ลองมัน
.button("string") ระบุข้อความบนปุ่มใหม่ ลองมัน

ตัวอย่าง

ตัวอย่าง

โดยใช้ CSS เพื่อปรับแต่งปุ่ม

วิธีการลบเส้นขอบโค้งมนไปนี้:

ตัวอย่าง

.btn-default {
    border-radius: 0;
}
ลองตัวเอง»

วิธีการเพิ่มสีที่เฉพาะเจาะจง:

ตัวอย่าง

.btn-default {
    background: #000;
    color: #fff;
}

.btn-default:hover {
    background: #fff;
    color: #000;
}
ลองตัวเอง»

วิธีการเพิ่มเงา:

ตัวอย่าง

.btn-default {
    box-shadow: 1px 2px 5px #000000;
}
ลองตัวเอง»