Đối với những bạn nào quan tâm về phát triển Website thì chắn hẳn đã rất quen thuộc với thuật ngữ bootstrap. Tuy nhiên, đây vẫn là một thuật ngữ khá trừu tượng đối với những người lần đầu tiên nghe đến. Để hiểu rõ hơn thuật ngữ Bootstrap là gì? đừng bỏ qua nội dung sau đây.
Thuật ngữ Bootstrap là gì?
Bootstrap là khung HTML, CSS và JS phổ biến nhất để phát triển các dự án đầu tiên trên thiết bị di động đáp ứng trên web. Cụ thể hơn, Bootstrap là một khung Javascript mã nguồn mở được phát triển bởi nhóm tại Twitter. Nó là sự kết hợp của mã HTML, CSS và Javascript được thiết kế để giúp xây dựng các thành phần giao diện người dùng. Bootstrap cũng được lập trình để hỗ trợ cả HTML5 và CSS3. Ngoài ra, nó được gọi là Front-end-framework.
Bootstrap là một bộ công cụ miễn phí để tạo một trang web và ứng dụng web. Nó chứa các mẫu thiết kế dựa trên HTML và CSS như kiểu chữ, biểu mẫu, nút, điều hướng và các thành phần giao diện khác, cũng như các phần mở rộng JavaScript tùy chọn.
Bootstrap có thể được rút gọn thành ba tệp chính:
- css – khung CSS
- js – khung JavaScript / jQuery
- glyphicons – phông chữ (bộ phông chữ biểu tượng)
Ngoài ra, Bootstrap yêu cầu jQuery hoạt động. jQuery là một thư viện JavaScript cực kỳ phổ biến và được sử dụng rộng rãi, vừa đơn giản hóa vừa bổ sung khả năng tương thích trình duyệt chéo với JavaScript.
Lý do để lập trình viên thích Bootstrap
- Dễ dàng để bắt đầu
- Hệ thống lưới lớn
- Kiểu dáng cơ bản cho hầu hết các thành phần HTML (Kiểu chữ, Mã, Bảng, Biểu mẫu, Nút, Hình ảnh, Biểu tượng)
- Danh sách đầy đủ các thành phần
- Có plugin Javascript kèm theo
Tại sao bootstrap quan trọng?
Không cần phải sử dụng bootstrap vì vẫn có nhiều thiết kế tương ứng. Nói chung, mọi dự án web bạn làm việc sẽ cần phải đáp ứng và hoạt động đúng trên tất cả các trình duyệt chính, và một số thiết thế dự phòng cho những trình duyệt cũ hơn. Bootstrap có một cộng đồng mã nguồn mở khổng lồ hoạt động dựa trên điều này nên những nhà phát triển đều biết được nó cùng một hệ thống, bằng cách này sẽ dễ dàng đạt được về mặt tốc độ.
The grid (thuật ngữ được dùng để chỉ phương pháp sắp đặt các thành phần HTML theo dạng lưới dựa trên CSS) có lẽ là một trong những khía cạnh thiết yếu nhất của khung. Đó là cơ sở mà toàn bộ bố cục được tạo ra. Ngoài ra, CSS core của Bootstrap cũng sẽ thêm kiểu dáng hữu ích cho biểu mẫu, bảng, nút, danh sách và hình ảnh, cũng như các thanh điều hướng hoạt động đầy đủ, trong khi JavaScript core sẽ thêm mã hữu ích để tạo phương thức, băng chuyền, cảnh báo, cửa sổ bật lên, thả xuống và accordion.
Lịch sử hình thành bootstrap
Bootstrap ban đầu được đặt tên là Twitter Blueprint, được phát triển bởi Mark Otto và Jacob Thornton tại Twitter nhằm tính nhất quán giữa các công cụ nội bộ. Trước đây Bootstrap, được phát triển giao diện bẳng cách sử dụng các thư viện khác nhau, dẫn đến sự không nhất quán và gánh nặng bảo trì cao.
Sau một vài tháng phát triển bởi một nhóm nhỏ, nhiều nhà phát triển tại Twitter bắt đầu đóng góp cho dự án như một phần của Hack Week theo kiểu hackathon cho nhóm phát triển Twitter. Nó được đổi tên từ Twitter Blueprint thành Bootstrap và được phát hành dưới dạng một dự án mã nguồn mở vào ngày 19 tháng 8 năm 2011. Nó vẫn tiếp tục được duy trì bởi Mark Otto, Jacob Thornton và một nhóm nhỏ các nhà phát triển cốt lõi, cũng như một cộng đồng lớn của những người đóng góp.
Vào ngày 31 tháng 1 năm 2012, Bootstrap 2 đã được phát hành, bổ sung hỗ trợ tích hợp cho Glyphicons, một số thành phần mới, cũng như thay đổi đối với nhiều thành phần hiện có. Phiên bản này hỗ trợ đáp ứng thiết kế web . Điều này có nghĩa là bố cục của các trang web điều chỉnh linh hoạt, có tính đến các đặc điểm của thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).
Phiên bản chính tiếp theo, Bootstrap 3, được phát hành vào ngày 19 tháng 8 năm 2013. Nó được thiết kế lại các thành phần để sử dụng thiết kế phẳng và cách tiếp cận di động đầu tiên.
Vào ngày 29 tháng 10 năm 2014, Mark Otto đã thông báo rằng Bootstrap 4 đang được phát triển. Phiên bản beta đầu tiên được phát hành vào ngày 10 tháng 8 năm 2017. Phiên bản ổn định của Bootstrap 4 được phát hành vào ngày 18 tháng 1 năm 2018 về cơ bản cải thiện các kiểu in và tiện ích viền và cũng cung cấp thêm quyền kiểm soát đối với flexbox.
Tính năng của bootstrap
Bootstrap là một khung web tập trung vào việc đơn giản hóa việc phát triển các trang web thông tin (trái ngược với các ứng dụng web). Mục đích chính của việc thêm nó vào một dự án web là áp dụng các lựa chọn về màu sắc, kích thước, phông chữ và bố cục của Bootstrap cho dự án đó. Như vậy, liệu các nhà phát triển phụ trách có tìm thấy những lựa chọn đó theo ý thích của họ hay không. Sau khi được thêm vào một dự án, Bootstrap cung cấp các định nghĩa kiểu cơ bản cho tất cả các thành phần HTML. Kết quả cuối cùng là sự xuất hiện thống nhất cho văn xuôi, bảng và các yếu tố hình thức trên các trình duyệt web.
Ngoài ra, các nhà phát triển có thể tận dụng các lớp CSS được xác định trong Bootstrap để tùy chỉnh thêm sự xuất hiện của nội dung.
Ví dụ, Bootstrap đã cung cấp cho các bảng màu sáng và tối, tiêu đề trang, dấu ngoặc kép nổi bật hơn và văn bản có điểm nhấn.
Bootstrap cũng đi kèm với một số thành phần JavaScript dưới dạng các plugin jQuery. Họ cung cấp các yếu tố giao diện người dùng bổ sung như hộp thoại, chú giải, công cụ và băng chuyền. Mỗi thành phần Bootstrap bao gồm một cấu trúc HTML, khai báo CSS và trong một số trường hợp kèm theo mã JavaScript. Chúng cũng mở rộng chức năng của một số thành phần giao diện hiện có, ví dụ như chức năng tự động hoàn thành cho các trường đầu vào. Các thành phần nổi bật nhất của Bootstrap là các thành phần bố cục, vì chúng ảnh hưởng đến toàn bộ trang web.
Xây dựng mẫu cơ bản với Bootstrap
Để hiểu rõ hơn về cách xây dựng biểu mẫu bootstrap, bạn sẽ thấy dưới đây kèm với một vài ví dụ rất đơn giản. Đầu tiên, chúng tôi sẽ hướng dẫn sử dụng Bootstrap để bố trí nền tảng, sau đó chúng tôi sẽ thêm phong cách tùy chỉnh của riêng thú vị hơn.
Tải bootstrap về máy tính, trong phần tải xuống bạn sẽ thấy thư mục CSS, Font, js. Giải nén và lưu các tập tin trong một thư mục Bootstrap không đi kèm với bất kỳ HTML nào, nhưng họ có một trang Hello Hello, World!, Bắt đầu trên tài liệu, vì vậy bạn sẽ sử dụng nó như là index.html.
Bắt đầu cơ bản với các thẻ doctype, html, head và body. Các meta name=”viewport”thẻ này đặc biệt quan trọng đối với responsive design – nó đảm bảo rằng trang web của bạn có một tỉ lệ 1: 1 với khung nhìn (kích thước màn hình).
Ngoài ra, người dùng có thể thêm CSS lõi Bootstrap trong <head>… “<link href=”css/bootstrap.min.css” rel=”stylesheet”>”
jQuery thông qua Google CDN trước </body>tag… “<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>”
Và Bootstrap core JavaScript “<script src=”js/bootstrap.min.js”></script>”
Bootstrap JavaScript và JavaScript tùy chỉnh phải nằm bên dưới jQuery để hoạt động. Ngoài ra, bạn cũng có thể liên kết với jQuery thông qua URL của Google vì nó giảm tải trên máy chủ trực tiếp, nhưng bạn có thể tải xuống nếu bạn muốn làm việc cục bộ.
Sau khi đã hoàn tất các bước, giờ bạn sẽ cảm thấy bootstrap có thể hoạt động cơ bản. Bây giờ bạn có thẻ check một vào thứ với một site mới vừa tạo thành.
Bootstrap là dự án được đánh giá cao thứ hai trên GitHub , với hơn 129.000 đánh giá. Hiện nay bootstrap vẫn là khung web được nhiều người yêu thích và lựa chọn cho quá trình phát triển của mình.