Bootstrap 5 Bắt đầu

Bootstrap là gì?

  • Bootstrap là một khung công tác前端 miễn phí, giúp bạn 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, được sử dụng cho việc bố cục, biểu mẫu, nút bấm, bảng, hướng dẫn, mô đun, hình ảnh cuộn...
  • Bootstrap cung cấp nhiều plugin JavaScript
  • Bootstrap cho phép bạn dễ dàng tạo ra thiết kế tương ứng

Thiết kế trang web tương ứng là gì?

Thiết kế trang web tương ứng được thiết kế để tự động điều chỉnh, nhằm cải thiện trải nghiệm sử dụng trên tất cả các thiết bị, bất kể là điện thoại hay máy tính để bàn lớn.

Bootstrap 5 ví dụ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Trang Bootstrap đầu tiên của tôi</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Cột 1: Mùa xuân</h3>
      <p>Trong ngày đẹp, tìm hương ở bờ sông Sài Gòn, cảnh đẹp không biên giới, một thời mới.</p>
      <p>Ngẫu nhiên nhận ra khuôn mặt của gió đông, hàng vạn sắc màu đều là mùa xuân.</p>
    </div>
    <div class="col-sm-4">
      <h3>Cột 2: Đầu mùa hè</h3>
      <p>Màu hồng và tím đã trở thành bụi, tiếng cục cục của cuốc mùa hè mới.</p>
      <p>Đi giữa con đường, cây mía và cây sơn mía không dừng lại, mới biết mình là người của thời bình.</p>
    </div>
    <div class="col-sm-4">
      <h3>Cột 3: Trên đường núi</h3>
      <p>Đi thẳng lên núi lạnh, con đường đá nghiêng, nơi có nhà ở.</p>
      <p>Đỗ xe ngồi yêu phong cảnh buổi tối, lá đỏ rực hơn hoa tháng Hai.</p>
    </div>
  </div>
</div>

Thử ngay

Phiên bản Bootstrap

Bootstrap 5 (được phát hành vào năm 2021) là phiên bản mới nhất của Bootstrap (được phát hành vào năm 2013); sử dụng các thành phần mới, bảng định dạng nhanh hơn, cung cấp khả năng phản hồi nhanh hơn.

Bootstrap 5 hỗ trợ phiên bản ổn định mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, không hỗ trợ Internet Explorer 11 và các phiên bản cũ hơn.

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

Chú thích:Đội ngũ của họ vẫn hỗ trợ các lỗi quan trọng và thay đổi tài liệu của Bootstrap 3 và Bootstrap 4, vì vậy việc tiếp tục sử dụng chúng是完全 an toàn. Nhưng sẽ không thêm bất kỳ tính năng mới nào.

Tại sao lại sử dụng Bootstrap?

Lợi ích của Bootstrap:

  • Dễ sử dụng:Bất kỳ ai cũng có thể bắt đầu sử dụng Bootstrap ngay lập tức nếu họ có một hiểu biết cơ bản về HTML và CSS.
  • Tính năng tương ứng:CSS tương ứng của Bootstrap có thể được điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn.
  • Cách tiếp cận di động đầu tiên:Trong Bootstrap, phong cách đầu tiên là di động là một phần của khung công việc cơ bản.
  • Tương thích trình duyệt:Bootstrap 5 tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Edge, Safari và Opera).

Lưu ý:Nếu bạn cần hỗ trợ IE11 và các phiên bản dưới, bạn phải sử dụng BS4 hoặc BS3.

Từ đâu lấy Bootstrap 5?

Có hai cách để sử dụng Bootstrap 5 trên trang web của riêng bạn.

Bạn có thể:

  • Chứa Bootstrap 5 từ CDN
  • Tải xuống Bootstrap 5 từ getbootstrap.com

Bootstrap 5 CDN

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

CodeW3C.com cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap:

MaxCDN:

<!-- CSS được biên dịch và nén mới nhất -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript được biên dịch mới nhất -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Một trong những lợi thế của việc sử dụng Bootstrap 5 CDN:

Nhiều người dùng đã tải Bootstrap 5 từ jsDelivr khi truy cập một trang web khác. Do đó, khi họ truy cập trang web của bạn, nó sẽ được tải từ bộ nhớ cache, làm giảm thời gian tải xuống. Ngoài ra, hầu hết CDN sẽ đảm bảo rằng một khi người dùng yêu cầu tệp, nó sẽ được cung cấp từ máy chủ gần nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.

JavaScript?

Bootstrap 5 sử dụng JavaScript cho các thành phần khác nhau (như mô đun, tip, popup...). Nhưng nếu bạn chỉ sử dụng phần CSS của Bootstrap, bạn không cần chúng.

Tải xuống Bootstrap 5

Nếu bạn muốn tải xuống và lưu trữ Bootstrap 5 tự động, hãy truy cập https://getbootstrap.com/thì theo hướng dẫn ở đó.

Tạo trang web đầu tiên của bạn bằng Bootstrap 5

1. Thêm doctype HTML5

Bootstrap 5 sử dụng các phần tử HTML và thuộc tính CSS cần doctype HTML5.

Luôn bao gồm HTML5 doctype ở đầu trang, cũng như thuộc tính lang và tiêu đề, bộ mã hóa đúng đắn:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 ví dụ</title>
    <meta charset="utf-8">
  </head>
</html>

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

Mục tiêu thiết kế của Bootstrap 5 là đáp ứng các thiết bị di động. Kiểu dáng ưu tiên cho thiết bị di động là một phần của khung công tác.

Để đảm bảo hiển thị và phóng to cảm ứng chính xác, hãy <head> Thêm các yếu tố sau vào phần tử <meta> Định nghĩa:

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

width=device-width Đặt chiều rộng của trang để theo dõi screen-width của thiết bị (sẽ khác nhau theo thiết bị).

initial-scale=1 Đặt mức độ phóng to ban đầu khi trình duyệt tải trang lần đầu.

3. Khung

Bootstrap 5 vẫn cần một phần tử bao bọc để chứa nội dung của trang web.

Có hai lớp hộp可供选择：

  1. .container Lớp cung cấp hộp chứa chiều rộng cố định đáp ứng
  2. .container-fluid Lớp cung cấp hộp chứa toàn rộng, trải dài toàn bộ độ rộng của khung nhìn

Hai trang Bootstrap cơ bản 5

Thực例 container

Dưới đây là mã của trang web Bootstrap cơ bản 5 (có hộp chứa chiều rộng cố định đáp ứng):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Thực例 Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Trang Bootstrap đầu tiên của tôi</h1>
  <p>Phần này nằm trong lớp .container.</p>
  <p>Lớp .container cung cấp hộp chứa chiều rộng cố định đáp ứng.</p>
</div>
</body>
</html>

Thử ngay

Thực例 Container Fluid

Dưới đây là mã của trang web Bootstrap cơ bản 5 (có hộp chứa toàn rộng):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Thực例 Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Trang Bootstrap đầu tiên của tôi</h1>
  <p>Phần này nằm trong lớp .container-fluid.</p>
  <p>.container-fluid cung cấp hộp chứa toàn rộng, trải dài toàn bộ độ rộng của khung nhìn.</p>
</div>
</body>
</html>

Thử ngay