แบบความคิดของการสร้าง: แท็ก

แบบความคิดของการตั้งรูปแบบแท็ก

ขั้นที่ 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;} /* สีเขียว */
.info {background-color: #2196F3;} /* สีสีน้ำเงิน */
.warning {background-color: #ff9800;} /* สีส้ม */
.danger {background-color: #f44336;} /* สีแดง */
.other {background-color: #e7e7e7; color: black;} /* สีเทา */

亲自试一试