Laravel có bootstrap không?
|
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é Show I. Không nên tích hợp bằng cách tải xuống. khóa kéoTrong 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ấtI 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 https://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 @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 // 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 Để 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à // 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ậnMì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 |
