Các trang web phổ biến có sử dụng bootstrap không?

Gần đúng 10 năm trước Bootstrap đã được phát hành. Không lâu sau đó, nó thường xuyên được liệt kê trong CV của các nhà phát triển trong danh sách các kỹ năng kỹ thuật. Vào thời điểm đó, tôi đang làm việc với tư cách là một nhà phát triển full-stack và hầu hết các dự án của tôi đều tuân theo các yêu cầu tương tự. Ngân sách thấp và tham vọng cao

Bootstrap dường như đáp ứng chính xác những nhu cầu đó. Nó cho phép các nhà phát triển có ít kiến ​​thức về giao diện người dùng có thể tập hợp các trang web đẹp mắt ngay lập tức. Với một chút nỗ lực, họ thậm chí đã làm việc trên thiết bị di động. Nó hoạt động, nó bán chạy — ít nhất là trong mắt khách hàng và có lẽ là hầu hết người dùng trang web

Và, mười năm trôi qua, nó vẫn vậy

Theo Wappalyser, có gần 3. 5 triệu trang web ngoài kia vẫn dựa vào Bootstrap. Trang web báo cáo rằng ngay cả những ông lớn cũng thích paypal. com, etsy. com và gitlab. com sử dụng nó

Không có gì sai với nó, trong nhiều trường hợp. Nhưng cũng giống như xu hướng mới nổi của các công cụ xây dựng trang web nhanh như Wix hoặc Squarespace, Bootstrap nhằm mục đích giúp tạo các trang web một cách nhanh chóng và yêu cầu ít hoặc không cần kiến ​​thức về giao diện người dùng. Trọng tâm chưa bao giờ là tạo nội dung có thể truy cập hoặc mã có thể bảo trì. Kết quả là, thật dễ dàng rơi vào cái bẫy tạo ra các trang web cồng kềnh, không thể truy cập được, khiến các nhà phát triển chạy mất dép nếu họ phải thay đổi điều gì đó trong bố cục.

1. Hệ thống lưới

Tính năng phổ biến nhất và vẫn dễ nhận biết nhất của bootstrap có lẽ là hệ thống lưới. Nó tương đối đơn giản để sử dụng. nhìn vào một thiết kế, chia nó thành các cột và gán các lớp cột cho các div của bạn. Đối với bố cục thân thiện với thiết bị di động, bạn có thể thêm các lớp điểm dừng bổ sung. Bạn thậm chí có thể làm cho các cột hoán đổi trên thiết bị di động

Để thực hiện tất cả công việc này, bootstrap sử dụng nhiều điểm ngắt cho các kích cỡ màn hình khác nhau. Mặc dù các điểm ngắt này có thể được điều chỉnh, nhưng các điểm ngắt mặc định là các giá trị dựa trên pixel

Vấn đề với các điểm ngắt dựa trên pixel là chúng không hoạt động tốt đối với khả năng truy cập. Các đơn vị điểm dừng thực sự phải dựa trên kích thước phông chữ của bạn và kích thước phông chữ đó phải là một đơn vị tương đối e. g. EM hoặc REM

Người dùng khiếm thị thường thay đổi kích thước phông chữ mặc định của trình duyệt. Điểm dừng tương đối sẽ đảm bảo thiết kế vẫn hoạt động nếu cài đặt phông chữ của trình duyệt bị thay đổi. Điều đó có nghĩa là bố cục sẽ bị hỏng ở các điểm khác nhau đối với những người dùng khác nhau, tùy thuộc vào cài đặt của họ

Ngoài ra, lưới Bootstrap thêm rất nhiều đánh dấu không cần thiết và không cần thiết vào trang. Với việc IE đang dần mất hỗ trợ, lưới CSS là một tùy chọn nhẹ hơn nhiều. Và nếu bạn cần hỗ trợ các trình duyệt cũ, có rất nhiều mixin flexbox nhẹ đang hoạt động

2. sự sợ hãi. quan trọng

Mọi thứ dưới bootstrap 5. 0 đã sử dụng các lớp float để căn chỉnh nội dung. Chúng đủ đơn giản, dán float-right hoặc float-left vào bất kỳ mục nào để làm cho nó thẳng hàng với hai bên màn hình

Bất kỳ nhà phát triển nào phải tạo một trang web danh mục đầu tư/cv ở trường đại học mà không thể sử dụng bất kỳ công cụ nào sẽ nhớ những khó khăn khi cố gắng làm cho một hình ảnh đẹp mắt trên trang. Các phần tử nổi một cách chính xác là một kỹ năng

Vì vậy, Bootstrap quyết định làm mọi thứ dễ dàng hơn một chút. Nếu bạn đặt một “lớp float” lên một phần tử, bạn hầu như luôn được đảm bảo rằng nó sẽ xuất hiện ở nơi bạn muốn. Đó là bởi vì đây là những gì nó trông giống như dưới mui xe

@mixin float-left {float: left !important;}@mixin float-right {float: right !important;}@mixin float-none {float: none !important;}

Tổng cộng, có 146 lần xuất hiện của !important trong Bootstrap 4

Việc sử dụng các câu lệnh !important trong CSS được coi là thông lệ không tốt và gây khó khăn cho việc bảo trì hoặc điều chỉnh cơ sở mã sau này

Rất may, với Bootstrap 5, số lượng sử dụng giảm xuống còn 19 và các lớp float ở trên được thay thế bằng hệ thống flex

Tuy nhiên, tôi nghi ngờ rằng nhiều trong số hàng triệu trang web đang chạy trên Bootstrap 5. Etsy. com chẳng hạn, vẫn còn trên Bootstrap 2. 0

Đối với các trang web được xây dựng trên hệ thống float/pull, việc nâng cấp có thể quá rủi ro và dường như không cần thiết

3. Hãy để nút là nút

Cái hay của việc sử dụng Bootstrap để tạo bố cục là mọi thứ trông giống như vẻ ngoài của nó chỉ với một lớp duy nhất. Hầu như không quan trọng bạn đang cố gắng tạo kiểu cho yếu tố nào, nếu bạn muốn nó trông giống một cái nút, bạn có thể làm cho nó trông giống một cái nút

Tất cả các yếu tố trên trông giống nhau và hoạt động giống nhau cho đến khi bạn cố gắng truy cập chúng bằng bàn phím. Người dùng bàn phím sẽ sử dụng phím TAB để chuyển đổi giữa các phần tử có thể đặt tiêu điểm — trong ví dụ này, div sẽ không bao giờ nhận được tiêu điểm. Cả hai yếu tố nút và ahref đều có thể đặt tiêu điểm nhưng hơi khác khi tương tác qua bàn phím

Suy nghĩ cuối cùng

Tất nhiên, Bootstrap ngày nay còn nhiều hơn những ví dụ nêu trên. Nó cũng lưu trữ một loạt các thành phần JavaScript cho các phần tử thường được sử dụng như bánh mì nướng hoặc đàn accordion. Hầu hết chúng thậm chí có thể truy cập được nếu chúng được triển khai với nhãn HTML và Aria chính xác

Và đây là câu trả lời. Bất kỳ khung nào chỉ có thể tốt khi nhà phát triển triển khai nó. Tất nhiên, có thể tạo các trang web nhanh, đáp ứng và dễ truy cập bằng Bootstrap

Nhưng đây là những gì tôi đã thấy xảy ra. Một khi bạn bắt đầu chia nhỏ nó ra, cố gắng tìm ra cách chỉ sử dụng nó khi cần thiết, làm cho nó dễ truy cập và dễ bảo trì, có lẽ bạn đã đi được nửa chặng đường xây dựng “bộ khung” của riêng mình. ”

Frontend không nhất thiết phải là một chiếc hộp bí ẩn kỳ diệu. Khả năng tiếp cận không phải là đau đớn. Ngân sách eo hẹp không nên xác định khả năng sử dụng của một trang web

Đôi khi, lùi lại một bước để phân tích các yêu cầu trước khi áp dụng bất kỳ khuôn khổ nào vào một dự án sẽ giúp ích cho bạn. Trong nhiều trường hợp, việc tạo tập hợp các kiểu hoặc thành phần của riêng bạn có thể nhanh hơn và hiệu quả hơn

Những trang web nổi tiếng nào sử dụng Bootstrap?

Có phải mọi trang web đều sử dụng Bootstrap?

Bao nhiêu phần trăm trang web sử dụng Bootstrap?

Bootstrap có còn phù hợp vào năm 2022 không?