Bootstrap 4 Bắt đầu

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 bạn khả năng dễ dàng tạo các thiết kế đáp ứng

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ụ về Bootstrap 4

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

Phiên bản Bootstrap

Hướng dẫn này theo sau Bootstrap 4 , được phát hành vào năm 2018, là bản nâng cấp cho Bootstrap 3 , với các thành phần mới, stylesheetc nhanh hơn, phản hồi nhanh hơn, v.v.

Bootstrap 5 (phát hành năm 2021) là phiên bản mới nhất của Bootstrap ; 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 và 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.

Tại sao sử dụng Bootstrap?

Ưu điểm của Bootstrap:

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, các 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 4 tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer 10+, Edge, Safari và Opera)

Lấy Bootstrap 4 ở đâu?

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

Bạn có thể:

Bao gồm Bootstrap 4 từ CDN
Tải xuống Bootstrap 4 từ getbootstrap.com

Bootstrap 4 CDN

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

jsDelivr cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Bạn cũng phải bao gồm jQuery:

jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Một ưu điểm khi sử dụng CDN Bootstrap 4:
Nhiều người dùng đã tải xuống Bootstrap 4 từ jsDelivr 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 và Popper?
Bootstrap 4 sử dụng jQuery và Popper.js cho các thành phần JavaScript (như phương thức, chú giải công cụ, cửa sổ bật lên, 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 chúng.

Cảnh báo đóng
Các nút và hộp kiểm / nút radio để chuyển đổi trạng thái
Băng chuyền cho các trang trình bày, điều khiển và chỉ báo
Thu gọn để chuyển đổi nội dung
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Tải xuống Bootstrap 4

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

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

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

Bootstrap 4 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 bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác:

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

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

Bootstrap 4 được thiết kế để đáp ứng cho các thiết bị di động. Kiểu ư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 chạm, hãy thêm <meta>thẻ sau vào bên trong <head>phần tử:

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. Thùng chứa

Bootstrap 4 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:

Lớp .containercung cấp một vùng chứa có chiều rộng cố định đáp ứng
Lớp .container-fluidnày cung cấp một vùng chứa có chiều rộng đầy đủ , kéo dài toàn bộ chiều rộng của khung nhìn

.thùng đựng hàng

.container-chất lỏng

Hai trang Bootstrap cơ bản 4 trang

Ví dụ sau cho thấy mã cho trang Bootstrap 4 cơ bản (với vùng chứa chiều rộng cố định đáp ứng):

Ví dụ về vùng chứa

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

Ví dụ sau đây cho thấy mã cho trang Bootstrap 4 cơ bản (với vùng chứa có chiều rộng đầy đủ):

Ví dụ về chất lỏng trong thùng chứa

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ Trước Kế tiếp ❯

Hướng dẫn Bootstrap 4

Bootstrap 4 Grid

Bootstrap 4 Khác

Bootstrap 4 Ref