Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Bootstrap Contextual Classes: เปลี่ยนสีพื้นหลังตาราง


Bootstrap Contextual Classes ช่วยให้คุณเปลี่ยนสีพื้นหลังของแถวตาราง (<tr>) หรือเซลล์เดี่ยว (<td>, <th>) ได้

คลาสที่มีอยู่:

คลาส คำอธิบาย
.active ใช้สี hover ให้กับแถวหรือเซลล์เฉพาะ
.success บ่งบอกการดำเนินการที่สำเร็จหรือบวก
.warning บ่งบอกคำเตือนที่อาจต้องให้ความสนใจ
.danger บ่งบอกการดำเนินการที่อันตรายหรือลบ

ตัวอย่าง

ตัวอย่างการใช้งานคลาส .active:

<!DOCTYPE html> <html> 
  <head> 
    <title>Bootstrap Table</title> 
    <link href = "/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <script src = "/scripts/jquery.min.js"></script> 
    <script src = "/bootstrap/js/bootstrap.min.js"></script> 
  </head> 
  <body> 
    <table class = "table"> 
      <thead> 
        <tr> 
          <th>Subject</th> 
          <th>Marks</th> 
          <th>Student</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr class = "active"> 
          <td>Maths</td> 
          <td>90</td> 
          <td>Amit</td> 
        </tr> 
        <tr> 
          <td>Science</td> 
          <td>80</td> 
          <td>Aman</td> 
        </tr> 
        <tr> 
          <td>English</td> 
          <td>85</td> 
          <td>Rahul</td> 
        </tr> 
      </tbody> 
    </table> 
  </body> 
</html>