Bootstrap so với tailwind so với vật liệu

Bulma - Bulma là một khung CSS nguồn mở dựa trên Flexbox và được xây dựng bằng Sass. Nó đáp ứng 100%, đầy đủ mô-đun và có sẵn miễn phí

Giao diện người dùng phần tử - Element, Vue 2. 0 dựa trên thư viện thành phần dành cho nhà phát triển, nhà thiết kế và người quản lý sản phẩm

Chúng tôi đang trải qua thời kỳ phục hưng của các nền tảng web tuyệt vời và thiết kế đáp ứng. Giao diện người dùng đáp ứng hầu hết được triển khai với các thư viện như Bootstrap, Foundation, Bulma hoặc các truy vấn phương tiện kiểu cũ tốt

Điều gì sẽ xảy ra nếu có một số cách để đạt được giao diện người dùng đáp ứng mà không bị ràng buộc bởi các nguyên tắc của bất kỳ bộ giao diện người dùng nào?

vì vậy câu trả lời là CÓ, chúng tôi có hai Công nghệ mới trong số chúng tôi —
Materialize CSS và Tailwind CSS , hãy khám phá chúng……

nút

Biểu tượng

Các hình thức

phương thức

Để biết thêm về Materialize CSS và xem tất cả các tính năng của nó, hãy vào đây

2. Bootstrap

Thường được gọi là "khung giao diện người dùng phổ biến nhất thế giới", Bootstrap là một khung cho phép bạn nhanh chóng thiết kế và tùy chỉnh các trang web ưu tiên thiết bị di động đáp ứng

Lưu ý thuật ngữ "ưu tiên thiết bị di động", trước khi bootstrap được giới thiệu, các nhà phát triển phải viết các truy vấn phương tiện cho các kích thước màn hình khác nhau và thậm chí sau đó "độ phản hồi" của các trang web không được tốt lắm. Nhưng Bootstrap đã thay đổi hoàn toàn cuộc chơi khi nó ra mắt. Giờ đây, việc tạo các trang web trông tuyệt vời trên màn hình nhỏ và thiết bị di động là một miếng bánh. Với các lớp phản hồi của nó, giờ đây bạn có thể xác định trang web của mình sẽ trông như thế nào ở các chế độ xem khác nhau mà không cần phải rời khỏi tệp HTML của mình

Rất nhiều thứ đã thay đổi kể từ khi bootstrap được phát hành lần đầu tiên, giờ đây bootstrap có các biến Sass và mixin, hệ thống lưới đáp ứng, các thành phần dựng sẵn mở rộng và các plugin JavaScript mạnh mẽ

Một số ưu điểm chính của Bootstrap là

• Ít lỗi trình duyệt chéo hơn

• Nhẹ và có thể tùy chỉnh

• Cập nhật thường xuyên. Nó cung cấp các bản cập nhật thường xuyên và làm cho toàn bộ hệ sinh thái trở nên mạnh mẽ và bền vững theo thời gian

Một lần nữa, với ưu đi kèm với khuyết điểm. Một số nhược điểm nổi bật nhất là

• Có thể yêu cầu nhiều kiểu ghi đè

• Nếu không có tùy chỉnh kiểu, trang web của bạn sẽ trông giống nhau

• Một đường cong học tập nhỏ để tìm hiểu các lớp học và quy trình làm việc

Để cung cấp cho bạn một ý tưởng, đây là cách một số thành phần và kiểu sẽ trông như thế nào trong Bootstrap

• kiểu chữ
  

  

• Nút và nhóm nút
  

  

• thanh điều hướng
  

  

• Các hình thức
  

  

• Nhóm đầu vào
  

  

Để tìm hiểu thêm về Bootstrap, hãy truy cập trang này

3. CSS đuôi gió

Tailwind CSS là một khung được tạo thành hay đúng hơn là được "đóng gói" với các lớp tiện ích. Nó là một khung cấp thấp hơn nhiều so với Bootstrap hoặc Materialize

Bây giờ, "các lớp tiện ích" và "khung cấp thấp hơn" thực sự có nghĩa là gì?

Điều đầu tiên, "Các lớp tiện ích" là các lớp cho phép bạn thực hiện những việc như thêm phần đệm và lề, thay đổi văn bản và màu nền, thay đổi kích thước phông chữ và độ đậm của phông chữ, thêm các góc và đường viền tròn, v.v.

Giờ đây, "khung cấp thấp hơn" có nghĩa là không có thành phần và tiện ích JavaScript được xác định trước hoặc tạo sẵn trong Tailwind CSS. Ý tôi là, không có thứ gọi là "Thẻ" hay "Nút" hay giả sử là "Phương thức"

CÁI GÌTT. Một khung không có thành phần. Boooooo

Tôi biết, tôi biết đây chính xác là những gì tôi nghĩ trong lần đầu tiên dùng thử Tailwind. Nhưng thực tế là không có thành phần được xác định trước nào trong Tailwind mới là điều khiến nó trở nên tuyệt vời (Thông tin thêm về điều đó sau). Điều tôi muốn nói ở đây là bạn có thể tạo các thành phần của riêng mình và tạo kiểu cho chúng theo cách bạn muốn. Các lớp như flex, pt-4, text-center và rotate-90 có thể được kết hợp để xây dựng bất kỳ thiết kế nào, trực tiếp trong phần đánh dấu của bạn

Bây giờ, giả sử bạn muốn tạo một thành phần Thẻ, đây là cách bạn sẽ thực hiện

  

  

    

      

    
    

      
Case study
      Finding customers for your new business
      
Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
    
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và đây là kết quả cuối cùng sẽ như thế nào

Bây giờ người ta có thể lập luận rằng không phải cách kết hợp các lớp này hiệu quả hơn và nó có làm cho mã trở nên dư thừa hơn không? . Làm sao?

Hãy xem nào

• Mặc dù bạn có thể nhìn vào một trang web và biết ngay rằng nó được tạo bằng Bootstrap hoặc Materialize, nhưng bạn thực sự không thể làm điều đó với Tailwind. Và đây là sức mạnh mà các lớp tiện ích này mang lại cho bạn. Bạn có thể tạo các mẫu và thiết kế hoàn toàn tùy chỉnh một cách nhanh chóng mà không cần phải viết một dòng CSS nào

• Đến điểm thứ hai, Dự phòng. Đúng là việc viết các lớp này có một nhược điểm là phải viết đi viết lại chúng mỗi khi chúng ta cần sử dụng một thành phần tùy chỉnh. Tuy nhiên, một cách khắc phục dễ dàng cho vấn đề này là trích xuất các lớp thành phần bằng @apply. Tailwind sẽ tự động di chuyển các kiểu đó đến cùng một vị trí với các thành phần @tailwind, vì vậy bạn không phải lo lắng về việc sắp xếp thứ tự ngay trong tệp nguồn của mình

Cuối cùng, mặc dù có tất cả các tính năng tuyệt vời này, Tailwind vẫn có một số khuyết điểm

• đánh dấu của bạn trở nên rất dài dòng

• Đôi khi bạn có thể phải làm việc xung quanh khuôn khổ

• Đó là một cái nạng cho những nhà phát triển không biết rõ về CSS

• Phải mất thời gian để trở nên hiệu quả với nó

Sự kết luận

Vì vậy, đó là khá nhiều để đọc eh?

Vâng, nó phụ thuộc vào sở thích và nhu cầu của bạn. Ví dụ: nếu bạn không lo lắng về việc tất cả các trang web của mình trông giống nhau và bạn thực sự muốn một khung có các thành phần và tiện ích tích hợp, hãy truy cập Materialize (nếu bạn cũng muốn trang web của mình trông như thể nó đã triển khai Tài liệu của Google

Nhưng nếu bạn thực sự muốn có một thiết kế và các thành phần hoàn toàn tùy chỉnh mà không cần phải viết nhiều CSS và truy vấn phương tiện thì chắc chắn hãy sử dụng Tailwind CSS. Nó có thể hơi khó học và ban đầu bạn có thể không thích nó, nhưng hãy thử sử dụng nó trong một vài dự án và tôi chắc chắn rằng bạn sẽ bắt đầu yêu thích nó

Tailwind có tốt hơn Bootstrap không?

Tailwind hay material UI cái nào tốt hơn?

Bootstrap hay vật liệu nào tốt hơn?

Bootstrap hay Tailwind nhanh hơn?