Tìm hiểu Bootstrap

Thiết kế một giao diện web đẹp, trực quan không phải là điều dễ dàng với hầu hết lập trình viên. Tuy giao diện không phải là thành phần quan trọng nhất của một ứng dụng, nhưng nếu giao diện quá khó coi thì sẽ gây mất cảm tình với người dùng. Lập trình viên nào cũng muốn ứng dụng trông thật bắt mắt, nhưng họ lại không muốn tốn nhiều thời gian và công sức để thiết kế giao diện. Do vậy, Bootstrap được xem như là vị cứu tinh trong tình huống khó xử này.

Bootstrap là một framework nổi tiếng trong cộng đồng lập trình web, và cũng là dự án được theo dõi nhiều nhất trên Github. Bootstrap không đòi hỏi bạn phải có kiến thức về thiết kế hoặc mỹ thuật để tạo ra một giao diện đẹp. Mọi thứ trong Bootstrap đều đã được xây dựng sẵn. Bạn chỉ cần dùng những thành phần (component) có sẵn này cho mục đích riêng của mình. Bootstrap khởi đầu là một dự án nội bộ của Twitter. Sau khi nhận ra được tính hữu ích của nó đối với cộng đồng, nhóm lập trình viên của Twitter quyết định mở nguồn cho Bootstrap và đăng tải nó lên Github vào năm 2011. Đến nay, Bootstrap đã được 5 tuổi và hiện đang ở phiên bản 3, và sẽ ra mắt phiên bản 4 trong thời gian sắp tới.

Bất kỳ ai cũng có thể dùng Bootstrap, kể cả khi bạn không có khiếu thẩm mỹ hoặc không rành về CSS. Nếu có tay nghề cao, bạn có thể tùy biến Bootstrap theo ý thích riêng, hoặc tự tạo theme dựa trên Bootstrap. Nếu không chuyên về công nghệ front-end, bạn hãy dùng kỹ thuật copy và paste đoạn code ví dụ có sẵn trên documentation của Bootstrap. Tuy nhiên, đây chỉ là phương thức chữa cháy lúc mới bắt đầu học mà thôi. Sau này, bạn nên nâng cao hiểu biết về Bootstrap để không phải phụ thuộc code mẫu nữa.

Bootstrap được cấu tạo từ các file CSS và JavaScript. Để dùng Bootstrap, bạn chỉ cần thêm link đến những file này trong HTML. Sau đó, bạn hãy xem qua các component có trong documentation, rồi chọn ra component ưng ý. Kế đến, bạn copy những đoạn code minh họa và paste vào file HTML.

Mặc định, các thành phần trong Bootstrap đều responsive, nghĩa là chúng tự co giãn cho phù hợp với kích thước màn hình. Trước đây, khi thiết kế một trang web, người ta phải tạo ra nhiều phiên bản khác nhau. Sau đó, lập trình viên dùng một đoạn code để phát hiện thiết bị của người dùng. Đoạn code sẽ chuyển hướng sang trang web thiết kế riêng cho thiết bị đó. Phương pháp này có nhiều điểm bất lợi, như khi cần cập nhật web thì phải sửa tất cả các phiên bản. Do vậy, responsive đang trở thành xu thế chủ đạo trong thiết kế web, và Bootstrap giúp bạn thực hiện điều này một cách tự động.

Giống như Windows Forms giúp thiết kế giao diện ứng dụng desktop, Bootstrap cung cấp nhiều component để thiết kế giao diện web. Đây là các component HTML đã được Bootstrap định kiểu (style) sẵn. Nhờ vậy, lập trình viên có thể dùng ngay mà không phải viết code phức tạp. Ngoài ra, bạn có thể tùy biến các style một cách dễ dàng. Nếu không có khả năng thiết kế, bạn nên dùng theme nguồn mở của Bootstrap để thay đổi kiểu dáng các component.

Trước đây, khi thiết kế web, người ta thường dùng <table> để dàn trang. Cách này có khuyết điểm là khiến trang web tải chậm, đặc biệt khi <table> lồng vào nhau. Ngoài ra, <table> không phải là công cụ dùng để dàn trang. Nó chỉ dùng để hiển thị thông tin dạng bảng. Do đó, dùng <table> để dàn trang là sai phương pháp. Bootstrap sử dụng các thẻ <div> để dàn trang, cho nên khả năng responsive của nó rất mạnh mẽ. Mặc định, Bootstrap sử dụng một khung lưới (grid) gồm 12 cột. Khi thêm component, bạn sẽ cung cấp số cột mà component chiếm. Từ đó, Bootstrap sẽ tự động canh chỉnh cho phù hợp.

Vì Bootstrap được dùng rộng rãi, cộng đồng nguồn mở cung cấp một loạt các theme miễn phí nếu bạn không muốn chỉnh style cho từng component. Để thay đổi theme, bạn vào trang bootswatch.com. Ở đây, bạn có thể chọn theme theo từng chủ đề với nhiều phong cách khác nhau. Để thay đổi theme, bạn chỉ cần đổi file CSS của Bootstrap thành file CSS lấy từ trang bootswatch.com. Sau đó refresh trình duyệt để xem kết quả.