-
Foundation หลักสูตร
- Foundation หลักสูตร
- Foundation เริ่มต้น
- Foundation ข้อความ
- Foundation ตาราง
- Foundation ปุ่มกด
- Foundation กลุ่มปุ่ม
- Foundation ไอคอน
- Foundation ฉลาก
- Foundation กล่องแจ้งเตือน
- Foundation แถบความคืบหน้า
- Foundation แผงหน้าปัด
- Foundation ภาพ
- Foundation เมนูแบบเลื่อนลง
- Foundation รายการพับ
- Foundation รายการ
- Foundation แถบ
- Foundation เพจจิ้ง
- Foundation ดัชนีราคาสินค้า
- Foundation แถบนำทางด้านบน
- Foundation แถบด้านข้าง
- Foundation นำทางสไลด์(Off-Canvas)
- Foundation Magellan
- Foundation ฟอร์ม
- Foundation ขนาดของกรอบการป้อนข้อมูล
- Foundation สวิตซ์
- Foundation Slider
- Foundation ลูกโป่ง
- Foundation กล่อง Modal
- Foundation Joyride
- Foundation ควอไลเซอร์
Foundation กินกัน
- Foundation ระบบกริด
- Foundation กินกัน - ซ้อนกันในแนวนอน
- Foundation กินกัน - อุปกรณ์ขนาดเล็ก
- Foundation กินกัน - อุปกรณ์ขนาดกลาง
- Foundation กินกัน - อุปกรณ์ขนาดใหญ่
- Foundation บล็อกตาราง
- Foundation ตัวอย่างตาราง
Foundation คู่มืออ้างอิง
บทช่วยสอน มูลนิธิปุ่ม ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ รูปแบบปุ่ม,ปุ่มขนาด,ปุ่มโค้งมน,ขยายปุ่ม,ปุ่มปิดการใช้งาน,
มูลนิธิปุ่ม
รูปแบบปุ่ม
มูลนิธิมีหกรูปแบบปุ่ม .button ชั้นสร้างปุ่มสีฟ้าด้วยกันกับ padding สีที่แตกต่างกันสำหรับการเรียนปุ่ม: .secondary , .success , .info , .warning หรือ .alert :
ตัวอย่าง
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้น </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = ปุ่ม "รอง"> มัธยมศึกษา </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ความสำเร็จที่ปุ่ม"> ความสำเร็จ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ข้อมูล" ปุ่ม> ข้อมูล </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "เตือน"> คำเตือน </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "แจ้งเตือน"> การแจ้งเตือน </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = ปุ่ม "รอง"> มัธยมศึกษา </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ความสำเร็จที่ปุ่ม"> ความสำเร็จ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ข้อมูล" ปุ่ม> ข้อมูล </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "เตือน"> คำเตือน </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "แจ้งเตือน"> การแจ้งเตือน </ ปุ่ม>
ลอง»
ระดับปุ่มสามารถใช้ใน <a> , <button> หรือ <input> องค์ประกอบ:
ตัวอย่าง
<A href = "#" class = "button บทบาท info" = "button"> ปุ่มลิงก์ </ a>
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่มข้อมูล"> ปุ่ม </ ปุ่ม>
<ประเภทขาเข้า = "ปุ่ม" ชั้น = "ข้อมูลปุ่ม" value = "ป้อนปุ่ม">
<ประเภทขาเข้า = "ส่ง" ชั้น = "ข้อมูลปุ่ม" value = "ส่งปุ่ม">
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่มข้อมูล"> ปุ่ม </ ปุ่ม>
<ประเภทขาเข้า = "ปุ่ม" ชั้น = "ข้อมูลปุ่ม" value = "ป้อนปุ่ม">
<ประเภทขาเข้า = "ส่ง" ชั้น = "ข้อมูลปุ่ม" value = "ส่งปุ่ม">
ลอง»
 | ทำไมจะ a href แท็ก #? เมื่อเราไม่ได้ต้องการที่จะกระโดดและคลิกที่ลิงค์ที่จะได้รับ "404" หน้าเราสามารถตั้งค่า a href แท็ก # |
|---|
ปุ่มขนาด
เราสามารถใช้ .large , .small หรือ .tiny ระดับการกำหนดขนาดของปุ่ม:
ตัวอย่าง
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มใหญ่"> ใหญ่ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้น </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> ขนาดเล็ก </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> เล็ก </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้น </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> ขนาดเล็ก </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่มเล็ก ๆ "> เล็ก </ ปุ่ม>
ลอง»
ปุ่มโค้งมน
คุณสามารถใช้ .radius และ .round ระดับการตั้งค่าปุ่มกลม:
ตัวอย่าง
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้นปุ่ม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "รัศมี"> รัศมีปุ่ม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "รอบปุ่ม"> ปุ่มกลม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = ปุ่ม "รัศมี"> รัศมีปุ่ม </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" ชั้น = "รอบปุ่ม"> ปุ่มกลม </ ปุ่ม>
ลอง»
ขยายปุ่ม
คุณสามารถใช้ .expand ระดับการตั้งค่าปุ่มถึง 100% Broadband:
ตัวอย่าง
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้นปุ่ม </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = ปุ่ม "ขยาย"> ขยายปุ่ม </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = ปุ่ม "ขยาย"> ขยายปุ่ม </ ปุ่ม>
ลอง»
ปุ่มปิดการใช้งาน
คุณสามารถใช้ .disabled ระดับคลิกปุ่มการตั้งค่าที่ไม่สามารถใช้ได้:
ตัวอย่าง
<ปุ่ม type = "ปุ่ม" ชั้น = "ปุ่ม"> เริ่มต้นปุ่ม </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปิดการใช้งานปุ่ม"> ผู้พิการปุ่ม </ ปุ่ม>
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปิดการใช้งานปุ่ม"> ผู้พิการปุ่ม </ ปุ่ม>
ลอง»