Trang web thực hành css

Khám phá bộ sưu tập các khóa học ngày càng tăng của chúng tôi về các chủ đề thiết kế và phát triển web chính. Một chuyên gia trong ngành đã viết từng khóa học, được trợ giúp bởi các thành viên của nhóm Chrome. Theo dõi các mô-đun một cách tuần tự hoặc nhúng vào các chủ đề bạn muốn tìm hiểu nhất

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

Trang chủ getbootstrap. com

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 bootstrap

npm 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 $primary trong 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

// _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);

// _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);