Lỗi thường gặp khi dùng Bootstrap

Thứ năm - 05/01/2023 23:06

Bootstrap là một bộ công cụ mạnh mẽ. Nó đi kèm với các mẫu thiết kế HTML và CSS, bao gồm nhiều thành phần UI. Về cơ bản, sử dụng Bootstrap rất dễ nhưng nhiều người vẫn mắc phải những lỗi phổ biến dưới đây.

Lỗi cần tránh khi dùng Bootstrap

Quan niệm sai lầm cơ bản về framework

Vấn đề này thường xảy ra do quảng cáo không rõ ràng trên trang Bootstrap hay người dùng chưa đọc kỹ tài liệu. Nhìn chung, để dùng Bootstrap đúng cách, bạn cần nắm được các thông tin cơ bản sau:

Bootstrap là framework toàn diện nhưng nó không quá lớn. Bootstrap bao gồm các mẫu thiết kế HTML và CSS cơ bản với rất nhiều phần tử UI thông dụng. Bạn sẽ thấy có ypography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels và Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels… Bạn có thể chọn một vài trong số chúng và cùng với cấu hình mặc định cho bạn tạo nhanh UI chạy trên nhiều trình duyệt, thiết bị và độ phân giải ở định dạng đẹp mắt.

Bootstrap không làm mọi thứ cho bạn nhưng nó cung cấp một tập hợp các giá trị mặc định hợp lí để lựa chọn, đồng thời, giúp lập trình viên tập trung nhiều hơn vào công việc chính thay vì lo lắng về thiết kế.

Bootstrap có đủ khả năng mở rộng mà bất kỳ ai cũng có thể điều chỉnh nó phù hợp với nhu cầu.

Cho rằng không cần biết CSS để dùng Bootstrap và không cần tới một nhà thiết kế

Đây là quan niệm sai lần. Bất kỳ lập trình viên front-end nào cũng cần học cách dùng CSS và HTML5. Bootstrap hiện đang cung cấp các kiểu mặc định cơ bản nhưng bạn vẫn cần hiểu CSS. Bạn không cần biết cách truy vấn media hoạt động nhưng cần hiểu cách thiết kế đáp ứng hoạt động. Bootstrap không dạy bạn CSS nhưng có thể trợ giúp bạn hoàn thành việc này. Thử nghiệm mã nguồn trong LESS và SASS là một điểm khởi đầu tuyệt vời.

Không cần tới thiết kế cũng là quan niệm sai lầm. Những mẫu thiết kế sẵn trên Bootstrap có thể đẹp nhưng còn một số hạn chế. Nếu muốn thiết kế web, ứng dụng độc lạ, hãy nhờ tới thiết kế chuyên nghiệp.

Thay đổi file CSS

Để làm mọi thứ đơn giản, đừng chỉnh sửa file bootstrap.css. Nếu không, mọi thứ sẽ nhanh chóng trở lên phức tạp. Toàn bộ thiết kế sẽ bị “vỡ” khi bạn muốn nâng cấp file Bootstrap Bạn có thể ghi đè lên stylesheet các màu bootstrap mặc định, kiểu, lề, padding và mọi thứ. Bạn không hề cần động vào stylesheet bootstrap.css.

Không hiểu LESS hay SASS? Không vấn đề, bạn có thể tạo file CSS riêng và ghi đè bất kỳ nội dung bạn muốn từ stylesheet ban đầu bootstrap.css.

Dùng mọi thứ Bootstrap cung cấp

Như đã nhắc tới từ đầu, Bootstrap là một framework hoàn chỉnh. Nó cung cấp rất nhiều phần tử UI, HTML và các mẫu thiết kế CSS cùng plugin JavaScript. Thế nhưng, bạn cần lựa chọn kỹ. Bạn không phải dùng mọi tính năng của Bootstrap.

Điều này đặc biệt đúng với các plugin. Chỉ cần chọn plugin phù hợp, đừng dùng mọi thứ chỉ vì nó đẹp mắt bởi điều đó chỉ khiến web của bạn trở nên rối mắt. Bắt đầu bằng cách tạo HTML, CSS đơn giản. Sau đó, lần lượt thêm các thành phần cần thiết.

Lạm dụng dấu nhắc modal

Bootstrap modal cung cấp các phần tử nhắc hộp thoại linh hoạt với yêu cầu tối thiểu. Nó đi kèm với các mặc định thông minh. Dù modal dễ dùng với các tùy biến phong phú, bạn cần ghi nhớ một số điều để tránh mắc lỗi.