Top 5 lựa chọn thay thế Bootstrap

Bootstrap có ở khắp mọi nơi, nhưng nó không phải lúc nào cũng là công cụ phù hợp cho công việc. Dưới đây là một số lựa chọn thay thế tuyệt vời!


Nếu bạn kiểm tra mã nguồn của một trang web, một cách ngẫu nhiên vào những ngày này, rất có thể bạn sẽ tìm thấy Bootstrap bên dưới. Tất cả chúng ta đã trở nên quen thuộc với các khái niệm như container-liquid, row, col-sm-6, v.v., đến nỗi nó khó có thể tưởng tượng rằng bất kỳ phong cách phát triển front end nào khác đều có thể. Và vì vậy, khi chúng tôi phải xây dựng dự án tiếp theo, chúng tôi vô tình tiếp cận Bootstrap. Điều đó nói rằng, sự phổ biến không phải là cách làm cho Bootstrap phù hợp với mọi dự án và nhu cầu.

Trong thực tế, đối với các mặt trận thực sự nạc, tải tất cả Bootstrap CSS và JS có thể gây ra sự phình to.

Bài viết này có hai mục đích:

  1. Cung cấp các lựa chọn thay thế trực tiếp không giống Bootstrap cho Bootstrap
  2. Giải thích lý do tại sao bạn có thể muốn xem xét các lựa chọn thay thế này trên Bootstrap

Tôi nghĩ phần giải thích thực sự quan trọng bởi vì trong hầu hết các trường hợp, mọi người không đồng ý nhận ra rằng họ có vấn đề hoặc họ làm cho công việc của họ khó khăn hơn bằng cách chọn Bootstrap. Cuối cùng, xin lưu ý rằng đây không phải là một bài chống Bootstrap bằng bất kỳ phương tiện nào. Tôi yêu Bootstrap 4 và sử dụng nó bất cứ khi nào tôi có thể. Nhưng, sau đó, tôi là một nhà phát triển cá nhân phải nghĩ đến việc sử dụng giải pháp phổ biến nhất; Ngoài ra, tôi không phải là nhà phát triển giao diện người dùng, vì vậy tôi không lo lắng về quá nhiều thứ khi xây dựng giao diện của mình.

Và với điều đó, hãy để có một cái nhìn về những gì chúng ta có.

Lưới Flexbox

Hãy suy nghĩ về nó trong một phút: lý do lớn nhất bạn bắt đầu sử dụng Bootstrap và vẫn đang sử dụng nó là hệ thống lưới của nó. Chắc chắn, nó đã làm quen với các hàng, col-md-6, v.v., các lớp, nhưng bây giờ nó có tính chất thứ hai để nghĩ về cách bố trí theo các hàng, cột, offset, v.v..

Và nếu bạn trung thực với chính mình, bạn sẽ thấy rằng mọi thứ khác trong Bootstrap là một chút việc để làm. Có rất nhiều lớp để ghi nhớ, cho dù bạn đang thực hiện các biểu mẫu, điều hướng, nút, bảng hoặc bất cứ thứ gì khác. Nếu bạn giống như tôi, bạn vẫn chưa quen với tất cả các lớp và những gì họ làm và bạn thường chỉ sử dụng Bootstrap cho lưới và tự viết tất cả các CSS khác.

Nếu có, bạn có thể làm tốt hơn rất nhiều với Lưới Flexbox.

Lưới Flexbox, như tên cho thấy, là một hệ thống lưới dựa trên CSS Hộp linh hoạt tính chất. Tuy nhiên, không giống như kỹ thuật CSS, tất cả sự phức tạp được trừu tượng hóa một cách độc đáo để bạn chỉ tập trung vào việc đặt các yếu tố theo cách bạn muốn. Phần tốt nhất là tất cả các mã và tên lớp bắt chước những gì bạn muốn trong Bootstrap 4, có nghĩa là chuyển đổi giữa hai công cụ này không cần ma sát tinh thần. Chẳng hạn, ở đây, LỚP, mã nào cho không gian trên mạng xung quanh, trông giống như trong Lưới Flexbox:

xung quanh

xung quanh

xung quanh

Tệp CSS được rút gọn cho hệ thống lưới này chỉ là 10,7 KB giúp bạn tiết kiệm hàng trăm KB ở kích thước tải xuống cuối cùng. Ngày nay, Flexbox Grid là sở thích của tôi vì tôi không muốn chiến đấu với Bootstrap để tùy chỉnh nó hoàn toàn. Tôi thích bắt đầu với các yếu tố vanilla và tự tạo kiểu cho chúng, sử dụng Lưới Flexbox bất cứ nơi nào tôi cần.

Học hỏi Flexbox ở đây, trực tuyến.

PureCSS

Sẽ rất tốt nếu Bootstrap được chia thành các mô-đun và bạn chỉ có thể nhập mô-đun bạn cần?

Tốt, PureCSS đã đi trước và thực hiện điều đó – đó là một bộ mô-đun bao gồm các khu vực chức năng khác nhau của một trang web. Bạn có thể chọn tải xuống một hoặc tất cả, nhưng kích thước tải xuống won vượt quá 3,7 KB!

Bạn đã đọc đúng.

Tất cả các mô-đun khi được bó lại với nhau và được nén là 3,7 KB, mặc dù riêng lẻ chúng có giá trị lớn hơn. Mô-đun lưới chỉ là 0,8 KB, trong khi mô-đun cơ sở là 1,0 KB. Đội ngũ đằng sau PureCSS nói rằng nó được xây dựng hoàn toàn với các thiết bị di động, và vì vậy mọi dòng CSS đều được xem xét kỹ lưỡng về hiệu quả trước khi đưa vào.

Vì vậy, hãy nói với bạn rằng bạn chỉ cần mô-đun lưới và biểu mẫu. Chà, chỉ cần tải xuống hai cái này (cùng với mô-đun Cơ sở), và bạn đã hoàn thành trong vòng chưa đầy 3,4 KB! Không cần bao gồm CSS từ các mô-đun Nút, Bảng và Menu nếu bạn không sử dụng chúng.

Mặc dù vậy, PureCSS có các lớp của nó và mã kết quả không giống với Bootstrap mà bạn có thể rất quen thuộc:

Lorem

Dolor Sit Amet

Lao động thường xuyên

Lời khen ngợi

Bạn có thể nhận thấy rằng không còn lưới 12 cột nữa. PureCSS có hệ thống lưới của nó chỉ định chiều rộng của một cột. Vì vậy, Pure-u-lg-1-4 có nghĩa là phần tử này sẽ chiếm 1/4 hoặc 25% chiều rộng có sẵn trên màn hình lớn. Chiều rộng là bội số của 1/5 cũng có sẵn.

Nói chung, PureCSS là một công cụ CSS (khung?) Tự do và tuyệt vời mà bạn có thể chọn và chọn khi cần. Điều đó nói rằng, nó đi kèm với một lượng mua và học tập hợp lý khi bạn cần học một cách làm việc mới (hơi khác biệt).

PureCSS cũng có các lớp riêng và kiểu dáng mặc định, do đó, nó không quá khác biệt so với Bootstrap.

Zimit

Các Zimit khuôn khổ là một loại người kỳ quặc trong danh sách này. Đúng, nó có một khung để xây dựng UI, nhưng nó hướng tới các loại UI cụ thể: mockup.

Có những lúc bạn phải phát triển front-end để hiển thị chức năng của sản phẩm. Tất nhiên, cách lý tưởng để thực hiện điều này là lôi kéo một nhà thiết kế / nhà phát triển giao diện người dùng tham gia và tạo ra các mô hình trên một trong những công cụ tạo khung dây tiên tiến (Moqups, Blasmic, v.v.). Các trang sẽ là pixel hoàn hảo, bảng màu đẹp và được chọn tốt, và các trang sẽ được mở để tham gia, đánh giá, nhận xét, v.v..

Nhưng cuộc sống thực không lý tưởng, và thường thì bạn là người đàn ông duy nhất trong công việc và phải đội tất cả những chiếc mũ và hoàn thành công việc. Vào những thời điểm đó, bạn muốn có một khung:

  • Cho phép bạn viết mã bằng HTML / CSS
  • Là nhẹ
  • Có một bộ sưu tập lớn các thành phần cơ bản
  • Có một ngôn ngữ phong cách phù hợp và nhất quán
  • Nếu có thể, giống với tông màu xám xám của thiết kế khung dây
  • Dễ học
  • Có một số tiền xử lý CSS tích hợp sẵn

Zimit kiểm tra tất cả các hộp này. Nó có kích thước chỉ 84 KB và có nhiều loại linh kiện để lựa chọn. Dưới đây là một số ví dụ mà tôi thấy thực sự hấp dẫn, vì tự mình viết mã chúng sẽ mất rất nhiều thời gian.

Xem cây

Bánh mì

Tab

Có rất nhiều goodies để khám phá. Kiểm tra chúng đây.

Hãy để xem xét các mã trông như thế nào. Ở đây, cách thức bạn sử dụng hệ thống lưới trong Zimit:

4 cột
4 cột

4 cột
4 cột

Cái tên Cv ở đây là viết tắt của cột, trong đó, vì vậy, c4, có nghĩa là một cột kéo dài bốn đơn vị (lưới có kích thước 12, giống như Bootstrap lên). Rất giống với Bootstrap, và rất trực quan, theo ý kiến ​​của tôi.

Nói chung, Zimit là một khung hoàn chỉnh và dễ dàng để phát triển các nguyên mẫu UI đáp ứng nhanh và nhìn tốt. Nó tốt hơn Bootstrap (khi nói về tạo mẫu) bởi vì Bootstrap là một bản tải xuống lớn hơn nhiều và thiết kế kết quả là, tốt, khó khăn.

Khởi động HTML

Trong hầu hết các dự án bạn xây dựng, tốc độ là rất quan trọng. Rào cản lớn nhất đối với tốc độ phát triển web là phần đầu, và phần lớn nhất của del delayer trong phát triển front-end là nhu cầu mã hóa các thành phần tương tác, thanh lịch. Vì có nhiều cách mà một thành phần có thể hoạt động và có nhiều kích thước màn hình để quản lý, mã hóa và quản lý các thành phần có thể trở thành cơn ác mộng đối với nhà phát triển.

Khởi động HTML cung cấp một sự thay thế.

Đơn giản thôi; nó là một bộ sưu tập các thành phần thực sự đẹp mà bạn có thể thả vào các dự án của mình và giảm thời gian phát triển một cách quyết liệt. Dưới đây là một số thành phần tốt đẹp tôi tìm thấy:

Thả xuống

nút

Tab (ở giữa và có biểu tượng)

Cụ thể hoá

Nếu bạn thích Bootstrap vì thực tế là nó có giải pháp sẵn sàng cho tất cả các sự cố thiết kế web phổ biến, nhưng bạn là một người hâm mộ phong cách thiết kế Vật liệu, bạn nên thử Cụ thể hoá.

Materialize chủ yếu giống như Bootstrap – hệ thống lưới 12 điểm, độ lệch và các thành phần quen thuộc như biểu mẫu, thẻ, v.v. Tuy nhiên, nó có một số tính năng nhất định có thể thu hút nhiều người.

Đẩy-kéo

Tính năng đẩy / kéo của Materialize CSS cho phép bạn sắp xếp lại các cột. Điều này gợi nhớ đến tiêu chuẩn Lưới CSS mới, trong đó bố cục khác với thứ tự phần tử.

Div này rộng 7 cột được đẩy sang phải bởi 5 cột.
5 cột rộng được kéo sang trái bởi 7 cột.

Điều này dẫn đến kết quả như sau:

Bạn có thể nhận thấy rằng các cột đã chuyển vị trí, đó là điều có lẽ không thể thực hiện được trong CSS dựa trên Bootstrap truyền thống.

Đồ dùng JavaScript

Có khá nhiều tính năng và hiệu ứng JavaScript đi kèm với Materialize. Tooltips, Toasts (thông báo phù du giống như Android), Parallex, Pushpin, v.v., là một số trong số đó. Một hiệu ứng thực sự tuyệt vời mà tôi thích là FeatureDiscovery, về cơ bản cho phép bạn làm nổi bật một yếu tố trên trang trên một số sự kiện (giả sử, nhấn nút) để khiến người dùng chú ý đến yếu tố đó. Thật khó để mô tả nó bằng từ ngữ một cách đầy đủ, vì vậy hãy truy cập https: // m vậtizecss.com/feature-discovery.html để xem ý tôi là gì.

Nói chung, Materialize là một sự thay thế tuyệt vời cho Bootstrap hoặc cho những ai muốn áp dụng khung CSS Vật liệu đầy đủ tính năng.

Phần kết luận

Bootstrap đồng nghĩa với thiết kế đáp ứng. Đó là Bootstrap đã phổ biến thuật ngữ thiết kế đầu tiên trên điện thoại di động và cho thấy nó có thể được thực hiện như thế nào. Nhưng trong khi Bootstrap hoàn thành công việc hầu hết thời gian, thì chỉ cần hoàn thành công việc là không đủ. Nếu bạn cảm thấy Bootstrap đang hạn chế bạn và nhu cầu của bạn là đặc biệt, một trong những tùy chọn được liệt kê ở đây sẽ giúp ích. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map