Bootstrap css chắc không xa lạ với các web developer nhưng mình thấy có rất nhiều bạn sử dụng Bootstrap sai cách trong các web dự án. Tại sao mình lại nói vậy, các bạn hãy theo dõi bài viết này nhé
I. Không nên tích hợp bằng cách tải xuống. khóa kéo
Trong thực tế khi làm việc với Bootstrap, chúng ta thường hay tùy biến lại những style mặc định mà Bootstrap cung cấp như color color, box-shadow, border,… Thế nhưng khi tích hợp Bootstrap vào dự án, nhiều bạn lại chọn cách khác . zip chứa các tệp css, js – là những tệp đã được biên dịch và không có khả năng biến cao
Khi tích hợp Bootstrap theo cách này, mà muốn tùy biến lại css thì mình thấy
custom.css, sau đó . Nghệ thì cũng hợp lý đấy, nhưng cách này có một số nhược điểm như sau. Khó có thể ghi đè được hết các thuộc tính css của Bootstrap. Quả đúng như vậy, mình lấy ví dụ trong trường hợp bạn muốn đổi màu chính của Bootstrap chẳng hạn. Mặc dù màu chính của Bootstrap được xác định có tông màu xanh da trời, và tông màu này được áp dụng ở rất nhiều vị trí như viền, nút, văn bản, nền… Nếu bạn muốn đổi màu chính này, đồng nghĩa với việc bạn phải ghi hết các kiểu của các kiểu
CSS is extra – resource account. Khi ghi đè, kết quả là bạn sẽ thấy css của mình. Nhưng trước đó trình duyệt vẫn phải tải css của Bootstrap, điều này gây lãng phí tài nguyên máy chủ cho một lý do không đáng có
Không sử dụng hết các thành phần. Bootstrap xây sẵn cho mình cả một trời linh kiện, thế nhưng chẳng dám bao giờ mình dùng hết cả. Những thành phần này cũng vậy, jumbotron rất ít khi sử dụng, vậy mà vẫn được tải trong css của bootstrap – khá thừa
Một số phương pháp hay nhất khi sử dụng Bootstrap CSS
Hướng dẫn sử dụng bootstrap tourist để hỗ trợ cho phần mềm
II. Tổng hợp thế nào là tốt nhất
I don't know you have to mind not, chứ không phải bên ngoài việc cung cấp các tệp css đã được biên dịch, Bootstrap còn cung cấp cả các tệp scss này. Nếu muốn tùy biến kiểu, chúng ta nên tùy biến trong các tệp scss này
Về công cụ biên dịch từ scss ra css, mình sẽ sử dụng Laravel Mix cho gần gũi. Bạn nên đọc 2 bài viết của mình dưới đây nếu chưa hiểu scss là gì cũng như chưa biết cách sử dụng Laravel Mix để biên dịch scss ra css
Tham khảo Running setting CSS hấp dẫn trên TopDev
Bước 1. Tạo dự án bằng cách sử dụng Laravel Mix
Nếu bạn nào biết thì có thể clone github repo của mình về rồi cài đặt theo các bước sau đây
git clone //github.com/phambinh217/laravel-mix-stand-alone.git cd laravel-mix-stand-alone npm install npm install bootstrap --save-dev
Bước 2. Tùy biến theo cách của bạn
Theo như tài liệu về phần Theming của Bootstrap, có 2 cách để bạn có thể tùy chỉnh lại các kiểu
Cách 1. Nhập toàn bộ scss của Bootstrap
Bạn đang ở tệp src/app.scss, xóa hết nội dung và thay thế bằng
@nhập khẩu ". /node_modules/bootstrap/scss/bootstrap”;
cách 2. Dùng component nào thì import component đấy
Bạn mở tệp src/app.scss, xóa hết nội dung và thay thế bằng
// Bắt buộc phải import những file này @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // Những components bạn cần // Bạn có thể xem danh sách các components // ở trong file 'node_modules/bootstrap/scss/bootstrap.scss' @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/code"; @import "../node_modules/bootstrap/scss/grid";
Ở đây, mình sẽ chọn Cách 2 để tăng khả năng tùy biến
Không chỉ cho phép tùy biến các thành phần, Bootstrap còn cho bạn tùy chọn các thông số về màu sắc, khoảng cách giữa các col, kích thước xs, sm, md, lg,… thông qua giá trị của các biến
Để xem chi tiết Bootstrap có những biến nào, mỗi biến mang ý nghĩa là bạn đang xem gì trong tệp node_modules/bootstrap/scss/variables
Để chỉnh sửa các biến, bạn chỉ cần ghi đè lên chúng trước khi nhập tệp scss của Bootstrap đã được nhập. Trong ví dụ sau đây, mình sẽ override lại màu nền, mà màu chữ thông qua 2 biến là $body-bg và
// Bắt buộc phải import những file này @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // Những components bạn cần // Bạn có thể xem danh sách các components // ở trong file 'node_modules/bootstrap/scss/bootstrap.scss' @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/code"; @import "../node_modules/bootstrap/scss/grid";0
// Các biến cần ghi đè $body-bg: #000; $body-color: #111; // Import scss của Bootstrap @import "../node_modules/bootstrap/scss/bootstrap";
Bước 3. biên dịch thôi
you run
npm run watch
Hoặc chạy lệnh sau trong trường hợp lệnh không hoạt động với hệ điều hành của bạn
npm run watch-poll
Toàn bộ scss của Bootstrap sẽ được biên dịch ra
// Bắt buộc phải import những file này @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // Những components bạn cần // Bạn có thể xem danh sách các components // ở trong file 'node_modules/bootstrap/scss/bootstrap.scss' @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/code"; @import "../node_modules/bootstrap/scss/grid";1 – rất cùng gọn gàng và sạch sẽ
III. Kết luận
Mình đang làm việc với Bootstrap là một khoảng thời gian khá dài và mới phát hiện ra cách làm này. Do khi vào trang chủ của Bootstrap, nó gợi ý ngay một nút Tải xuống tướng, thế là mình biết đường tải. zip về rồi dùng thôi, mãi về sau tự đặt ra câu hỏi “Làm sao để tùy biến lại css của bootstrap hiệu quả hơn” thì mới chịu tìm hiểu thêm