กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • override bootstrap css

    April 14, 2018

    ต้องการแก้  bootstrap.css แต่ไม่ใช่วิธีการที่ดี เพราะ ถ้ามันอัพเดทในอนาคต จึงต้องสร้าง custom.css ขึ้นมา แล้วบังคับให้มันมีสิทธิ์เหนือกว่า หรือ เขียนทับ bootstrap.css เดิม

    การให้น้ำหนัก

    100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements

    นั่นจึงเป็นการยากที่จะเขียนทับ bootstrap.css
    ทางที่ง่าย ให้ทำคล้ายๆแบบนี้ <body id="bootstrap-overrides">
    ใช้ ID และ ตั้งชื่อ class ใหม่
    class ใหม่จะแสดงผลได้ทันทีเพราะไม่ซ้ำกับ bootstrap.css

    และนั่นเราจึงแค่เพียงใส่ prefix เข้าไป ใน ID ของเรา
    ตัวอย่าง

    /* Example selector defined in Bootstrap */
.xxx h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap xxx definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

    https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css

    ใช้จริงใช้วิธีนี้
    ใส่ใน header.php ให้โหลดหลังสุด แค่นี้มันก็เขียนทับอันเดิมที่ คลาสเหมือนกันแล้ว

    Link your custom.css file as the last entry below the bootstrap.css. Custom.css style definitions will override bootstrap.css

    Html

    <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories