Trong phát triển web, biểu định kiểu xếp tầng [CSS] được sử dụng để định kiểu HTML. Bạn có thể viết vanilla CSS, sử dụng khung CSS, sử dụng bộ tiền xử lý như Sass hoặc sử dụng kết hợp cả ba để tạo kiểu cho trang web của mình. Có nhiều cách khác nhau để sử dụng CSS và nhiều công cụ để lựa chọn. Bạn có thể đã nghe nói về Bootstrap hoặc Tailwind CSS được đề cập ở đây và ở đó trong khi tìm kiếm một khung hoặc công cụ để sử dụng trong dự án của bạn. Cả hai đều là khung CSS có thể giúp tăng tốc thời gian sản xuất — nhưng giữa hai khung này, bạn nên sử dụng khung nào?
Giới thiệu về Khung CSS Bootstrap
Bootstrap ban đầu được phát hành vào ngày 19 tháng 8 năm 2011. Ban đầu nó được tạo ra bởi các nhà thiết kế và nhà phát triển tại Twitter và từng được gọi là “Twitter Blueprint”. Sau khi Twitter tổ chức cuộc thi hackathon của riêng họ và công khai dự án dưới dạng một khung nguồn mở, dự án đã thành công khi các nhà phát triển khác tham gia để giúp phát triển nó. Bootstrap vẫn miễn phí và mã nguồn mở theo giấy phép MIT
Khung Bootstrap tốt nhất có thể được mô tả như một khung dựa trên thành phần. Các khung CSS dựa trên thành phần được tạo thành từ các thành phần hoặc bộ phận được xác định trước, có thể được sử dụng để tạo kiểu HTML, giúp việc phát triển trang web đáp ứng nhanh hơn và dễ dàng hơn
Thí dụ
Mật mã
This is a card made with Bootstrap
Kết quả
Bố cục
Các lớp bố cục giúp cấu trúc bố cục tổng thể của trang web. Bootstrap dựa trên hệ thống mười hai cột sử dụng lưới flexbox để xây dựng bố cục. Như bạn có thể nhận thấy trong ví dụ trên, container
, row
và col-*
là một số lớp bố cục của Bootstrap
- Các thùng chứa là nền tảng của khung Bootstrap CSS. Chúng chứa, đệm và căn chỉnh nội dung
- Hàng được ví như “máng xối. ” Máng xối thêm phần đệm giữa các cột và được sử dụng để tạo khoảng cách và căn chỉnh nội dung
- Các cột xây dựng kiến trúc lưới của Bootstrap. Bạn có thể quyết định cách các cột tăng hoặc giảm bằng cách sử dụng các lớp
col-*
. Trong ví dụ trên,col-12
có nghĩa là làm cho nội dung sử dụng hết tất cả mười hai khoảng cách cột hoặc toàn bộ chiều rộng của vùng chứa. Sau đó, trên màn hình cỡ trung bình và lớn hơn, chúng tôi chỉ muốn nội dung chiếm ba khoảng cách cột. Chúng ta có thể dễ dàng thực hiện điều này bằng cách sử dụng lớpcol-md-3
Các thành phần
Các lớp thành phần là các lớp Bootstrap được xác định trước để tạo kiểu cho các thành phần HTML. Bởi vì Bootstrap là một framework dựa trên thành phần, nên nó đương nhiên chứa rất nhiều thành phần được xác định trước để bạn sử dụng, chẳng hạn như thành phần card
đã được sử dụng trong ví dụ trên. Nó giúp tạo kiểu cho giao diện người dùng hoặc giao diện người dùng nhanh hơn đáng kể. Một số thành phần mà bạn có thể thấy mình sử dụng thường xuyên là
- Accordions đóng và mở nội dung accordion theo chiều dọc
- Băng chuyền xoay vòng qua các yếu tố như hình ảnh hoặc văn bản giống như bản trình chiếu
- Danh sách thả xuống là lớp phủ có thể chuyển đổi để hiển thị nội dung, chẳng hạn như danh sách liên kết
- Nút kiểu lớp thành phần nút cho hành động trong biểu mẫu, hộp thoại, v.v.
- Thẻ là vật chứa nội dung linh hoạt
tiện ích
Các lớp tiện ích là các lớp nhỏ và tối thiểu được sử dụng để tạo kiểu HTML nhanh chóng. Bootstrap có nhiều trong số này nên bạn không cần phải viết riêng. Trong ví dụ trên, chúng tôi đã sử dụng các lớp tiện ích mt-3
và mb-3
để thêm lề vào thẻ. Một số lớp tiện ích Bootstrap hữu ích là
- Các lớp tiện ích hiển thị có thể nhanh chóng và đáp ứng việc chuyển đổi hiển thị các thành phần và hơn thế nữa. Bạn có thể ẩn một thành phần bằng cách sử dụng
container
0 cho kích thước màn hìnhcontainer
1 và hiển thị chúng khi màn hình làcontainer
2 hoặc lớn hơn bằng cách sử dụngcontainer
3 - Các lớp tiện ích tạo khoảng cách có thể nhanh chóng thêm lề hoặc phần đệm vào các phần tử HTML. Giống như ví dụ trên, chúng tôi đã sử dụng
mt-3
để thêm lề trên củacontainer
5, trong đócontainer
5 bằng 1rem - Các lớp tiện ích văn bản có thể nhanh chóng kiểm soát căn chỉnh văn bản, ngắt dòng, trọng lượng, v.v. Bạn có thể nhanh chóng căn giữa văn bản bằng cách sử dụng
container
7 hoặc tăng kích thước phông chữ lên thẻ H1 bằng cách sử dụngcontainer
8 hoặc thậm chí là trọng lượng bằng cách sử dụngcontainer
9
Giới thiệu về Khung CSS Tailwind
Bản phát hành alpha đầu tiên của Tailwind CSS là vào ngày 1 tháng 11 năm 2017 theo lịch sử phát hành GitHub của nó. Sau 43 bản phát hành khác và hơn 2.200 lượt cam kết từ 88 cộng tác viên, bản phát hành ổn định đầu tiên, Tailwind CSS v1. 0, được thực hiện vào ngày 13 tháng 5 năm 2019. Giống như Bootstrap, Tailwind là một dự án mã nguồn mở miễn phí có giấy phép MIT
Tailwind CSS tốt nhất có thể được mô tả như một khung "tiện ích đầu tiên". Các khung ưu tiên tiện ích bao gồm các lớp nhỏ, đơn giản có thể được áp dụng cho các thành phần để tạo giao diện người dùng hoặc giao diện người dùng. Nhìn bề ngoài, việc sử dụng Tailwind trông không quá khác biệt so với việc viết các kiểu nội tuyến. Tuy nhiên, những gì khuôn khổ này cung cấp là khả năng tùy biến. Thay vì bị hạn chế bởi các thành phần tạo sẵn từ Bootstrap, về cơ bản, bạn có thể tạo giao diện người dùng của riêng mình với Tailwind để đáp ứng nhu cầu của dự án
Thí dụ
Mật mã
row
0
Kết quả
tiện ích
Khung CSS Tailwind cốt lõi chỉ cung cấp các lớp tiện ích. Nếu chúng ta muốn tạo kiểu cho một thành phần HTML, chúng ta phải làm như vậy chỉ bằng cách sử dụng các lớp tiện ích và áp dụng chúng cho các phần tử HTML khác nhau. Nhìn thoáng qua, nó rất giống với kiểu dáng nội tuyến
- Các lớp tiện ích
row
1 vàrow
2 có thể được sử dụng để tạo hộp chứa flexbox vớirow
3 đi theo hướng cột - Lớp tiện ích
row
4 có thể được sử dụng để thay đổirow
3 từ cột này sang hàng khác khi kích thước màn hình là trung bình [768px] hoặc lớn hơn - Các lớp tiện ích
row
6 vàrow
7 có thể được sử dụng để tăng hoặc giảm khoảng cách giữa các phần tử con - Các lớp tiện ích
row
8,row
9 vàcol-*
0 có thể được sử dụng cùng nhau để thêm đường viền tròn màu xám xung quanh phần tử
Các thành phần
Khung CSS Tailwind cốt lõi không cung cấp các lớp thành phần. Tuy nhiên, bạn có thể trả tiền để nhận trực tiếp các thành phần giao diện người dùng chính thức thông qua Tailwind hoặc tìm miễn phí một số thành phần nguồn mở hoặc do cộng đồng tạo ra. Bạn cũng có thể tạo các lớp thành phần của riêng mình bằng cách sử dụng lệnh @apply của Tailwind để trích xuất các mẫu tiện ích lặp lại thành các lớp CSS tùy chỉnh
So sánh CSS của Bootstrap và Tailwind
Như bạn có thể thấy từ các ví dụ trên, hai khung khác nhau khá nhiều. Bootstrap có sẵn các thành phần giao diện người dùng, vì vậy tất cả những gì bạn phải làm là thêm nội dung và hương vị của mình vào đó. Các lớp bố cục và tiện ích của Bootstrap cung cấp cho bạn mọi thứ bạn cần để tạo kiểu cho một trang web đáp ứng. Tuy nhiên, với Tailwind, bạn tham gia nhiều hơn vào việc tạo kiểu trang web vì cuối cùng bạn phải tạo các thành phần của riêng mình bằng cách sử dụng các lớp tiện ích mà khung cung cấp
Đừng để việc thiếu linh kiện của Tailwind đánh lừa bạn. Mặc dù là framework ưu tiên tiện ích nhưng Tailwind vẫn dựa trên thành phần. Bằng cách trích xuất các tiện ích thành các thành phần hoặc các phần mẫu hoặc sử dụng chỉ thị col-*
1, bây giờ bạn có một thành phần. Cả hai khung đều được tạo ra để đáp ứng và cả hai đều nhằm mục đích giúp phát triển nhanh hơn so với việc không có bất kỳ khung nào
- Đi kèm với bố cục đáp ứng, các thành phần và các lớp tiện ích
- Ít linh hoạt hơn Tailwind
- Kích thước tệp lớn hơn Tailwind do các tệp bắt buộc
- Đã tồn tại lâu hơn Tailwind rất nhiều và là một trong những framework phổ biến nhất
- Các trang web được xây dựng bằng Bootstrap được biết đến với khả năng đáp ứng và thiết kế hoàn hảo
- Các nhà phê bình nói rằng các trang web được xây dựng bằng Bootstrap trông giống nhau
- Đi kèm với nhiều lớp tiện ích hơn Bootstrap
- Core không có các lớp thành phần hoặc bố cục
- Linh hoạt hơn Bootstrap
- Có thể giảm kích thước tệp bằng PurgeCSS để xóa các lớp không sử dụng
- Một khuôn khổ mới hơn đang trở nên phổ biến
- Các nhà phê bình cho rằng việc sử dụng Tailwind CSS khiến mã của bạn khó đọc
bản án
Vậy, bạn nên sử dụng khung CSS nào? . Nếu dự án của bạn không khác quá nhiều so với một số bố cục phổ biến hơn hoặc bạn là nhà phát triển phụ trợ hoặc nhà phát triển toàn diện, thì Bootstrap có thể là khung tốt hơn. Nếu dự án của bạn yêu cầu nhiều tùy chỉnh giao diện người dùng, không tuân theo bố cục chung hoặc nếu bạn có nhiều kinh nghiệm hơn với CSS, thì Tailwind có thể là lựa chọn tốt hơn
Còn nhiều điều nữa về Bootstrap và Tailwind. Kiểm tra tài liệu của họ để tìm hiểu thêm về các khung và để xác định khung nào phù hợp hơn với nhu cầu của bạn. Nếu bạn gặp khó khăn và đang tìm kiếm sự trợ giúp về phát triển web, hãy liên hệ với các chuyên gia tại Hall