Bootstrap dùng để làm gì trong HTML?

Bootstrap là một khung CSS nguồn mở và miễn phí hướng đến phát triển web giao diện người dùng đầu tiên trên thiết bị di động, đáp ứng. Nó chứa các mẫu thiết kế dựa trên HTML, CSS và (tùy chọn) dựa trên JavaScript cho 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

Tính đến tháng 12 năm 2022, Bootstrap là dự án được gắn sao nhiều thứ 14 (thư viện được gắn sao nhiều thứ 4) trên GitHub, với hơn 161.000 sao. [2]

Đặc điểm[sửa]

Bootstrap là một Thư viện HTML, CSS và JS tập trung vào việc đơn giản hóa việc phát triển các trang web cung cấp 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 đó. Do đó, yếu tố chính là 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 phần tử HTML. Kết quả là sự xuất hiện thống nhất cho văn xuôi, bảng biểu và các yếu tố biểu mẫu 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 giao diện nội dung của họ. Ví dụ: Bootstrap đã cung cấp cho các bảng có màu sáng và tối, tiêu đề trang, trích dẫn kéo nổi bật hơn và văn bản có phần tô sáng

Bootstrap cũng đi kèm với một số thành phần JavaScript không yêu cầu các thư viện khác như jQuery. Chúng cung cấp các phần tử giao diện người dùng bổ sung như hộp thoại, chú giải công cụ, thanh tiến trình, trình đơn thả xuống điều hướng và băng chuyền. Mỗi thành phần Bootstrap bao gồm cấu trúc HTML, khai báo CSS và trong một số trường hợp, mã JavaScript đi kèm. 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ó, chẳng hạn như chức năng tự động hoàn thành cho các trường nhập liệu

Ví dụ về trang web sử dụng khung Bootstrap được hiển thị trong Firefox

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 của nó, vì chúng ảnh hưởng đến toàn bộ trang web. Thành phần bố cục cơ bản được gọi là "Vùng chứa", vì mọi thành phần khác trong trang được đặt trong đó. Nhà phát triển có thể chọn giữa vùng chứa có chiều rộng cố định và vùng chứa có chiều rộng linh hoạt. Mặc dù cái sau luôn lấp đầy chiều rộng của trang web, cái trước sử dụng một trong năm chiều rộng cố định được xác định trước, tùy thuộc vào kích thước của màn hình hiển thị trang. [cần dẫn nguồn]

  • Nhỏ hơn 576 pixel
  • 576–768 pixel
  • 768–992 pixel
  • 992–1200 pixel
  • Lớn hơn 1200 pixel

Khi một vùng chứa được đặt đúng chỗ, các thành phần bố cục Bootstrap khác sẽ triển khai bố cục CSS Flexbox thông qua việc xác định các hàng và cột

Phiên bản Bootstrap được biên dịch sẵn có sẵn ở dạng một tệp CSS và ba tệp JavaScript có thể dễ dàng thêm vào bất kỳ dự án nào. Tuy nhiên, dạng thô của Bootstrap cho phép các nhà phát triển triển khai thêm tùy chỉnh và tối ưu hóa kích thước. Dạng thô này là mô-đun, nghĩa là nhà phát triển có thể xóa các thành phần không cần thiết, áp dụng chủ đề và sửa đổi các tệp Sass chưa được biên dịch

Lịch sử[sửa]

Khởi đầu sớm [ chỉnh sửa ]

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 khuôn khổ để khuyến khích tính nhất quán giữa các công cụ nội bộ. Trước Bootstrap, nhiều thư viện khác nhau được sử dụng để phát triển giao diện, dẫn đến sự không nhất quán và gánh nặng bảo trì cao. Theo Otto

Tôi và một nhóm siêu nhỏ gồm các nhà phát triển đã cùng nhau thiết kế và xây dựng một công cụ nội bộ mới và nhìn thấy cơ hội để làm được nhiều hơn thế. Thông qua quá trình đó, chúng tôi thấy mình đã xây dựng được thứ gì đó quan trọng hơn nhiều so với một công cụ nội bộ khác. Nhiều tháng sau, chúng tôi đã hoàn thành phiên bản đầu tiên của Bootstrap như một cách để ghi lại và chia sẻ các mẫu và tài sản thiết kế phổ biến trong công ty. [3]

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, một tuần kiểu hackathon dành 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. [4] Nó tiếp tục được duy trì bởi Otto, Thornton, một nhóm nhỏ các nhà phát triển cốt lõi và một cộng đồng lớn những người đóng góp. [5]

Bootstrap 2[sửa mã nguồn]

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 sẵn cho Glyphicons, một số thành phần mới, cũng như thay đổi nhiều thành phần hiện có. Phiên bản này hỗ trợ thiết kế web đáp ứng, nghĩa là bố cục của các trang web sẽ tự động điều chỉnh, có tính đến các đặc điểm của thiết bị được sử dụng (dù là máy tính để bàn, máy tính bảng, điện thoại di động). [6]

Bootstrap 3[sửa mã nguồn]

Vào ngày 19 tháng 8 năm 2013, Bootstrap 3, được phát hành. Nó đã 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. Bootstrap 3 có hệ thống plugin mới với các sự kiện được đặt tên. Bootstrap 3 bỏ Internet Explorer 7 và Firefox 3. 6, nhưng có một polyfill tùy chọn cho các trình duyệt này. [7]

Bootstrap 4[sửa mã nguồn]

Otto đã công bố Bootstrap 4 vào ngày 29 tháng 10 năm 2014. [8] Phiên bản alpha đầu tiên của Bootstrap 4 được phát hành vào ngày 19 tháng 8 năm 2015. [9] Phiên bản beta đầu tiên được phát hành vào ngày 10 tháng 8 năm 2017. [10] Otto đã tạm dừng công việc trên Bootstrap 3 vào ngày 6 tháng 9 năm 2016 để có thời gian làm việc trên Bootstrap 4. Bootstrap 4 đã được hoàn thiện vào ngày 18 tháng 1 năm 2018. [11]

Những thay đổi đáng kể bao gồm

  • Viết lại mã chính
  • Thay thế Ít hơn bằng Sass
  • Bổ sung của Reboot, một tập hợp các thay đổi CSS dành riêng cho từng phần tử trong một tệp duy nhất, dựa trên Normalize
  • Ngừng hỗ trợ IE8, IE9 và iOS 6
  • Hỗ trợ Hộp linh hoạt CSS
  • Thêm tùy chọn tùy chỉnh điều hướng
  • Thêm các tiện ích về khoảng cách và kích thước đáp ứng
  • Chuyển từ đơn vị pixel trong CSS sang root ems
  • Tăng kích thước phông chữ chung từ 14px lên 16px để dễ đọc hơn
  • Bỏ các thành phần panel, thumbnail, pagerwell
  • Bỏ phông chữ biểu tượng Glyphicons
  • Số lượng lớn [định lượng] các lớp tiện ích
  • Cải thiện kiểu dáng biểu mẫu, nút, menu thả xuống, đối tượng phương tiện và lớp hình ảnh

Bootstrap 4 hỗ trợ các phiên bản mới nhất của Google Chrome, Firefox, Internet Explorer, Opera và Safari (ngoại trừ trên Windows). Nó cũng hỗ trợ trở lại IE10 và Bản phát hành hỗ trợ mở rộng (ESR) mới nhất của Firefox. [12]

Khi nào tôi nên sử dụng Bootstrap?

1. Bạn muốn có một trang web đáp ứng . Xây dựng một trang web đáp ứng bằng Bootstrap dễ dàng hơn nhiều so với làm từ đầu. Bootstrap đi kèm với các kiểu đáp ứng, như vùng chứa và truy vấn phương tiện, để đảm bảo trang web của bạn điều chỉnh theo chế độ xem.

Ưu điểm chính của Bootstrap là gì?

Ưu điểm của Phát triển Bootstrap là. Ít lỗi trình duyệt chéo hơn . Một khung nhất quán hỗ trợ chính cho tất cả các trình duyệt và các bản sửa lỗi tương thích CSS. Nhẹ và có thể tùy chỉnh. Cấu trúc và phong cách đáp ứng.

Bootstrap hay CSS cái nào tốt hơn?

Cân nhắc việc sử dụng, Bootstrap giúp tạo các thiết kế đáp ứng dễ nhìn hơn trong khi CSS giúp tạo các trang web dễ nhìn .

Bootstrap là CSS hay JavaScript?

Bootstrap là khung CSS miễn phí và mã nguồn mở hướng đến phát triển web giao diện người dùng đầu tiên trên thiết bị di động, đáp ứng. Nó chứa các mẫu thiết kế dựa trên HTML, CSS và (tùy chọn) dựa trên JavaScript cho 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.