Bài 1: Bootstrap 4 là gì? Tổng quan về Bootstrap 4

0
355

Xin chào các bạn, như vậy là chúng ta đã kết thúc series học CSS3 rồi, và các bạn cũng đã được hướng dẫn hết toàn bộ các thuộc tính từ cơ bản đến nâng cao trong CSS để có thể định dạng trang trí những thành phần, hiệu ứng đẹp mắt rồi. Và bài hôm nay, sẽ là bài đầu tiên trong series mới, series hướng dẫn về Bootstrap 4 – một Framework của CSS. Series học Bootstrap 4 này sẽ giúp các bạn có cách tiếp cận CSS một cách nhanh và hiệu quả hơn rất nhiều so với việc học CSS truyền thống trước. Để hiểu rõ, chúng ta sẽ đi vào bài đầu tiên trong series này, mình sẽ giới thiệu tổng quan về Bootstrap 4 cho các bạn nhé!

Bootstrap 4 là gì?

Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap. Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị khác như máy tính bảng, laptop, ….

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 7 năm rồi. Bản bootstrap mới nhất bây giờ là bootstrap 4.

Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí và tự do sử dụng.

Sự phát triển của Framework Bootstrap

Về lịch sử phát triển thì tất nhiên, Bootstrap cũng sẽ phát triển dần từ những phiên bản ban đầu từ 1, 2, … và lên dần các phiên bản mới hơn. Và hiện nay, thì Bootstrap chỉ còn phổ biến nhất 2 phiên bản đó là Bootstrap 3 và Bootstrap 4, trong đó thì Bootstrap 3 vẫn phổ biến hơn vì Bootstrap 4 mới ra trong khoảng 1 năm nay thôi.

Về cơ bản thì 2 phiên bản này có cấu trúc và cách sử dụng khá giống nhau, nên nếu như bạn nào đã từng học và làm qua về Bootstrap 3, thì chắc hẳn sẽ không khó khăn để hiểu về Bootstrap 4, đơn giản vì chúng cũng khá giống nhau. Còn về những điểm khác, phần tiếp theo mình sẽ nói tới nhé.

So sánh Bootstrap 3 và Bootstrap 4

Bootstrap 4 là phiên bản mới nhất của Bootstrap tính đến thời điểm hiện tại, với các thành phần mới, CSS nhanh hơn và khả năng đáp ứng cao hơn phiên bản cũ. Vì là bản mới nên bootstrap 4 có hỗ trợ responsive cho nhiều thiết bị hơn, code css được tối ưu hơn, nhiều file chia nhỏ hơn, …

Bootstrap 4 hỗ trợ tất cả các trình duyệt và nền tảng với các phiên bản ổn định và mới nhất. Tuy nhiên, 1 nhược điểm duy nhất đó là IE9 không hỗ trợ Bootstrap 4.

Nếu các bạn cần chạy giao diện web trên trình duyệt của IE, cụ thể là IE8 và IE9, thì bạn nên dùng Bootstrap 3 nhé. Phiên bản cũ Bootstrap 3 ổn định, hỗ trợ các bản vá lỗi và các thay đổi tài liệu.

Tại sao sử dụng Bootstrap

Sau đây là 1 số lý do mà các bạn nên sử dụng Bootstrap:

  • Dễ dùng: bất cứ ai với kiến thức cơ bản về HTML và CSS đều cũng có thể sử dụng được Bootstrap
  • Các tính năng đáp ứng: Bootstrap thích hợp, tương thích (reponsive) với điện thoại, máy tính bảng và máy tính để bàn (laptop, dektop).
  • Tiếp cận ưu tiên thiết bị di động đầu tiên: Trong Bootstrap, các phong cách điện thoại di động là một phần của framework lõi.
  • Tương thích trình duyệt: Bootstrap 4 tương thích với các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera).

Demo Bootstrap 4

Để test reponsive của Bootstrap 4 thì các bạn bằng việc chạy thử thật trên tất cả các thiết bị thì các bạn có thể tải các Add on tiện ích của trình duyệt, mình gợi ý cho các bạn cài Add on Mobile/Reponsive Web Design Tester trên Chrome nhé, dùng rất tiện ích để kiểm tra website chạy trên các thiết bị như thế nào, không phải đi mượn máy móc thật về test thử đâu.

Nói nhiều rồi, để các bạn hình dung ra BS4 trông như thế nào, mình sẽ để bản demo ở đây cho các bạn xem qua nhé, không hiểu cũng không sao, chúng ta sẽ học làm ra nó ở những bài kế tiếp.

Kết luận

Như vậy bài giới thiệu đầu tiên về Bootstrap 4 đã xong, bài này chủ yếu giúp các bạn có cái nhìn tổng quát nhất về Bootstrap 4. Tuy có nhiều ưu điểm vượt trội, Bootstrap 4 vẫn chưa thể giải quyết vấn đề tương thích với IE9, cũng như tương thích hoàn toàn với IE10+. Bạn có thể dùng Bootstrap 3 để thực hiện nhu cầu tương thích với IE9 và IE10. Mời các bạn theo dõi bài tiếp theo để bắt đầu học và tìm hiểu sâu hơn về Bootstrap 4.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây