Để có thể bảo trì, các tùy chỉnh CSS nên được đặt trong một tệp custom.css riêng biệt, để bootstrap.css không bị sửa đổi. Tham chiếu đến tập quán. css theo sau bootstrap. css để phần ghi đè hoạt động
Chỉ cần thêm bất kỳ thay đổi nào cần thiết trong CSS tùy chỉnh. Ví dụ: giả sử tôi muốn xóa các đường viền tròn khỏi Thẻ, Nút và Đầu vào biểu mẫu. Tôi thêm quy tắc CSS vào custom.css…
/* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }Với thay đổi CSS đơn giản này, Thẻ, Nút và Đầu vào biểu mẫu hiện có các góc vuông…
Ghi chú. Không có nhu cầu sử dụng. quan trọng trong CSS tùy chỉnh, trừ khi bạn đang ghi đè một trong các lớp Tiện ích Bootstrap. Tính đặc hiệu của CSS luôn hoạt động đối với một lớp CSS để ghi đè lên lớp khác
Sử dụng ghi đè CSS là khả thi đối với các tùy chỉnh Bootstrap đơn giản, nhưng đối với những thay đổi sâu rộng hơn, SASS là phương pháp được đề xuất. Ví dụ: giả sử bạn muốn thay đổi màu "chính" màu xanh lam mặc định trong Bootstrap sang màu khác (ví dụ:. màu đỏ). Bạn có thể tạo một ghi đè CSS đơn giản cho nút .btn-primary như thế này
.btn-primary { background-color: red; }Điều này có tác dụng làm cho nút .btn-primary có màu đỏ, nhưng nó không thay đổi các trạng thái btn-chính khác như ". di chuột" và ". tích cực". Nó cũng không thay đổi màu "chính" trong toàn bộ CSS cho /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }1, /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }2, /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }3, /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }4, /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }5, v.v.
2. Tùy chỉnh bằng SASS
Nếu bạn đã quen với SASS (và bạn nên sử dụng phương pháp này), bạn có thể tùy chỉnh Bootstrap với tùy chỉnh của riêng mình. scss. Có một phần trong tài liệu Bootstrap giải thích điều này, tuy nhiên tài liệu không giải thích cách sử dụng các biến hiện có trong tùy chỉnh của bạn. scss
Ghi đè và "tùy chỉnh" được xác định trong tùy chỉnh. scss (bạn có thể đặt tên cho nó là bất cứ thứ gì bạn muốn) tách biệt với các tệp nguồn Bootstrap SASS. Bằng cách này, bất kỳ thay đổi nào bạn thực hiện đều không ảnh hưởng đến nguồn Bootstrap, điều này giúp cho các thay đổi và nâng cấp trong tương lai dễ dàng hơn nhiều
1. Xem xét cấu trúc thư mục SASS của Bootstrap, bên cạnh tùy chỉnh của bạn. scss
________số 8_______2. trong tùy chỉnh của bạn. scss, hãy nhập các tệp Bootstrap cần thiết để ghi đè. (Thông thường, đây chỉ là các biến. scss. Trong một số trường hợp, với các phần cắt phức tạp hơn, bạn cũng có thể cần các hàm, mixin và các tệp Bootstrap khác. ). Thực hiện các thay đổi, sau đó @import "bootstrap". Điều quan trọng là phải nhập Bootstrap sau khi thay đổi
Ví dụ: hãy thay đổi màu nền của cơ thể thành màu xám nhạt #eeeeee và thay đổi màu theo ngữ cảnh chính màu xanh lam thành biến $purple của Bootstrap
/* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* -------begin customization-------- */ /* simply assign the value */ $body-bg: #eeeeee; /* or, use an existing variable */ $theme-colors: ( primary: $purple ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap";2a (tùy chọn). Ngoài ra, bạn có thể mở rộng các lớp Bootstrap hiện có sau /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }6 để tạo các lớp tùy chỉnh mới. Ví dụ: đây là lớp /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }7 mới mở rộng (kế thừa từ) lớp Bootstrap /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }8, sau đó thêm màu nền và màu…
/* optionally create new custom classes from existing classes */ .row-dark { @extend .row; background-color: #333333; color: #ffffff; }3. Xây dựng với SASS. Đầu ra CSS sẽ chứa các phần ghi đè tùy chỉnh. Đừng quên kiểm tra các đường dẫn bao gồm nếu @imports của bạn không thành công. Để biết danh sách đầy đủ các biến bạn có thể ghi đè, hãy xem tệp /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }9. Ngoài ra còn có các biến toàn cục này
Hãy nhớ rằng, với SASS, bạn phải @import “bootstrap” sau các tùy chỉnh trong .btn-primary { background-color: red; }0 để chúng hoạt động. Sau khi SASS được biên dịch thành CSS (việc này được thực hiện bằng trình biên dịch/bộ xử lý SASS phía máy chủ), CSS kết quả là Bootstrap tùy chỉnh
Tóm lại, đây là cách hoạt động của các tùy chỉnh SASS
Đầu tiên, khi tệp .btn-primary { background-color: red; }0 được xử lý bằng SASS, các giá trị .btn-primary { background-color: red; }2 được xác định trong Bootstrap /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }9
Tiếp theo, các giá trị tùy chỉnh của chúng tôi được đặt, sẽ ghi đè bất kỳ biến nào có giá trị .btn-primary { background-color: red; }2 được đặt trong Bootstrap /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; }9
Cuối cùng, Bootstrap được nhập (_______2_______6) cho phép bộ xử lý SASS (A. K. A. trình biên dịch) để tạo tất cả CSS thích hợp bằng cách sử dụng cả mặc định Bootstrap và ghi đè tùy chỉnh