Chắc chắn các bạn đều biết Bootstrap là một trong những framework để xây dựng trang web giao diện phổ biến nhất hiện nay. Cũng vì Bootstrap phổ biến nên cách chúng ta sử dụng nó trong các dự án cũng vô cùng đa dạng, đa dạng tới mức nhiều khi ta không biết nên sử dụng sao cho đúng, cho hay. Nên trong bài viết này, mình xin phép được chia sẻ một vài phương pháp hay nhất [tạm dịch là các mẹo hay, các lưu ý] khi sử dụng Bootstrap trong dự án mà mình tự kết xuất trong quá trình làm việc với nó
Đi nào…
1. Nên tích hợp Bootstrap thông qua NPM
Khi vào trang chủ của Bootstap, bạn sẽ bị “mời gọi” bằng một nút Tải xuống như trong hình bên dưới
Vì lời mời này, nhiều bạn đã tích hợp Bootstrap vào dự án bằng cách tải xuống và đưa Bootstrap trực tiếp vào mã nguồn của dự án. Thực chất thì đây cũng là một cách, nhưng bạn đã bao giờ tích hợp bằng cách sử dụng npm chưa?
Để đánh dấu một Bootstrap vào dự án bằng npm, bạn chỉ cần chạy lệnh đơn giản như sau
npm install bootstrapnpm is a manager package of nodejs. Để cài đặt nodejs và npm, bạn tham khảo tại trang chủ nodejs. tổ chức nhé
Loi ích khi tích hợp Bootstrap qua npm
- Vừa dễ vừa đơn giản
- Nếu Bootstrap có bản cập nhật, thì việc nâng cấp cũng dễ dàng
- Dễ dàng tùy biến lại Bootstrap, nếu các kiểu [màu sắc, kích thước chữ] không đúng ý bạn. Lợi ích này là cực kỳ quan trọng, là tiền đề cho các phương pháp hay nhất khác dưới đây
Hướng dẫn sử dụng bootstrap tourist để hỗ trợ cho phần mềm
3 Cách Làm Gradient Đường Viền Trong CSS Mà Bạn Nên Biết
2. Options Styles by SCSS
Mình thấy nhiều dự án biến đổi lại style của Bootstrap bằng cách tạo 01 file style. css, after that for this file load after style of Bootstrap. Còn nếu muốn tùy biến gì thì viết trong file style. css này
Nhưng không, đó không phải là cách hay, tốt nhất là khi bạn đã tích hợp Bootstrap vào dự án thông qua npm. Thực chất, Bootstrap được viết thằng scss [một dạng CSS Preprocessor], còn css mà bạn nhúng vào web là kết quả của việc xây dựng scss. Vì thế, nếu muốn tùy biến kiểu đúng cách, bạn cần tùy biến ở phần scss
Xem thêm việc làm CSS tăng lương trên TopDev
Lợi ích của tùy biến phong cách làm việc bằng scss
- Sử dụng lợi thế của CSS Preprocessor, cụ thể trong trường hợp này là scss
- Css build ra sẽ được minify và gọn gàng trong 1 file css duy nhất
- Dễ dàng tùy chỉnh lại các kiểu của Bootstrap nếu nó không đúng ý bạn
Một vài trường hợp điển hình khi tùy chọn biến lại kiểu của Bootstrap có thể được kể đến như
2. 1 Customize the number of component used to used
Mặc định, Bootstrap cung cấp một số lượng tương thích cho các thành phần, ví dụ như. Alert, Button, Modal, Card, List,… Tuy nhiên, không phải lúc nào chúng ta cũng sử dụng hết các thành phần này trong dự án. Vì thế, chúng ta chỉ nên nhập các thành phần được sử dụng trong dự án, để tạo tệp css khi xây dựng được tối ưu nhất
Tài liệu của Bootstrap cũng có nhắc tới mục này, bạn có thể đọc tại đây. Trên blog, trong bài viết Tích hợp Bootstrap css vào dự án thế nào là tốt nhất mình cũng có nhắc tới. Các bạn có thể tham khảo thêm
2. 2 Tùy biến kiểu bằng cách điều chỉnh biến scss
Giả sử bạn muốn tùy biến lại kiểu dáng của Bootstrap, ví dụ bạn muốn đổi màu chính của Bootstrap từ màu xanh dương thành màu xanh lá cây chẳng hạn. Có 02 cách giúp bạn thực hiện điều này
- Cách 1. Ghi lại tất cả các thuộc tính liên quan tới màu từ xanh lam thành xanh lục [ghi đè màu viền, màu nền, màu,. ] của các lớp mà Bootstrap đã xây dựng sẵn [btn-primary, text-primary, border-primary,…]
Cách 1 này dễ, chẳng cần nói thì bạn cũng biết. Nhưng làm sao bạn xác định được hết nhỉ, vì class trong Bootstrap có rất nhiều. Quay lại, bạn sẽ sớm nhận ra đây không phải là cách hay ngay khi đọc cách 2 dưới đây
- cách 2. Tìm biến
$primarytrong tệp _variables. scss and change to color green
Bootstrap cung cấp sẵn cơ chế cho mình tùy biến kiểu [màu sắc, bóng hộp, phông chữ,…] trong tệp _variables. scss, bạn chỉ cần ghi đè lại thông tin cho đúng ý đã được
Bạn có thể tham khảo nội dung của tệp _variables. scss của Bootstrap tại đây
Đương nhiên, với cách 2 bạn không nên ghi đè trực tiếp trong tệp _variables. scss của Bootstrap, mà nên tạo một tệp mới [VD _custom-variables. scss], sau đó cho tệp này tải sau tệp _variables. scss
2. 3 Thêm màu bằng cách thêm vào $theme-colors
Mặc định, Bootstrap cung cấp các màu có sẵn là. chính, phụ, thành công, nguy hiểm, cảnh báo, thông tin, ánh sáng, bóng tối
Các màu trên cũng sẽ đi kèm với các thành phần, như với nút, thì ta có btn-chính, btn-phụ,… với văn bản, ta cũng có văn bản-chính, văn bản-phụ,…
Giả sử một ngày trời đẹp, mình cần thêm 01 màu nữa là âm bản, và mình cũng muốn các thành phần khác có chung màu này [âm bản btn, âm bản,…] thì mình sẽ làm thế nào?
Cách đơn giản và hay nhất là khai báo thêm màu cho Bootstrap như sau
// _custom-variables.scss // Tạo các màu muốn bổ sung $custom-colors: [ "negative": red // Nếu muốn thêm các màu khác, thì cũng viết nốt vào đây ]; // Merge vào biến $theme-colors của Bootstrap $theme-colors: map-merge[$theme-colors, $custom-colors];
3. Đừng cố sử dụng Grid System để chia bố cục cho các thành phần nhỏ
Bootstrap cung cấp Grid system để giúp chúng ta chia bố cục web dễ dàng hơn. Nhưng layout web mà chúng ta hiểu nên là các thành phần có kích thước lớn và độc lập trên website, VD như header, footer, các cột trên website chứ không phải là các thành phần nhỏ, tiểu tiết
Mặt khác, nếu bạn cho ý kiến, thì các lớp .col-*-* của Bootstrap sẽ có padding là 15px, vậy giữa nội dung của 02 cột Đặt cạnh nhau sẽ tùy chọn một khoảng là 30px, và khoảng cách này là cố định, nếu biến sẽ rất lớn . 30px là khoảng cách hợp lý giữ 02 thành phần lớn trên trang web, chứ không phải với các thành phần chi tiết nhỏ, 30px là một khoảng cách lớn
Trong trường hợp bạn cần chia bố cục cho các thành phần nhỏ, hãy thử tham khảo tiện ích Flex của Bootstrap
Để hiểu rõ hơn ý ở phần này, mình sẽ minh họa bằng một ví dụ. Giả sử mình cần tạo kiểu cho thành phần [phần được khoanh đỏ] trong thiết kế sau
Nếu sử dụng hệ thống lưới, bạn có thể viết mã như sau