Bootstrap - Overview

Xin chào các bạn đang học phát triển web! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình đầyExciting này vào thế giới của Bootstrap. Như một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng Bootstrap là một trong những công cụ mạnh mẽ nhất bạn sẽ gặp trong cuộc phiêu lưu phát triển web của mình. Vậy, chúng ta cùng bắt đầu nào!

What is Bootstrap?

Bootstrap giống như một cây kéo đa năng cho các nhà phát triển web. Nó là một khung công tác front-end miễn phí, mã nguồn mở giúp xây dựng các trang web responsive, mobile-first một cách dễ dàng. Hãy tưởng tượng nó như một bộ sưu tập các phong cách CSS đã viết sẵn và các plugin JavaScript mà bạn có thể sử dụng để tạo ra các trang web đẹp mắt và功能性 mà không cần bắt đầu từ đầu.

A Quick Analogy

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Không có Bootstrap, bạn sẽ phải cắt từng mảnh gỗ, trộn tất cả xi măng và tạo từng đinh mình. Với Bootstrap, nó giống như bạn có một nhà kho đầy các bộ phận đã được làm sẵn. Bạn chỉ cần chọn những gì bạn muốn và lắp ráp chúng lại với nhau. Nhanh hơn phải không?

History of Bootstrap

Bootstrap không phải lúc nào cũng là một güç mạnh như hiện nay. Hãy cùng回顾 một chút lịch sử:

2010: Các kỹ sư của Twitter là Mark Otto và Jacob Thornton đã tạo ra Bootstrap như một công cụ nội bộ để đảm bảo sự nhất quán giữa các dự án của họ.
2011: Bootstrap được phát hành ra công chúng dưới dạng một dự án mã nguồn mở.
2013: Bootstrap 3 đã giới thiệu một cách tiếp cận mobile-first.
2018: Bootstrap 4 đã mang lại những cải tiến lớn và các tính năng mới.
2021: Bootstrap 5 được phát hành, loại bỏ sự phụ thuộc vào jQuery và giới thiệu các thành phần mới.

Key Points in Bootstrap 5 and Later Versions

Bootstrap 5 và các bản cập nhật tiếp theo đã mang lại một số tính năng thay đổi lớn:

Dropped jQuery: Giảm kích thước của khung công tác và cải thiện hiệu suất.
Enhanced Grid System: Độ linh hoạt hơn trong việc tạo các bố cục responsive.
New Utilities: Các lớp tiện ích bổ sung cho việc tùy chỉnh dễ dàng hơn.
Improved Documentation: Đơn giản hóa việc học cho người mới bắt đầu.
Dark Mode: Hỗ trợ nội tại cho việc tạo các trang web với giao diện tối.

Bootstrap - Advantages

Tại sao bạn nên sử dụng Bootstrap? Dưới đây là một số lý do thuyết phục:

Responsive Design: Bootstrap giúp trang web của bạn trông tuyệt vời trên tất cả các thiết bị.
Consistency: Đảm bảo một giao diện nhất quán trên các trình duyệt khác nhau.
Customizable: Bạn có thể dễ dàng tùy chỉnh Bootstrap để phù hợp với nhu cầu của mình.
Time-Saving: Các thành phần预先构建 giúp tăng tốc quá trình phát triển.
Large Community: Có rất nhiều tài nguyên và hỗ trợ có sẵn trực tuyến.

Bootstrap - Important Globals

Trước khi chúng ta bắt đầu mã hóa, hãy nhìn qua một số thiết lập toàn cục quan trọng trong Bootstrap:

HTML5 Doctype: Bootstrap yêu cầu sử dụng doctype HTML5.
Responsive Meta Tag: Đảm bảo việc hiển thị chính xác trên các thiết bị di động.
Box-sizing: Bootstrap đặt box-sizing: border-box toàn cục.
Reboot: Cung cấp một nền tảng nhất quán trên các trình duyệt khác nhau.

Dưới đây là một mẫu HTML cơ bản với các thiết lập toàn cục này:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bootstrap Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>

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

Mẫu này thiết lập một cấu trúc HTML cơ bản với Bootstrap được bao gồm. Thẻ viewport meta tag đảm bảo việc hiển thị chính xác trên các thiết bị di động, và chúng ta đã liên kết đến các tệp CSS và JavaScript của Bootstrap.

Use of CDN

Bây giờ, hãy nói về cách thực sự bao gồm Bootstrap trong dự án của bạn. Một trong những cách dễ nhất là sử dụng CDN (Content Delivery Network).

What's a CDN?

Hãy tưởng tượng nếu bạn phải đi đến thư viện trung tâm mỗi lần bạn muốn đọc một cuốn sách. Điều đó sẽ chậm phải không? CDN giống như việc có nhiều thư viện phân bố địa lý. Nó phục vụ các tệp Bootstrap từ máy chủ gần người dùng nhất, giúp trang web của bạn tải nhanh hơn.

Dưới đây là cách bạn bao gồm Bootstrap qua CDN:

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

<!-- JavaScript (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Chỉ cần thêm các dòng này vào phần <head> của tệp HTML của bạn, và bạn đã sẵn sàng để bắt đầu sử dụng Bootstrap!

A Simple Bootstrap Example

Hãy össa lại tất cả với một ví dụ đơn giản:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Bootstrap Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="mt-5">Welcome to Bootstrap!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

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

Ví dụ này tạo ra một phần "hero" đơn giản với một tiêu đề, một đoạn văn bản và một nút. Hãy phân tích nó:

<div class="container">: Tạo một hộp chứa responsive để căn giữa nội dung.
class="mt-5": Thêm margin ở trên tiêu đề.
class="lead": Làm cho đoạn văn bản nổi bật với cỡ chữ lớn hơn.
class="my-4": Thêm margin ở trên và dưới của đường ngang.
class="btn btn-primary btn-lg": Tạo một nút lớn có màu xanh lam.

Conclusion

Chúc mừng! Bạn đã chính thức bước vào thế giới của Bootstrap. Chúng ta đã bao gồm các alap, từ việc Bootstrap là gì và lịch sử của nó, đến cách bao gồm nó trong dự án của bạn và tạo một trang web đơn giản.

Nhớ rằng, học phát triển web giống như học nấu ăn. Ban đầu, bạn có thể làm theo các công thức (như các ví dụ của chúng tôi) một cách chính xác. Nhưng khi bạn trở nên thoải mái hơn, bạn sẽ bắt đầu thử nghiệm và tạo ra các "món ăn" độc đáo của riêng mình. Vậy đừng ngại thử nghiệm với Bootstrap và xem bạn có thể tạo ra điều gì!

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào hệ thống lưới của Bootstrap và cách nó giúp việc thiết kế responsive trở nên dễ dàng. Hẹn gặp lại các bạn!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Trang chủ

Hướng Dẫn Tiếp Theo:

Bootstrap - Thiết lập môi trường