Hướng dẫn should i learn bootstrap or tailwind - tôi nên học bootstrap hay tailwind

Trong phát triển web, các bảng kiểu xếp tầng (CSS) được sử dụng để tạo kiểu HTML. Bạn có thể viết vani CSS, sử dụng khung CSS, sử dụng bộ xử lý 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 bạn. Có nhiều cách khác nhau để sử dụng CSS và nhiều công cụ để 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. Họ có cả hai 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 cái nào?

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 biết đến với tên gọi là Twitter Twitter. Sau khi Twitter tổ chức hackathon của riêng họ và công khai dự án như một khuôn khổ có nguồn gốc mở, dự án Snowballed khi các nhà phát triển khác tham gia để giúp phát triển của nó. Bootstrap vẫn miễn phí và nguồn mở theo giấy phép MIT.

Khung Bootstrap có thể được mô tả tốt nhất là 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 được xác định trước hoặc các bộ phận, có thể được sử dụng để tạo kiểu HTML, giúp phát triển trang web đáp ứng nhanh hơn và dễ dàng hơn.

Example:

Mật mã:

  

    

      

        

        

          

This is a card made with Bootstrap

        

      

    

  

Kết quả:

Bố cục

Các lớp bố trí 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ố trí Bootstrap.

• Container là nền tảng của khung Bootstrap CSS. Chúng chứa, pad, và căn chỉnh nội dung. are the foundation of the Bootstrap CSS framework. They contain, pad, and align content.
• Hàng được coi là máng xối của người Viking. Máng xối thêm phần đệm giữa các cột và được sử dụng để không gian và căn chỉnh nội dung. are considered as “gutters.” Gutters add padding between columns and are used to space and align content.
• Cột xây dựng kiến ​​trúc lưới Bootstrap. Bạn có thể quyết định cách các cột phát triển hoặc thu nhỏ bằng cách sử dụng các lớp col-*. Trong ví dụ trên, col-12 có nghĩa là để nội dung sử dụng hết mười hai không gian cột hoặc chiều rộng đầy đủ của container. 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 không gian cột. Chúng tôi có thể dễ dàng thực hiện điều này bằng cách sử dụng lớp col-md-3. build Bootstrap’s grid architecture. You can decide how columns grow or shrink by using the col-* classes. In the example above, col-12 means to make the content use up all twelve column spaces, or the full width of the container. Then, on medium-sized screens and larger, we only want the content to take up three column spaces. We are able to easily accomplish this by using the class col-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 cho các thành phần HTML kiểu dáng. Bởi vì Bootstrap là một khung dựa trên thành phần, nó tự 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ó làm cho việc tạo kiểu giao diện UI hoặc 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 thường xuyên sử dụng là:

• Accordions theo chiều dọc và mở nội dung accordion. vertically close and open the accordion content.
• Băng chuyền chu kỳ qua các yếu tố như hình ảnh hoặc văn bản như trình chiếu. cycle through elements such as images or text like a slideshow.
• Dropdowns là lớp phủ có thể bật để hiển thị nội dung như danh sách các liên kết. are toggleable overlays for displaying content such as lists of links.
• Các nút Thành phần Các lớp Kiểu Kiểu cho các hành động trong các biểu mẫu, hộp thoại, v.v. component classes style buttons for actions in forms, dialogs, etc.
• Thẻ là thùng chứa nội dung linh hoạt. are flexible content containers.

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 để nhanh chóng tạo kiểu HTML. Bootstrap có nhiều trong số này vì vậy bạn không phải tự viết. 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 tỷ suất lợi nhuận vào thẻ. Một số lớp tiện ích bootstrap hữu ích là:

• Hiển thị các lớp tiện ích có thể chuyển đổi nhanh chóng và có trách nhiệm 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 container0 cho kích thước màn hình container1 và hiển thị chúng khi màn hình là container2 hoặc lớn hơn bằng cách sử dụng container3. utility classes can quickly and responsively toggle the display of components and more. You can hide a component by using container0 for container1 screen sizes, and display them when the screen is container2 or larger by using container3.
• Các lớp tiện ích khoảng cách có thể nhanh chóng thêm lề hoặc đệm vào các phần tử HTML. Giống như với ví dụ trên, chúng tôi đã sử dụng mt-3 để thêm biên trên cùng là container5, trong đó container5 bằng 1REM. utility classes can quickly add margin or padding to HTML elements. Like with the example above, we used mt-3 to add a top margin of container5, where container5 is equal to 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, gói, trọng lượng, và nhiều hơn nữa. Bạn có thể nhanh chóng tập trung văn bản bằng cách sử dụng container7 hoặc tăng kích thước phông chữ thành thẻ H1 bằng cách sử dụng container8 hoặc thậm chí trọng lượng bằng cách sử dụng container9. utility classes can quickly control text alignment, wrapping, weight, and more. You can quickly center text by using container7, or increase the font size to an H1 tag by using container8, or even the weight by using container9.

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. Sau 43 bản phát hành và hơn 2.200 cam kết từ 88 người đóng góp, 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 nguồn mở miễn phí với giấy phép MIT.

Tailwind CSS có thể được mô tả tốt nhất như là một khung công tác đầu tiên của tiện ích. 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 phần tử để tạo giao diện người dùng hoặc giao diện người dùng. Nhìn bề ngoài, sử dụng Tailwind không trông quá khác so với các kiểu nội tuyến. Tuy nhiên, những gì khung này cung cấp là khả năng tùy chỉnh. Thay vì bị hạn chế bởi các thành phần tiền đề từ Bootstrap, về cơ bản, bạn có thể tạo UI của riêng mình với Tailwind để đáp ứng nhu cầu của dự án.

Example:

Mật mã:

row0

Kết quả:

Tiện ích

Khung CSS Tailwind Core 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.

• row1 và row2 Các lớp tiện ích có thể được sử dụng để tạo một thùng chứa Flexbox với row3 đi theo hướng cột.
• Lớp tiện ích row4 có thể được sử dụng để thay đổi row3 từ cột sang hàng khi kích thước màn hình trung bình (768px) hoặc lớn hơn.
• Các lớp tiện ích row6 và row7 có thể được sử dụng để tăng hoặc giảm không gian giữa các yếu tố trẻ em.
• Các lớp tiện ích row8, row9 và col-*0 có thể được sử dụng cùng nhau để thêm một đường viền màu xám tròn xung quanh phần tử.

Các thành phần

Khung CSS Tailwind Core không cung cấp các lớp thành phần. Tuy nhiên, bạn có thể trả tiền để có các thành phần UI chính thức trực tiếp thông qua Tailwind hoặc tìm một số thành phần nguồn mở hoặc nguồn mở miễn phí. 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 Chỉ thị TailWind, @Apply để trích xuất các mẫu tiện ích lặp lại vào các lớp CSS tùy chỉnh.

So sánh Bootstrap và Tailwind CSS

Như bạn có thể thấy từ các ví dụ trên, hai khung khác nhau khá nhiều. Bootstrap có các thành phần UI nướng vào đó, 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 bạn vào nó. Các lớp tiện ích và bố cục 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 cho 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ác lớp tiện ích mà khung cung cấp.

Hãy để cho Tailwind thiếu các thành phần đánh lừa bạn. Mặc dù nó là một khung công tác đầu tiên tiện ích, Tailwind vẫn dựa trên thành phần. Bằng cách trích xuất các tiện ích vào các thành phần hoặc một phần mẫu hoặc sử dụng Chỉ thị col-*1, giờ đây bạn có một thành phần. Cả hai khung được tạo ra để đáp ứng và cả hai đều có nghĩa là phát triển nhanh hơn so với không có bất kỳ khung nào.

Phán quyết

Vì vậy, bạn nên sử dụng khung CSS nào? Như mọi khi, nó phụ thuộc vào tình huống của bạn. Nếu dự án của bạn không đi chệch quá nhiều so với một số bố cục phổ biến hơn, hoặc bạn là một nhà phát triển phụ trợ hoặc toàn bộ ngăn xếp, 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 phía trước, thì không theo một bố cục chung hoặc nếu bạn có nhiều dày dạn hơn với CSS, thì Tailwind có thể là lựa chọn tốt hơn.

Có rất nhiều thứ để bootstrap và đuôi. 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 bị mắc kẹt và đang tìm kiếm sự hỗ trợ phát triển web, hãy liên lạc với các chuyên gia tại Hall.