Bootstrap là gì và nó đã thay đổi cách chúng ta xây dựng và thiết kế các trang web như thế nao? Nếu bạn đang tìm hiểu về lĩnh vực phát triển web hoặc đơn giản là muốn nắm bắt kiến thức cơ bản về Bootstrap, bài viết này sẽ giúp bạn hiểu rõ hơn. Tiếp theo đây, chúng ta sẽ cùng tìm hiểu kỹ hơn về kiến thức cơ bản cũng như hướng dẫn sử dụng Bootstrap một cách hiệu quả.
Bootstrap là gì?
Bootstrap là một framework phát triển web mã nguồn mở được sử dụng để thiết kế web chuẩn responsive.
Bootstrap sử dụng các ngôn ngữ lập trình web phổ biến như HTML, CSS, và JavaScript để tạo ra các thành phần giao diện người dùng (UI) thân thiện. Framework này giúp định dạng và tổ chức các phần tử trang web, cung cấp các tiện ích UI như nút, biểu đồ, thanh điều hướng, hộp thoại modal, và nhiều thành phần khác.
Bootstrap cũng được tích hợp sẵn với nhiều tính năng và tiện ích sẵn có, giúp bạn tiết kiệm thời gian và công sức trong quá trình phát triển. Nó cũng hỗ trợ tùy chỉnh và mở rộng để bạn có thể điều chỉnh giao diện theo ý muốn của mình. Nhìn chung, đây là một công cụ mạnh mẽ và linh hoạt giúp phát triển web nhanh chóng và dễ dàng hơn.
Lịch sử phát triển Bootstrap
Bootstrap là một framework CSS miễn phí và mã nguồn mở được sử dụng để phát triển các trang web và ứng dụng web front-end. Lịch sử hình thành và phát triển của Bootstrap có thể tóm tắt qua một số cột mốc như sau:
- Bootstrap được phát triển bởi hai kỹ sư công nghệ phát triển đó là Mark Otto và Jacob Thornton khi cả hai đang làm việc tại Twitter. Framework ra mắt lần đầu tiên vào ngày 19/8/2011 trên mạng xã hội GitHub và có tên là Twitter Blueprint.
- Ngày 31/1/2012, các nhà sáng lập đã phát hành Bootstrap phiên bản thứ 2, với nhiều cải tiến đáng kể liên quan đến thiết kế, tính năng và hiệu suất.
- Ngày 19/8/2013, phiên bản thứ 3 của Bootstrap chính thức phát hành. Phiên bản này tập trung vào việc hỗ trợ thiết kế web responsive, tức là các trang web có thể tự điều chỉnh kích thước theo kích cỡ màn hình của thiết bị.
- Vào tháng 10/2014, các nhà phát triển công bố phiên bản thứ 4 của Bootstrap. Phiên bản này đã chuyển từ việc sử dụng Less sang Sass để biên dịch mã CSS có độ linh hoạt cao hơn.
- Ngày 5/5/2020, phiên bản thứ 5 của Bootstrap được phát hành. Phiên bản này loại bỏ sự phụ thuộc vào jQuery, và sử dụng các tính năng mới của JavaScript như ES6 và Fetch API. Ngoài ra, phiên bản này cũng cập nhật các icon, màu sắc, font chữ và các thành phần giao diện khác.
Tính năng cơ bản của Bootstrap là gì?
Mục tiêu chính khi sử dụng Bootstrap là tạo ra các trang web responsive và ưu tiên với thiết bị di động. Framework này đảm bảo rằng tất cả các yếu tố giao diện của một trang web hoạt động tối ưu trên nhiều kích thước màn hình. Bootstrap có sẵn dưới hai dạng: phiên bản đã biên soạn sẵn và phiên bản dựa trên mã nguồn.
Các nhà phát triển có kinh nghiệm thường ưa thích phiên bản dựa trên mã nguồn vì nó cho phép họ tùy chỉnh cho phù hợp với dự án của họ.
Ví dụ: phiên bản “mã nguồn” của Bootstrap cho phép bạn truy cập vào cổng Sass. Điều này có nghĩa là nó tạo ra một stylesheet tùy chỉnh và tải lên Bootstrap, cho phép bạn sửa đổi và mở rộng công cụ nếu cần.
Bạn cũng có thể cài đặt Bootstrap thông qua một PM (Package Manager) ‒ công cụ quản lý và cập nhật các frameworks, thư viện và tài nguyên.
Một số PM phổ biến bao gồm npm, Composer và Bower:
- Npm quản lý các phần phụ thuộc ở phía máy chủ.
- Composer tập trung vào front-end.
- Nếu bạn làm việc với các dự án phát triển dựa trên PHP, hãy xem xét sử dụng Bower.
3 tập tin chính của Bootstrap
Bootstrap bao gồm một bộ cú pháp được biên dịch trong ba tập tin chính ‒ Bootstrap.css, Bootstrap.js, và Glyphicons. Hãy nhớ rằng Bootstrap yêu cầu một thư viện JS gọi là jQuery để chạy các plugin và thành phần JS. Dưới đây là 3 tập tin cơ bản quản lý giao diện người dùng và chức năng của một trang web.
Bootstrap.css
Bootstrap.css là một CSS framework, nghĩa là nó chứa một tập hợp các quy tắc và lớp CSS được thiết kế sẵn để giúp bạn dễ dàng tạo và tuỳ chỉnh giao diện trang web. Bootstrap.css chứa các quy tắc liên quan đến việc xây dựng cấu trúc và bố cục của trang web.
Chẳng hạn như hệ thống lưới, tích hợp với CSS Grid System, và các thành phần giao diện như nút, bảng, biểu đồ,…
Một trong những ưu điểm quan trọng của Bootstrap là khả năng tạo ra giao diện responsive. Bootstrap.css cung cấp các lớp CSS và quy tắc thiết kế cho việc đáp ứng các kích thước màn hình khác nhau, giúp trang web tự động thích ứng với điện thoại di động, máy tính bảng, và máy tính.
Bootstrap.css và các chức năng của nó giúp một nhà phát triển tạo ra giao diện đồng nhất trên nhiều trang khi cần. Kết quả là, nhà phát triển web sẽ không phải bỏ hàng giờ vào việc chỉnh sửa thủ công. Bootstrap cho phép bạn ghi đè lên các kiểu mẫu mặc định và thay đổi màu sắc, phông chữ, lề, và nhiều thuộc tính khác theo ý muốn.
Bootstrap.js
Tập tin này là phần cốt lõi của Bootstrap. Bootstrap.js là một tập hợp các tệp JavaScript (JS) và thư viện có sẵn trong framework Bootstrap. Nó là một phần quan trọng của Bootstrap và chịu trách nhiệm cho việc thêm tính năng tương tác và hiệu ứng động vào các trang web và ứng dụng web.
Để tiết kiệm thời gian viết cú pháp JavaScript, các nhà phát triển thường sử dụng jQuery ‒ một thư viện JavaScript mã nguồn mở phổ biến, đa nền tảng. Dưới đây là một số ví dụ về những gì jQuery có thể thực hiện:
- Thực hiện các yêu cầu AJAX như trích xuất dữ liệu từ một vị trí khác.
- Tạo các tiện ích bằng một bộ sưu tập các plugin JavaScript.
- Tạo các hiệu ứng tùy chỉnh bằng các thuộc tính CSS.
- Thêm tính năng động vào nội dung của trang web.
Mặc dù Bootstrap có thể hoạt động tốt với các thuộc tính CSS và các phần tử HTML nhưng nó cần jQuery để tạo ra thiết kế responsive. Nếu không, bạn chỉ có thể sử dụng phần tĩnh của ngôn ngữ stylesheet. Do đó, mọi lập trình viên phần mềm nên học về jQuery vì nó là một phần thiết yếu của phát triển web.
Glyphicons
Glyphicons là một bộ biểu tượng (icons) được tích hợp sẵn trong framework Bootstrap. Các biểu tượng này được gọi là “Glyphicons” vì chúng thường là các biểu tượng hoặc ký hiệu nhỏ được hiển thị dưới dạng hình ảnh hoặc biểu tượng văn bản (glyphs). Bạn cũng có thể tải xuống các biểu tượng riêng lẻ và theo chủ đề miễn phí trên các trang web khác nhau như Flaticon, GlyphSearch và Icons8.
Ngoài ra, Glyphicons cung cấp các lớp CSS để điều chỉnh kích thước và kiểu dáng của biểu tượng một cách dễ dàng, giúp bạn tùy chỉnh chúng sao cho phù hợp với thiết kế của trang web của bạn. Glyphicons thường được sử dụng trong các thành phần như nút, thanh điều hướng (navbar), hoặc các liên kết đơn giản để thể hiện chức năng hoặc hành động.
Vì sao nên sử dụng Bootstrap?
Một số thành phần giao diện của Bootstrap bao gồm thanh điều hướng, hệ thống lưới (grid), carousel hình ảnh và nút. Nếu bạn vẫn chưa biết được có nên thử Bootstrap hay không thì sau đây là những lợi ích của việc sử dụng nó so với các framework phát triển web khác:
Dễ sử dụng
Đầu tiên và quan trọng nhất, Bootstrap khá dễ học. Do sự phổ biến của framework này, có rất nhiều bài hướng dẫn và diễn đàn trực tuyến có thể giúp bạn làm quen. Một trong những lý do khiến Bootstrap phổ biến trong cộng đồng phát triển web là nó có cấu trúc tệp đơn giản. Các tệp của nó đã được biên soạn sao cho dễ truy cập và chỉ yêu cầu kiến thức cơ bản về HTML, CSS và JS để có thể chỉnh sửa.
Hệ thống lưới (grid) responsive
Bootstrap đi kèm với hệ thống lưới đã được định sẵn mà bạn không cần phải tạo lại từ đầu. Hệ thống lưới giúp bạn xác định cách bố trí và sắp xếp các phần tử trên trang một cách dễ dàng bằng cách sử dụng các lớp CSS đã xác định trước. Nhờ đó, người dùng không cần phải viết mã CSS tùy chỉnh để xây dựng cấu trúc trang.
Ngoài ra, hệ thống lưới của Bootstrap làm cho quá trình nhập dữ liệu trở nên đơn giản hơn. Nó chứa rất nhiều truy vấn phương tiện cho phép định nghĩa các điểm dừng (breakpoint) tùy chỉnh cho từng cột dựa trên nhu cầu của dự án thiết kế web. Sau khi tạo lưới, bạn chỉ cần thêm nội dung vào các container.
Trong Bootstrap, .container là một lớp CSS chủ yếu được sử dụng để tạo ra một khung bao bọc cho nội dung của trang web. Hệ thống lưới Bootstrap có hai phân loại container để thích ứng với các dự án cho máy tính để bàn và cho thiết bị di động gọi là container cố định (fixed container hay .container) và container linh hoạt (.container-fluid).
Tương thích với trình duyệt
Nếu trang web của bạn có thể được truy cập thông qua nhiều loại trình duyệt khác nhau sẽ làm giảm tỷ lệ thoát trang (bounce rate). Sâu xa hơn, điều này còn giúp trang web được xếp hạng cao hơn trên kết quả tìm kiếm. Bootstrap có thể tương thích với các phiên bản mới nhất của các trình duyệt phổ biến như Google, Microsoft Edge,… và thậm chí là các trình duyệt ít người biết như WebKit và Gecko.
Hệ thống hình ảnh Bootstrap
Bootstrap xử lý hiển thị hình ảnh và độ responsive bằng các quy tắc HTML và CSS được định sẵn. Khi bạn áp dụng class .img-responsive cho một hình ảnh trên trang web của bạn, nó sẽ tự động thích nghi với kích thước của màn hình thiết bị người dùng và không làm biến dạng hình ảnh. Bootstrap cũng cung cấp các phân lớp bổ sung như .img-circle và .img-rounded, giúp bạn điều chỉnh hình ảnh theo ý muốn.
Tài liệu Boostrap
Bootstrap cung cấp tài liệu cho những người muốn học cách sử dụng framework này lần đầu. Một số chủ đề bạn có thể tìm thấy trên trang tài liệu Bootstrap bao gồm:
- Nội dung: bao gồm mã nguồn Bootstrap đã được biên soạn trước.
- Trình duyệt và thiết bị: liệt kê tất cả các trình duyệt web và di động được hỗ trợ.
- JavaScript: phân tách các plugin JS khác nhau được xây dựng trên jQuery.
- Tùy chỉnh giao diện: giải thích các biến Sass tích hợp sẵn để tùy chỉnh dễ dàng.
- Công cụ: hướng dẫn cách sử dụng các tập lệnh npm của Bootstrap cho các hành động khác nhau.
- Khả năng truy cập: bao gồm các tính năng và hạn chế của Bootstrap liên quan đến đánh dấu dữ liệu có cấu trúc, các thành phần, độ tương phản màu, khả năng hiển thị nội dung và hiệu ứng chuyển đổi.
Tài liệu cũng bao gồm mẫu mã nguồn để thực hành cơ bản. Bạn thậm chí có thể sao chép và sửa đổi các ví dụ mã nguồn cho dự án của mình, giúp bạn tiết kiệm thời gian vì không cần phải viết mã từ đầu.
Cách cài đặt Bootstrap là gì?
Để cài đặt Bootstrap, bạn có một số cách khác nhau tùy thuộc vào mục đích và quy trình phát triển của bạn. Sau đây là hai cách phổ biến để cài đặt Bootstrap:
Content Delivery Network (CDN)
Bootstrap có thể được sử dụng thông qua CDN bằng cách thêm mã HTML sau vào trang web của bạn. Mã này sẽ tải Bootstrap từ máy chủ của Bootstrap và kết nối với trang web của bạn:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>Bootstrap có thể được sử dụng thông qua CDN bằng cách thêm mã HTML sau vào trang web của bạn. Mã này sẽ tải Bootstrap từ máy chủ của Bootstrap và kết nối nó với trang web của bạn.
Tải Bootstrap từ website chính
Bạn có thể tải Bootstrap về máy tính của bạn thông qua trang web chính thức của Bootstrap (https://getbootstrap.com/). Sau đó, giải nén tệp ZIP và sao chép các tệp CSS và JavaScript vào dự án của bạn.
Khi đã cài đặt Bootstrap, bạn có thể bắt đầu sử dụng các thành phần và lớp CSS của nó để phát triển giao diện người dùng của bạn. Hãy xem các tài liệu hướng dẫn và ví dụ trên trang web chính thức của Bootstrap để biết cách sử dụng nó một cách hiệu quả.
Bootstrap 5 có gì mới so với Boostrap 4?
Bootstrap 5 là phiên bản mới nhất của Bootstrap, được phát hành vào năm 2020 với nhiều tính năng cải tiến so với Bootstrap 4. Một số điểm khác biệt chính mà bạn cần lưu ý khi sử dụng Bootstrap 5 là:
Không còn phụ thuộc vào jQuery
Một thay đổi lớn của Bootstrap 5 so với các phiên bản trước đó là bạn có thể sử dụng Bootstrap một cách đầy đủ mà không cần đến jQuery, nhưng bạn vẫn cần Popper.js. Thay đổi này làm cho việc sử dụng Bootstrap trở nên dễ dàng hơn trong các dự án không đòi hỏi hoặc không sử dụng jQuery – ví dụ, khi sử dụng Bootstrap với React.
Nhưng nếu bạn sử dụng jQuery trong trang web của mình nhưng không muốn Bootstrap sử dụng jQuery, bạn có thể làm điều đó bằng cách thêm thuộc tính data-bs-no-jquery vào phần body của tài liệu.
Thay đổi hỗ trợ trình duyệt
Trước phiên bản 5, Bootstrap hỗ trợ Internet Explorer (IE) 10 và 11. Nhưng từ phiên bản 5 trở đi, Bootstrap sẽ không còn hỗ trợ cho IE. Vì vậy, nếu bạn cần hỗ trợ IE trong trang web của bạn, bạn nên cân nhắc khi chuyển từ v4 sang v5. Ngoài ra, các thay đổi khác về hỗ trợ trình duyệt bao gồm:
- Hỗ trợ Firefox và Chrome bắt đầu từ phiên bản 60.
- Hỗ trợ Safari và iOS bắt đầu từ phiên bản 12.
- Hỗ trợ Android Browser và WebView bắt đầu từ phiên bản 6.
Sửa lỗi
Trong tài liệu Bootstrap 4 phần Trình duyệt và thiết bị (Browsers and devices), có một danh sách các lỗi xảy ra trên một số trình duyệt. Những lỗi này đã không còn được liệt kê trong danh sách lỗi của Bootstrap 5 nữa. Danh sách lỗi cũng bao gồm cả các lỗi xảy ra do các trình duyệt cũ không còn được hỗ trợ.
Những thay đổi khác
- Utility API: Bootstrap 5 cung cấp utility API, cho phép bạn tạo ra và tùy chỉnh các class CSS để điều chỉnh căn chỉnh, định dạng, và khoảng cách một cách dễ dàng.
- Cải thiện hệ thống grid: Mở rộng hệ thống lưới (grid) và thêm tính năng cho phép bạn kiểm soát khoảng cách giữa các hàng và cột.
- Thêm thành phần giao diện mới: Bootstrap 5 đưa vào một số thành phần giao diện mới như offcanvas menu, accordion, và floating label.
- Hỗ trợ RTL (right to left): Hỗ trợ các trang web viết từ phải sang trái, phù hợp cho các ngôn ngữ như Ả Rập và Do Thái.
- Tùy biến và chủ đề dễ dàng: Bootstrap 5 cho phép bạn tùy chỉnh giao diện và phong cách dễ dàng hơn bằng cách sử dụng biến CSS, utility API, Sass, và các công cụ khác.
- Namespaced data attributes: Sử dụng thuộc tính dữ liệu có không gian tên để tránh xung đột với các thư viện JavaScript khác và tăng tính bảo mật.
- Cập nhật Popper.js: Nâng cấp Popper.js lên phiên bản 2, cải thiện hiệu suất và tính năng so với phiên bản trước.
- Thư viện biểu tượng SVG: Cung cấp hơn 1200 biểu tượng SVG miễn phí để bạn sử dụng trong các dự án của mình.
Lời kết
Bootstrap không chỉ giúp bạn xây dựng các trang web đẹp mắt mà còn giúp tối ưu hóa quá trình phát triển và tạo ra các trang web responsive hiệu quả.
Trong bài viết này, chúng ta đã tìm hiểu Bootstrap là gì cũng như công dụng và lý do vì sao nên sử dụng framework này. Hy vọng những thông tin mà Miko Tech cung cấp đã giúp bạn hiểu được Bootstrap và đừng quên chia sẻ bài viết nhé!
Ý Nhi tốt nghiệp Đại học Kinh tế TP.HCM và có hơn 2 năm kinh nghiệm trong lĩnh vực sáng tạo nội dung. Trong quá trình làm việc, Ý Nhi có kinh nghiệm sáng tạo nội dung trong nhiều lĩnh vực như công nghệ, thể thao điện tử, marketing, SEO,…
