บูตสแตรป | ป้ายและฉลาก

บทความนี้จะครอบคลุมมุมมองต่อไปนี้เพื่อสาธิตการใช้ Bootstrap badges:

• วิธีใช้ Bootstrap Badge สำหรับข้อมูลเพิ่มเติม
• วิธีการใช้ Bootstrap Badge สำหรับข้อมูลบริบท?
• จะเพิ่มสไตล์ที่กำหนดเองให้กับ Bootstrap Badge ได้อย่างไร
• จะเพิ่มไอคอนให้กับ Bootstrap Badge ได้อย่างไร?
• จะเชื่อมโยง Bootstrap Badge กับแหล่งอื่นได้อย่างไร
• วิธีทำป้ายให้โค้งมน?
• วิธีใช้ Bootstrap Badge เป็นตัวนับ

Bootstrap Badges คืออะไร?

ป้ายเป็นส่วนประกอบพื้นฐานที่ใช้แสดงตัวบ่งชี้ ตัวอย่างเช่น สามารถใช้เป็นตัวนับตัวเลขเพื่อแสดงจำนวนการแจ้งเตือนหรือข้อความ:

นอกจากนี้ยังสามารถใช้เพื่อแสดงข้อมูลเพิ่มเติม เช่น แสดงในรูปภาพที่กำหนด:

วิธีใช้ Bootstrap Badge สำหรับข้อมูลเพิ่มเติม

สามารถเพิ่มป้าย Bootstrap ภายในองค์ประกอบ HTML เพื่อใช้เป็นข้อมูลเพิ่มเติม ตรวจสอบตัวอย่างที่กล่าวถึงด้านล่างสำหรับการสาธิต

ตัวอย่าง

หากต้องการใช้ Bootstrap badge สำหรับข้อมูลเพิ่มเติม ประการแรก:

• เพิ่ม '

  ' และ '

  ” องค์ประกอบ

• วาง “ ” องค์ประกอบที่มี “ ป้าย ' และ ' ป้าย-* ” ชั้นเรียน คลาส “ตรา-*” หมายถึงตราที่มีสีที่ระบุ:

สังเกตได้ว่ามีการเพิ่มสองป้ายในหัวเรื่องที่เกี่ยวข้อง:

วิธีการใช้ Bootstrap Badge สำหรับข้อมูลบริบท?

นอกจากนี้ยังสามารถใช้ป้าย Bootstrap เพื่อให้ข้อมูลตามบริบท เช่น “ ป้ายอันตราย ” แสดงตราเป็นสีแดงและสามารถใช้เพื่อแสดงข้อความที่ล้มเหลว เช่น ยกเลิก ไม่ถูกต้อง หรืออื่นๆ “ ป้ายความสำเร็จ ” ใช้เมื่อเราต้องการแสดงข้อความแสดงความสำเร็จ

ตัวอย่าง

ดูรหัสที่กำหนดเพื่อทำความเข้าใจสถานการณ์ที่กล่าวถึง:

เอาต์พุต

จะเพิ่มสไตล์ที่กำหนดเองให้กับ Bootstrap Badge ได้อย่างไร

คุณยังสามารถใช้ CSS เพื่อเพิ่มสไตล์ที่เป็นเอกลักษณ์ให้กับ Bootstrap badge เพื่อความเข้าใจที่ดีขึ้นคลาสที่มีชื่อ“ กำหนดเอง ” ถูกเพิ่มไว้ใน “ ' องค์ประกอบ. จากนั้นจึงใช้คุณสมบัติต่อไปนี้:

สไตล์คลาส 'กำหนดเอง'

“ .กำหนดเอง ” ใช้เพื่อเข้าถึง “ กำหนดเอง ' ระดับ. คุณสมบัติต่อไปนี้ใช้กับมัน:

• “ ขนาดตัวอักษร ” ปรับขนาดตัวอักษร
• “ ตัวอักษรน้ำหนัก ” ระบุความหนาของแบบอักษร
• “ ระยะห่างตัวอักษร ” เพิ่มช่องว่างระหว่างตัวอักษร
• “ การขยายความ ” ให้พื้นที่รอบเนื้อหาขององค์ประกอบ

เอาต์พุต

จะเพิ่มไอคอนให้กับ Bootstrap Badge ได้อย่างไร?

เราสามารถเพิ่มไอคอนต่าง ๆ ให้กับตราได้เช่นกัน ในการทำเช่นนั้น มีหลายคลาสที่สามารถใช้สำหรับสาเหตุนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่ แบบอักษรที่ยอดเยี่ยม เว็บไซต์.

ตัวอย่าง

ใน HTML ให้เพิ่ม ' ' องค์ประกอบ. ภายในองค์ประกอบนี้ ให้วางองค์ประกอบแบบอินไลน์ “ ” หรือ “” เพื่อแทรกคลาสไอคอน: