Override các class mặc định của Bootstrap

Trong bài học này, chúng ta sẽ tìm hiểu về cách ghi đè (override) các class mặc định của Bootstrap để tạo ra giao diện tuỳ chỉnh mà không làm ảnh hưởng đến toàn bộ framework. Việc override đúng cách giúp chúng ta có thể cá nhân hóa giao diện một cách linh hoạt mà vẫn tận dụng được sức mạnh của Bootstrap.

1. Khi nào nên override thay vì sử dụng class sẵn có?

Bootstrap cung cấp rất nhiều class có sẵn để giúp lập trình viên dễ dàng xây dựng giao diện. Tuy nhiên, có một số trường hợp chúng ta cần override:

• Khi cần tạo giao diện với phong cách riêng, không giống hoàn toàn với Bootstrap mặc định.
• Khi một số class của Bootstrap không đáp ứng được yêu cầu cụ thể của dự án.
• Khi cần đồng bộ phong cách của toàn bộ website mà không muốn chỉnh sửa từng class Bootstrap riêng lẻ.

Ví dụ: Nếu bạn muốn tất cả các nút .btn-primary có màu xanh đậm hơn so với mặc định của Bootstrap, bạn có thể ghi đè thay vì sử dụng thêm class CSS phụ.

2. Cách ghi đè CSS mặc định của Bootstrap

Ghi đè bằng CSS thông thường

Chúng ta có thể ghi đè các class của Bootstrap bằng cách tạo file CSS riêng và đặt sau Bootstrap trong HTML:

Ví dụ: Ghi đè màu nền của .btn-primary

.btn-primary {
    background-color: #004085 !important; /* Màu xanh đậm hơn */
    border-color: #002752;
}

HTML:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="custom.css"> <!-- File chứa CSS ghi đè -->

Ghi đè bằng Sass (nếu dùng Bootstrap với Sass)

Bootstrap hỗ trợ Sass, giúp chúng ta dễ dàng thay đổi các biến mặc định mà không cần viết lại toàn bộ CSS.

Ví dụ: Thay đổi màu mặc định của .btn-primary bằng Sass

$primary: #004085; /* Màu mới */
@import "bootstrap"; /* Nhúng Bootstrap sau khi đã thay đổi biến */

Lưu ý: Khi override bằng CSS, có thể cần sử dụng !important để đảm bảo ưu tiên áp dụng.

3. Bài tập thực hành

Yêu cầu: Tạo một giao diện với font chữ và kiểu dáng riêng bằng cách ghi đè class mặc định của Bootstrap.

Hướng dẫn:

• Ghi đè màu sắc của .btn-primary và .alert-danger.
• Tùy chỉnh font chữ của .navbar.
• Thử nghiệm override bằng cả CSS thuần và Sass.

Ví dụ:

.btn-primary {
    background-color: #28a745 !important; /* Màu xanh lá cây thay vì xanh dương */
    border-color: #218838;
}

.alert-danger {
    background-color: #ff0000 !important; /* Đỏ tươi hơn */
    color: #fff;
}

.navbar {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
}

4. Kết luận

Bằng cách override CSS đúng cách, chúng ta có thể dễ dàng cá nhân hóa giao diện mà vẫn giữ được các tính năng mạnh mẽ của Bootstrap. Hãy thực hành nhiều để làm chủ kỹ thuật này nhé!