Bootstrap thay đổi màu cơ bản mà không cần Sass
Một số nhà phát triển và nhóm nhận thấy rằng mã được viết bằng Bootstrap dễ bảo trì hơn CSS thông thường, vì vậy họ thích Bootstrap hơn CSS gốc Show
Nhưng nếu mọi người đều sử dụng Bootstrap với các kiểu mặc định của nó, thì mọi trang web sẽ trông giống nhau – và nhanh chóng, internet sẽ trở nên khá nhạt nhẽo. May mắn thay, Bootstrap cũng có khả năng tùy biến cao Cách tùy chỉnh BootstrapNếu bạn là người mới bắt đầu, bạn có thể tùy chỉnh Bootstrap bằng biểu định kiểu CSS tùy chỉnh. Tính đặc hiệu của CSS rất quan trọng ở đây. Bạn viết CSS tùy chỉnh, với độ đặc hiệu tương tự hoặc cao hơn và liên kết tới nó trong phần đầu của chỉ mục của bạn. html sau dòng liên kết đến CSS Bootstrap gốc
Đối với các chỉnh sửa nhỏ, điều này là ổn. Nhưng đối với các dự án lớn hơn, điều này có thể tốn nhiều thời gian và có thể có nhiều khai báo kiểu dư thừa. Vì vậy, phải có một cách khác, sạch hơn, Cách sử dụng Sass với BootstrapGiải pháp là sử dụng Sass – một CSS preprocessor. Sass được biên dịch thành CSS trước khi nó được sử dụng trên các trang web Cho đến phiên bản Bootstrap 3. x, bạn có thể lựa chọn giữa các bộ tiền xử lý CSS. Ít hơn hoặc Sass. Nhưng kể từ phiên bản 4, Bootstrap chỉ sử dụng Sass. Mã nguồn của khung Bootstrap 4 và 5 được viết hoàn toàn bằng Sass, đây là minh chứng cho thấy Sass đã trưởng thành như thế nào Bạn có thể đã nghe khẩu hiệu, "Sass là CSS có siêu năng lực". Nếu bạn muốn học Sass, trang web chính thức là một nguồn tuyệt vời. Bạn cũng có thể tham khảo các hướng dẫn khác trên freeCodeCamp, chẳng hạn như hướng dẫn này về cách sử dụng Sass với CSS hoặc khóa học video này về cách sử dụng Sass với Bootstrap 5 Sass đi kèm với hai cú pháp. Cái cũ hơn sử dụng thụt lề và cú pháp SCSS mới hơn (SCSS cho Sassy CSS) sử dụng dấu ngoặc nhọn giống như CSS SCSS là siêu tập hợp của CSS. Vì vậy, mã CSS được lưu với một. phần mở rộng scss (hoặc SCSS xen kẽ với CSS) cũng là mã Sass hợp lệ Trong hướng dẫn này, chúng ta sẽ sử dụng phiên bản SCSS. Dù phong cách là gì, Sass thụt lề hay SCSS giống như CSS, trình biên dịch Sass sẽ dịch mã nó thành vanilla CSS để sử dụng trên trình duyệt Những gì chúng ta sẽ làm trong hướng dẫn này
Khi chúng tôi có thể thực hiện những điều này, việc thực hiện các tùy chỉnh khác sẽ trở nên dễ dàng điều kiện tiên quyết
Tải xuống Bootstrap từ trang web chính thức. https. //getbootstrap. com Vì chúng tôi có Nút. js được cài đặt, tôi sẽ sử dụng phiên bản npm 3Chúng ta cũng cần cài đặt trình biên dịch Sass. Chúng tôi có thể lấy phiên bản phi tiêu chính thức từ trang web của họ. Cho dù bạn đang dùng Windows, Mac hay Linux, bạn chỉ cần tải xuống gói dart-sass, giải nén và thêm nó vào đường dẫn (biến môi trường) Có một gói npm sass. Ngoài ra, còn có tiện ích mở rộng Live Sass Compiler VS Code với hơn 2 triệu lượt cài đặt. Vui lòng sử dụng bất kỳ trình biên dịch Sass nào mà bạn cảm thấy thoải mái Ở đây, chúng ta sẽ sử dụng gói npm. ngổ ngáo Sau khi tải Bootstrap, và trình biên dịch Sass, trong thư mục 4 có một thư mục tên là 0Ngoài ra còn có ba thư mục bên trong nó. 1, 2 và 3Tất cả CSS đã biên dịch nằm trong 1, mã JavaScript Bootstrap trong 2 và tất cả các tệp Sass đều nằm trong thư mục 3Cách thay đổi màu chủ đề chính và phụĐể tùy chỉnh, ý tưởng của chúng tôi là ghi đè lên. scss và biên dịch lại chúng Tài liệu Bootstrap chính thức khuyên không nên thay đổi các tệp bootstrap cốt lõi bất cứ khi nào có thể. Vì vậy, chúng tôi sẽ tạo một tùy chỉnh. biểu định kiểu scss Và chúng tôi sẽ nhập tất cả Bootstrap trong tùy chỉnh. tập tin scss
Các biến có hậu tố là 7 (cờ Sass) trong Bootstrap. Cờ 7 yêu cầu trình biên dịch chỉ đặt giá trị nếu giá trị không được xác địnhVì vậy, chúng tôi đặt các biến trước chỉ thị @import để sau này, trình biên dịch sẽ đặt giá trị của chúng tôi thay vì giá trị mặc định 1Chúng tôi cũng cần một tệp HTML để xem trước kết quả 2Chúng tôi chưa biên dịch Sass. Để xem các kiểu mặc định, hãy chạy Live Server Nếu Live Server chưa được cài đặt, bạn có thể tải xuống tiện ích mở rộng miễn phí từ thị trường tiện ích mở rộng VS Code Đây là những gì chúng ta thấy Đã đến lúc biên dịch tệp Sass tùy chỉnh của chúng tôi Cú pháp biên dịch đơn giản. Chỉ định các thư mục nguồn và đích được phân tách bằng dấu hai chấm tôi có tùy chỉnh của tôi. scss trong một thư mục có tên là 9 10Sau khi biên dịch lại ta có bootstrap tùy biến trong file 11Thay vì tệp bootstrap mặc định, chúng tôi sẽ sử dụng biểu định kiểu bootstrap tùy chỉnh này 6Sau đó chạy lại Live Server Chúng tôi nhận được trang web tùy chỉnh với phong cách mới của chúng tôi Cách thay đổi điểm ngắt lướiBây giờ chúng ta sẽ tùy chỉnh các điểm ngắt phương tiện. Bên cạnh đó, chúng ta cũng phải xác định lại container-max-widths Cách dễ nhất là chỉ cần ghi đè lên các biến 7Vì điều này sẽ vi phạm nguyên tắc DRY (Don't Repeat Yourself), sử dụng hàm 12 là một lựa chọn tốt hơnChúng tôi phải nhập chức năng đầu tiên trong tùy chỉnh. scss để cung cấp 13Chúng tôi cũng phải nhập các biến vì $grid-breakpoints (được sử dụng bên trong hàm) được xác định ở đó 0Đây là mã 1Chúng tôi biên dịch lại và sử dụng tệp mới nhất thay cho tệp cũ hơn 14đây là kết quả cuối cùng Nó không chỉ là màu sắc chủ đề và điểm ngắt phương tiện. Đường viền, khoảng cách, bóng hộp, phông chữ, biểu tượng. bạn có thể tùy chỉnh mọi thứ Tôi đã đưa tất cả các mã trên vào repo GitHub này Để khám phá thêm, tài liệu Bootstrap chính thức là một tài nguyên tuyệt vời về vấn đề này Phần kết luậnTrong hướng dẫn này, tôi đã chỉ cho bạn cách chúng ta có thể sử dụng Sass để tùy chỉnh Bootstrap Ngay cả khi chúng tôi đang ở trong một dự án sử dụng React với Bootstrap, thì ý tưởng vẫn giống nhau. Tạo tùy chỉnh. scss, thực hiện tùy chỉnh, nhập bootstrap, biên dịch lại, sau đó liên kết với tệp tùy chỉnh thay cho tệp bootstrap gốc học tập vui vẻ QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Tôi là một lập trình viên máy tính tự học, người đóng góp cho nguồn mở Nếu bài viết này hữu ích, hãy tweet nó Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Làm cách nào để tùy chỉnh Bootstrap mà không cần Sass?Nếu là người mới bắt đầu, bạn có thể tùy chỉnh Bootstrap bằng biểu định kiểu CSS tùy chỉnh . Tính đặc hiệu của CSS rất quan trọng ở đây. Bạn viết CSS tùy chỉnh, với độ đặc hiệu tương tự hoặc cao hơn và liên kết tới nó trong phần đầu của chỉ mục của bạn. html sau dòng liên kết đến CSS Bootstrap gốc.
Làm cách nào để ghi đè màu Bootstrap bằng CSS?Có hai cách chính để bạn có thể ghi đè Bootstrap CSS. . Ghi đè bằng bộ chọn và thuộc tính có độ đặc hiệu cao hơn qua CSS Sử dụng các biến Bootstrap Sass (được khuyến nghị) Làm cách nào để ghi đè các biến scss Bootstrap?Ghi đè các biến
. scss” trong thư mục “scss”, chứa tất cả các biến được sử dụng trong Bootstrap. Bây giờ, thêm thư mục tên “abstracts” vào thư mục scss của bạn và tạo “_custom-variables. scss” trong thư mục đó .
Làm cách nào để thay đổi màu nền trên Bootstrap?Chúng ta có thể thêm màu nền vào div đơn giản bằng cách thêm lớp “bg-primary”, “bg-success”, “bg-danger”, “bg-info”< . , and many more as shown in the following examples. |