Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Mẫu Khởi Động Demo

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của Bootstrap và khám phá mẫu khởi động của nó. Như một giáo viên khoa học máy tính gần gũi, tôi rất hứng thú dẫn dắt các bạn trong hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và bắt đầu nào!

Bootstrap-Starter template Demo

Mẫu khởi động là gì?

Trước khi chúng ta nhảy vào chi tiết của mẫu khởi động Bootstrap, hãy hiểu xem mẫu khởi động thực sự là gì. Hãy tưởng tượng nó như một công thức sẵn có cho cấu trúc website của bạn. Cũng như một công thức nấu ăn cho bạn các nguyên liệu cơ bản và hướng dẫn để tạo ra một món ăn ngon, một mẫu khởi động cung cấp cho bạn HTML, CSS và JavaScript cần thiết để khởi động dự án web của bạn.

Trong ngữ cảnh của Bootstrap, một mẫu khởi động là một tệp HTML cơ bản bao gồm tất cả các thành phần và phụ thuộc cần thiết của Bootstrap. Nó giống như có một canvas trống với tất cả các công cụ vẽ đã được thiết lập sẵn và sẵn sàng sử dụng!

Tại sao sử dụng mẫu khởi động?

Bạn có thể tự hỏi, "Tại sao tôi phải phiền phức với mẫu khởi động? Tôi không thể chỉ viết tất cả từ đầu sao?" Well, bạn hoàn toàn có thể, nhưng hãy để tôi chia sẻ một câu chuyện nhỏ từ những ngày dạy học đầu tiên của tôi.

Tôi từng có một học sinh kiên quyết xây dựng mọi thứ từ nền tảng. Mặc dù đáng admire, anh ấy đã phải vật lộn trong tuần với các vấn đề布局 cơ bản mà Bootstrap có thể giải quyết trong vài phút. Đừng giống như học sinh đó - làm thông minh hơn, không phải làm chăm chỉ hơn!

Sử dụng mẫu khởi động:

  1. Tiết kiệm thời gian
  2. Đảm bảo bạn có tất cả các phụ thuộc cần thiết
  3. Cung cấp một điểm bắt đầu nhất quán
  4. Giúp bạn tập trung vào nội dung và chức năng thực tế

Bây giờ chúng ta đã hiểu tại sao, hãy xem cách thế nào!

Mẫu Khởi Động Bootstrap

Dưới đây là giao diện của một mẫu khởi động Bootstrap cơ bản:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

Hãy phân tích nó từng phần:

Khai báo Loại Tài Liệu

<!doctype html>

Dòng này cho biết đây là một tài liệu HTML5. Nó giống như giới thiệu bản thân trước khi bắt đầu một cuộc trò chuyện - nó thiết lập tone cho tất cả những gì tiếp theo.

Thẻ HTML

<html lang="en">

Thẻ này mở tài liệu HTML của chúng ta và chỉ định rằng ngôn ngữ là tiếng Anh. Nó giống như mở một cuốn sách và thấy rằng nó được viết bằng tiếng Anh.

Phần Đầu

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

Phần <head> chứa siêu dữ liệu về tài liệu của chúng ta. Hãy phân tích nó:

  1. <meta charset="utf-8">: Chỉ định mã hóa ký tự cho tài liệu HTML. UTF-8 là một mã hóa ký tự universel có thể đại diện cho bất kỳ ký tự nào.

  2. <meta name="viewport" content="width=device-width, initial-scale=1">: Đảm bảo rằng trang web là响应式 và trông tốt trên tất cả các thiết bị.

  3. Thẻ <link> nhập tệp CSS của Bootstrap từ một Mạng Phát Hành Nội Dung (CDN). Điều này giống như nhập một cuốn sách hướng dẫn styling cho trang web của bạn.

  4. <title>: Đặt tiêu đề của trang web, xuất hiện trong thẻ tab của trình duyệt.

Phần Thân

<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

Phần <body> là nơi chứa nội dung chính của trang web. Trong mẫu khởi động này, nó bao gồm:

  1. Một tiêu đề đơn giản "Hello, world!" để bắt đầu.
  2. Các tệp JavaScript cho chức năng Bootstrap. Bạn có hai lựa chọn:
  • Lựa chọn 1: Một tệp gộp duy nhất bao gồm cả Bootstrap và Popper.js (thư viện mà Bootstrap phụ thuộc cho một số thành phần).
  • Lựa chọn 2: Các tệp riêng biệt cho Popper.js và Bootstrap (được注释 bằng default).

Sử dụng Mẫu Khởi Động

Bây giờ chúng ta đã phân tích mẫu khởi động, hãy sử dụng nó! Dưới đây là một ví dụ đơn giản về cách chúng ta có thể xây dựng trên mẫu này:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Trang Web Đầu Tiên Của Tôi</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Chào mừng đến với website của tôi!</h1>
<p class="lead">Đây là một đơn vị hero đơn giản, một thành phần phong cách jumbotron để gọi sự chú ý额外 cho nội dung hoặc thông tin nổi bật.</p>
<hr class="my-4">
<p>Nó sử dụng các lớp tiện ích cho typography và khoảng cách để giãn cách nội dung trong một container lớn hơn.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Tìm hiểu thêm</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Trong ví dụ này, chúng ta đã thêm một đơn vị hero đơn giản (một hộp thông báo nổi bật) sử dụng các lớp Bootstrap. Hãy phân tích những gì chúng ta đã thêm:

  1. <div class="container">: Tạo một container có độ rộng cố định响应式.
  2. <h1 class="mt-5">: Lớp mt-5 thêm margin ở trên tiêu đề.
  3. <p class="lead">: Lớp lead làm cho đoạn văn này nổi bật.
  4. <hr class="my-4">: Tạo một đường ngang với margin trên trục y.
  5. <a class="btn btn-primary btn-lg">: Tạo một nút lớn có màu xanh lam.

Kết Luận

Và thế là chúng ta đã cùng nhau khám phá thế giới của các mẫu khởi động Bootstrap, từ việc hiểu chúng là gì đến việc tạo một trang web đơn giản sử dụng một mẫu. Nhớ rằng, đây chỉ là bắt đầu. Bootstrap cung cấp rất nhiều thành phần và tiện ích mà bạn có thể sử dụng để tạo ra các trang web stunning và响应式.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh khác của tôi. Cô ấy bắt đầu với mẫu này và cuối cùng đã tạo ra một trang web danh mục đầu tư giúp cô ấy có được một thực tập. Ai biết được? có lẽ sẽ là bạn trong vài tháng tới!

Hãy tiếp tục thực hành, khám phá, và quan trọng nhất, hãy vui vẻ với nó. Lập trình web không chỉ là khoa học mà còn là nghệ thuật, vì vậy hãy để sáng tạo của bạn tỏa sáng. Đến gặp lại lần sau, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Bootstrap-Masonry
Hướng Dẫn Tiếp Theo:
Demo Album Bootstrap RTL