วิธีการ - ฉลาก
เรียนรู้วิธีจัดรูปแบบป้ายกำกับด้วย CSS
ข้อมูล ความสำเร็จคำเตือน อันตราย อื่นๆ
วิธีการจัดรูปแบบฉลาก
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<span class="label success">Success</span>
<span class="label
info">Info</span>
<span class="label warning">Warning</span>
<span
class="label danger">Danger</span>
<span class="label
other">Other</span>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
.label {
color: white;
padding:
8px;
}
.success {background-color: #04AA6D;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color:
#ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */