บทความนี้จะแนะนำคุณ:
- จะสร้างปุ่มใน Bootstrap ได้อย่างไร?
- จะสร้างปุ่มเค้าร่างใน Bootstrap ได้อย่างไร?
- จะปรับขนาดปุ่ม Bootstrap ได้อย่างไร?
- วิธีสร้างปุ่มระดับบล็อกใน Bootstrap
- วิธีสร้างปุ่ม Active State ใน Bootstrap
- จะสร้างปุ่มสถานะปิดการใช้งานใน Bootstrap ได้อย่างไร?
จะสร้างปุ่มใน Bootstrap ได้อย่างไร?
บูตสแตรป “ พันล้าน ” class ใช้เพื่อสร้างปุ่ม ในการเพิ่มปุ่มสไตล์ คุณสามารถใช้ปุ่ม “ พันล้าน ” คลาสที่มีคลาสสี เช่น “ btn-ความสำเร็จ ” เพื่อสร้างปุ่มสีเขียว
ใน HTML คำว่า “ <ปุ่ม> ”, “ ', และ ' <อินพุต> ” แท็กที่มีประเภท “ ปุ่ม ” ใช้เพื่อสร้างปุ่ม “ พันล้าน ” คลาสมีสไตล์ที่กำหนดไว้ล่วงหน้าซึ่งเพิ่มสไตล์พื้นฐานให้กับองค์ประกอบปุ่ม
สำหรับแนวคิดที่ชัดเจน โปรดดูตัวอย่างด้านล่าง
ตัวอย่าง
ในไฟล์ HTML ให้ทำตามขั้นตอนเพื่อสร้างปุ่มโดยใช้แท็กต่างๆ:
- เพิ่ม ' <ปุ่ม> ' และ ' ” องค์ประกอบและกำหนดให้ “ พันล้าน ' และ ' btn-หลัก ” ชั้นเรียน
- จากนั้นเพิ่ม “ <อินพุต> ” แท็กด้วยประเภท “ ปุ่ม '. กำหนดให้เป็น “ พันล้าน ' และ ' btn-ความสำเร็จ ” สำหรับการใส่สไตล์ให้สองปุ่มแรกเป็นสีน้ำเงิน และปุ่มที่สามเป็นสีเขียว:
< ก ระดับ = 'btn btn-หลัก' href = '#' > เปิด < / ก >
< ป้อนข้อมูล พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-ความสำเร็จ' ค่า = 'ค้นหา' >
เอาต์พุต
จะสร้างปุ่มเค้าร่างใน Bootstrap ได้อย่างไร?
ในการเพิ่มโครงร่างปุ่ม Bootstrap “ btn-เค้าร่าง-* ” คลาสถูกใช้ ในรูปแบบไวยากรณ์ “ * ” ที่นี่แสดงถึงสีโครงร่าง ตัวอย่างเช่น “ btn-ร่าง-อันตราย ” วางโครงร่างสีแดง “ btn-ร่าง-หลัก ” กำหนดโครงร่างสีน้ำเงิน และอื่นๆ
วิเคราะห์รหัสที่ระบุด้านล่าง:
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-ร่าง-หลัก' >ถัดไป< / ปุ่ม >< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-โครงร่าง-อันตราย' >ยกเลิก< / ปุ่ม >
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-โครงร่าง-ความสำเร็จ' >ความสำเร็จ< / ปุ่ม >
สังเกตได้ว่า “ ถัดไป ปุ่ม ” มีโครงร่างสีน้ำเงิน ปุ่ม “ ยกเลิก ” ปุ่มที่มีเส้นขอบสีแดง และปุ่ม “ ความสำเร็จ ปุ่ม ” ได้รับการออกแบบด้วยโครงร่างสีเขียว:
จะปรับขนาดปุ่ม Bootstrap ได้อย่างไร?
คลาส Bootstrap บางคลาสถูกนำไปใช้เพื่อปรับขนาดปุ่ม เช่น:
- “ btn-lg ” ใช้คลาสเพื่อสร้างปุ่มขนาดใหญ่ คลาสนี้สามารถเพิ่มขนาดฟอนต์และช่องว่างภายในได้
- “ btn-md ” สร้างปุ่มขนาดกลาง
- “ btn-sm ” สร้างปุ่มเล็กๆ
ตัวอย่าง
ตอนนี้ เราจะสร้างปุ่มสามปุ่มที่มีขนาดต่างกันและชื่อที่อธิบายตนเองได้:
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-รอง btn-lg' >ใหญ่< / ปุ่ม >< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-คำเตือน btn-md' >ปานกลาง< / ปุ่ม >
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn bn-อันตราย btn-sm' >เล็ก< / ปุ่ม >
เอาต์พุต
วิธีสร้างปุ่มระดับบล็อกใน Bootstrap
ปุ่มระดับบล็อกคือปุ่มที่มีขนาดเต็มความกว้าง หากต้องการสร้างปุ่มระดับบล็อก ปุ่ม “ btn-บล็อก ” class ใช้ดังนี้
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-คำเตือน btn-block' >ปุ่ม< / ปุ่ม >< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-รอง btn-บล็อก' >ปุ่ม< / ปุ่ม >
เอาต์พุต
วิธีสร้างปุ่ม Active State ใน Bootstrap
ปุ่มสถานะที่ใช้งานหมายถึงปุ่มที่กำลังใช้งานอยู่ ปุ่มเหล่านี้จะเข้มกว่าปกติเล็กน้อย หากต้องการสร้างปุ่มดังกล่าว Bootstrap “ คล่องแคล่ว ” คลาสถูกใช้
ตัวอย่าง
รหัสด้านล่างสร้างสองปุ่ม อันแรกอยู่ในสถานะปกติในขณะที่อีกอันใช้กับ“ คล่องแคล่ว ' ระดับ:
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-ความสำเร็จ' >ความสำเร็จ< / ปุ่ม >< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-สำเร็จ' >ความสำเร็จ< / ปุ่ม >
เอาต์พุต
จะสร้างปุ่มสถานะปิดการใช้งานใน Bootstrap ได้อย่างไร?
ปุ่มสถานะปิดใช้งานหมายถึงปุ่มที่ไม่สามารถคลิกได้และใช้งานไม่ได้ ใน Bootstrap ' พิการ ” class ใช้เพื่อสร้างปุ่มสถานะปิดใช้งาน “ พิการ แอตทริบิวต์ ” สามารถใช้เพื่อจุดประสงค์นี้ได้เช่นกัน
ตัวอย่าง
ตรวจสอบตัวอย่างด้านล่าง:
- ปุ่มแรกไม่ได้อยู่ในสถานะปิดใช้งาน
- อันที่สองใช้ ' พิการ ” คลาสเพื่อสร้างปุ่มสถานะปิดใช้งาน
- อันที่สามใช้ ' พิการ ' คุณลักษณะ:
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-ความสำเร็จถูกปิดใช้งาน' >ความสำเร็จ< / ปุ่ม >
< ปุ่ม พิมพ์ = 'ปุ่ม' ระดับ = 'btn btn-ความสำเร็จ' ปิดใช้งาน>สำเร็จ< / ปุ่ม >
เอาต์พุต
เราได้กล่าวถึงแง่มุมต่าง ๆ ที่เกี่ยวข้องกับปุ่ม Bootstrap และรูปแบบใน CSS
บทสรุป
“ พันล้าน ” class ใช้เพื่อสร้างปุ่ม Bootstrap ด้วยการออกแบบที่เรียบง่าย หากต้องการสร้างปุ่มสีและโครงร่าง ปุ่ม “ btn-* ' และ ' btn-เค้าร่าง-* ” คลาสถูกใช้โดยที่ “ * ” หมายถึงระดับสีใด ๆ ตัวอย่างเช่น “ btn-คำเตือน ” สร้างปุ่มสีเหลือง “ btn-outline-คำเตือน ” สร้างปุ่มที่มีกรอบสีเหลือง และอื่นๆ อีกมากมาย ในการทำให้ปุ่มใช้งานหรือปิดใช้งาน คลาส 'ใช้งานอยู่' และ 'ปิดใช้งาน' จะถูกนำไปใช้ตามลำดับ โพสต์นี้ให้คำแนะนำที่ครอบคลุมเกี่ยวกับปุ่ม Bootstrap