Giới thiệu Bootstrap 3

Bootstrap là gì


  • Bootstrap là một front-end framework miễn phí để phát triển web nhanh hơn và dễ dàng hơn
  • Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác, cũng như các plugin JavaScript tùy chọn
  • Bootstrap cũng cung cấp cho chúng ta khả năng dễ dàng tạo các thiết kế đáp ứng responsive
Thiết kế web đáp ứng là gì?
Thiết kế web đáp ứng là việc tạo các trang web tự động điều chỉnh để có giao diện đẹp trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn.

Ví dụ

<div class="jumbotron text-center">
  <h1>Website với Bootstrap</h1>
  <p>Thay đổi kích thước trình duyệt để xem hiệu ứng</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Văn bản paragraph...</p>
      <p>Văn bản paragraph khác...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Văn bản paragraph...</p>
      <p>Văn bản paragraph khác...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Văn bản paragraph...</p>
      <p>Văn bản paragraph khác...</p>
    </div>
  </div>
</div>

Xem kết quả

Lịch sử Bootstrap


Bootstrap được phát triển bởi Mark OttoJacob Thornton tại Twitter, và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub.

Vào tháng 6 năm 2014 Bootstrap là dự án số 1 trên GitHub!

Tại sao nên sử dụng Bootstrap?


Ưu điểm của Bootstrap là:

  • Dễ sử dụng: Bất kỳ ai chỉ có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
  • Các tính năng đáp ứng: CSS đáp ứng của Bootstrap điều chỉnh phù hợp với điện thoại, máy tính bảng và máy tính để bàn
  • Phương pháp ưu tiên thiết bị di động: Trong Bootstrap 3, kiểu ưu tiên thiết bị di động là một phần của khuôn khổ cốt lõi
  • Khả năng tương thích của trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)

Phiên bản Bootstrap


Bài viết này hướng dẫn về Bootstrap 3 , được phát hành vào năm 2013. Tuy nhiên, chúng ta cũng sẽ đề cập đến các phiên bản mới hơn, như Bootstrap 4 (phát hành 2018) và Bootstrap 5 (phát hành 2021).

Bootstrap 5 là phiên bản mới nhất của Bootstrap, với các thành phần mới, bảng định kiểu nhanh hơn, phản hồi nhanh hơn, v.v. Nó hỗ trợ các bản phát hành mới nhất, ổn định của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ.

Sự khác biệt chính giữa Bootstrap 5 so với Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery.

Lưu ý: Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ cho các bản sửa lỗi và thay đổi tài liệu quan trọng và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng.

Lấy Bootstrap ở đâu?


Có hai cách để bắt đầu sử dụng Bootstrap trên trang web.

Chúng ta có thể

  • Tải xuống Bootstrap từ getbootstrap.com
  • Liên kết tới file Bootstrap từ CDN

Nếu muốn tự tải xuống và lưu trữ Bootstrap, chúng ta truy cập getbootstrap.com và làm theo hướng dẫn tại đó.

Bootstrap CDN


Nếu không muốn tự tải xuống và lưu trữ Bootstrap, chúng ta có thể đưa nó vào từ CDN (Mạng phân phối nội dung).

MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Chúng ta cũng phải liên kết với thư viện jQuery.

MaxCDN

<!-- CSS được biên dịch và rút gọn mới nhất -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- Thư viện jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- JavaScript được biên dịch mới nhất -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Một lợi thế của việc sử dụng Bootstrap CDN
Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập trang web khác. Do đó, nó sẽ được tải từ bộ nhớ cache khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu tệp từ tệp đó, tệp đó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.

jQuery
Bootstrap sử dụng jQuery cho các plugin JavaScript (như phương thức, chú giải công cụ, v.v.). Tuy nhiên, nếu bạn chỉ sử dụng phần CSS của Bootstrap, bạn không cần jQuery.

Tạo trang web đầu tiên với Bootstrap


1. Thêm loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5.

Luôn thêm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự utf-8.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 ưu tiên thiết bị di động

Bootstrap 3 được thiết kế để đáp ứng các thiết bị di động. Phong cách ưu tiên thiết bị di động là một phần của khuôn khổ cốt lõi.

Để đảm bảo hiển thị phù hợp và phóng to khi chạm, chúng ta phải thêm thẻ <meta> sau vào bên trong phần tử <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Phần width=device-width đặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).

Phần initial-scale=1 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

3. Container

Bootstrap cũng yêu cầu một phần tử chứa để bao bọc nội dung trang web.

Có hai lớp vùng chứa để lựa chọn:

  1. Lớp .container cung cấp một vùng chứa có chiều rộng cố định đáp ứng
  2. Lớp .container-fluid cung cấp một vùng chứa có chiều rộng đầy đủ, mở rộng toàn bộ chiều rộng của khung nhìn
.container
.container-fluid