Tính năng Bootstrap

Trong bài viết thứ hai này trong loạt bài hãy đối phó với các tính năng của Bootstrap. Nó là một thư viện đầy đủ các nguồn tài nguyên để thiết kế các trang web và ứng dụng, bao gồm các mẫu và phần tử cho biểu mẫu, phông chữ và menu, trong số những thứ khác.

Trong bài trước chúng tôi lập luận rằng có những lúc người quản lý nội dung không phải là lựa chọn tốt nhất và viết mã từ đầu cho một trang web là giải pháp thay thế phù hợp. Tuy nhiên, không có nghĩa là chúng ta phải phát minh lại bánh xe. Sử dụng các framework như Bootstrap giúp giảm đáng kể thời gian thiết kế và dễ dàng đạt được kết quả hơn.

Tính năng Bootstrap

Để hiểu các tính năng của Bootstrap, chúng ta cần hiểu sự thay đổi mô hình trong thiết kế trang web.

khi họ xuất hiện các trang web chỉ phải thích ứng với các kích cỡ màn hình khác nhau. Tuy nhiên, theo thời gian, điện thoại di động và máy tính bảng ngày càng trở thành phương tiện truy cập ưa thích của người dùng. thách thức là làm cho các trang thích ứng với các màn hình khác nhau mà người dùng không cần phải phóng to, thu nhỏ hoặc di chuyển nội dung để có thể xem được.

Về nguyên tắc, các cách tiếp cận sau đây đã được áp dụng:

• Thiết kế đáp ứng: Thiết kế giống nhau nhưng tự động điều chỉnh cho phù hợp với kích thước của màn hình. Cách tiếp cận này có một số vấn đề như người dùng có thể buộc phải phóng to các phần nhất định của trang để xem chúng.
• Tạm ứng lũy ​​tiến: Nó bắt đầu bằng cách thiết kế trang web cho thiết bị với ít tài nguyên hơn (nói chung là điện thoại di động vì nó có màn hình nhỏ hơn, trình duyệt có ít khả năng tương thích hơn cho các tính năng nâng cao và thường yêu cầu sử dụng gói dữ liệu để kết nối). Sau khi hoàn thành, dựa trên thiết kế này, các tính năng được thêm vào để có được phiên bản dành cho máy tính bảng, máy tính xách tay và máy tính để bàn.
• Suy thoái dần dần: Đó là con đường ngược lại. Trang web dành cho máy tính để bàn được tạo trước và các tính năng bị xóa cho đến khi có được phiên bản thân thiện với thiết bị di động.

Vì nó luôn luôn dễ dàng hơn để thêm vào hơn là loại bỏ, tăng tiến dần là xu hướng được quản lý để chiếm ưu thế. B.ví dụ: ootstrap sử dụng phương pháp tiếp cận "thiết bị di động đầu tiên", nghĩa là cơ sở của thiết kế luôn là phiên bản sẽ được hiển thị ở kích thước màn hình nhỏ nhất và sau đó, các sửa đổi sẽ được thực hiện khi nó được chuyển sang các kích thước tiếp theo được thiết lập.

Một lợi thế bổ sung của việc sử dụng Bootstrap liên quan đến thực tế là Google ưu tiên các trang web thân thiện với thiết bị di động trong các tìm kiếm của mình.

Một khái niệm khác mà chúng ta phải tính đến là sự khác biệt giữa thiết kế giao diện người dùng và thiết kế phụ trợ. Thiết kế giao diện người dùng quan tâm đến mọi thứ người dùng nhìn thấy và mọi thứ họ tương tác. Backend nhóm những gì được thực hiện trên máy chủ. Một ví dụ trước đây là biểu mẫu web. Hiển thị một loạt các tùy chọn được hiển thị dưới dạng menu thả xuống là thiết kế giao diện người dùng, tùy chọn đã chọn được gửi qua thư hoặc thêm vào cơ sở dữ liệu là thiết kế phụ trợ.

Bootstrap là một khuôn khổ kết hợp các yếu tố của phong cách CSS và lập trình Javascript để kiểm soát việc hiển thị và cung cấp khả năng tương tác cho tất cả các thành phần của một trang được phát triển bằng HTML5.

Trong số những thứ chúng ta có thể kiểm soát với Bootstrap là:

• Trợ năng: Các thành phần như menu hoặc hộp thoại tương thích với trình đọc màn hình hoặc phù hợp để sử dụng cho những người bị suy giảm khả năng vận động.
• Nút: Bao gồm các biện pháp, phong cách, trạng thái và nhóm.
• Các hình thức:  Bao gồm kết xuất, các loại điều khiển và xác thực đầu vào.
• Hình ảnh: Kiểm soát nguồn gốc, căn chỉnh và kích thước màn hình của hình ảnh được chèn.
• Các yếu tố điều hướng: Ví dụ: thanh bên có thể ẩn hoặc menu dọc hoặc ngang tùy thuộc vào thiết bị.
• Kiểu chữ: Kiểm soát cách hiển thị các phần khác nhau của văn bản.
• Bố trí: Điều chỉnh kết xuất nội dung tùy thuộc vào thiết bị

Trong bài tiếp theo chúng ta sẽ xem một số ví dụ thực tế về việc sử dụng nó.