มูลนิธิปุ่ม

รูปแบบปุ่ม

มูลนิธิมีหกรูปแบบปุ่ม .button ชั้นสร้างปุ่มสีฟ้าด้วยกันกับ padding สีที่แตกต่างกันสำหรับการเรียนปุ่ม: .secondary , .success , .info , .warning หรือ .alert :

ตัวอย่าง

<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้น </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = ปุ่ม "รอง"> มัธยมศึกษา </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ความสำเร็จที่ปุ่ม"> ความสำเร็จ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ข้อมูล" ปุ่ม> ข้อมูล </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "เตือน"> คำเตือน </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "แจ้งเตือน"> การแจ้งเตือน </ ปุ่ม>

ลอง»

ระดับปุ่มสามารถใช้ใน <a> , <button> หรือ <input> องค์ประกอบ:

ตัวอย่าง

<A href = "#" class = "button บทบาท info" = "button"> ปุ่มลิงก์ </ a>
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่มข้อมูล"> ปุ่ม </ ปุ่ม>
<ประเภทขาเข้า = "ปุ่ม" ชั้น = "ข้อมูลปุ่ม" value = "ป้อนปุ่ม">
<ประเภทขาเข้า = "ส่ง" ชั้น = "ข้อมูลปุ่ม" value = "ส่งปุ่ม">

ลอง»

	ทำไมจะ a href แท็ก #? เมื่อเราไม่ได้ต้องการที่จะกระโดดและคลิกที่ลิงค์ที่จะได้รับ "404" หน้าเราสามารถตั้งค่า a href แท็ก #

ปุ่มขนาด

เราสามารถใช้ .large , .small หรือ .tiny ระดับการกำหนดขนาดของปุ่ม:

ตัวอย่าง

<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มใหญ่"> ใหญ่ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้น </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> ขนาดเล็ก </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> เล็ก </ ปุ่ม>

ลอง»

ปุ่มโค้งมน

คุณสามารถใช้ .radius และ .round ระดับการตั้งค่าปุ่มกลม:

ตัวอย่าง

<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้นปุ่ม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "รัศมี"> รัศมีปุ่ม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "รอบปุ่ม"> ปุ่มกลม </ ปุ่ม>

ลอง»