ปุ่ม Bootstrap JS

ปุ่ม JS (button.js)

ใช้ปลั๊กอินนี้หากคุณต้องการควบคุมปุ่มของคุณได้มากขึ้น

สำหรับบทแนะนำเกี่ยวกับปุ่ม โปรดอ่านบทแนะนำเกี่ยวกับปุ่มบูตสแตรปของ เรา

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

Class	Description	Example
.btn	Adds basic styling to any button
.btn-default	Indicates a default/standard button
.btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
.btn-success	Indicates a successful or positive action
.btn-info	Contextual button for informational alert messages
.btn-warning	Indicates caution should be taken with this action
.btn-danger	Indicates a dangerous or potentially negative action
.btn-link	Makes a button look like a link (will still have button behavior)
.btn-lg	Makes a large button
.btn-sm	Makes a small button
.btn-xs	Makes an extra small button
.btn-block	Makes a block-level button (spans the full width of the parent element)
.active	Makes the button appear pressed
.disabled	Makes the button disabled

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

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

None

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

หมายเหตุ:สำหรับปลั๊กอินนี้ สามารถส่งเมธอดผ่านแอตทริบิวต์ข้อมูลได้เช่นกัน ผนวกชื่อเมธอดต่อ data- เช่นเดียวกับ data-toggle หรือ data-loading

Method	Description	Try it
.button("toggle")	Makes the button look pressed
.button("loading")	Disables the button and changes the button text to "loading..."
.button("reset")	Changes the button text to original text (if changed)
.button("string")	Specifies a new button text

วิธีลบขอบโค้งมน:

.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;
}