Bootstrap - Blog Demo

Blog là gì?

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của blogging bằng Bootstrap. Nhưng trước khi chúng ta bắt đầu viết mã, hãy dành một chút thời gian để hiểu rõ hơn về blog là gì.

Blog, viết tắt của "weblog", là một trang web hoặc trang web được cập nhật thường xuyên, thường được điều hành bởi một cá nhân hoặc nhóm nhỏ, được viết với phong cách không chính thức hoặc đối thoại. Nó giống như một日记 điện tử nơi mọi người chia sẻ suy nghĩ, kinh nghiệm hoặc kiến thức của mình về nhiều chủ đề khác nhau.

Tôi nhớ khi lần đầu tiên tôi bắt đầu blogging vào đầu những năm 2000. Đó là một cách mạng để kết nối với những người trên khắp thế giới có cùng sở thích. Bây giờ, hãy cùng xem chúng ta có thể tạo ra blog riêng của mình bằng Bootstrap như thế nào!

Thiết lập Blog Demo Bootstrap của chúng ta

Bước 1: Cấu trúc HTML cơ bản

Hãy bắt đầu với cấu trúc HTML cơ bản cho blog của chúng ta. Tạo một tệp mới có tên index.html và thêm mã sau:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Awsome Của Tôi</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung blog của chúng ta sẽ ở đây -->

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

Điều này thiết lập cấu trúc HTML cơ bản và bao gồm các tệp CSS và JavaScript cần thiết của Bootstrap. Hãy tưởng tượng nó như khung xương của blog của chúng ta - chúng ta sẽ thêm phần nội dung và thiết kế sau!

Bước 2: Tạo thanh điều hướng

Bây giờ, hãy thêm thanh điều hướng vào blog của chúng ta. Chèn mã sau ngay sau thẻ <body>:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Blog Awsome Của Tôi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Về chúng tôi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên hệ</a>
</li>
</ul>
</div>
</div>
</nav>

Mã này tạo ra một thanh điều hướng phản hồi với các liên kết đến Trang chủ, Về chúng tôi và Liên hệ. Class navbar-expand-lg đảm bảo rằng thanh điều hướng sẽ mở rộng trên màn hình lớn và thu gọn thành một menu hamburger trên màn hình nhỏ. Nó giống như một GPS cho blog của bạn - giúp người đọc điều hướng qua nội dung của bạn!

Bước 3: Thêm khu vực nội dung chính

Tiếp theo, hãy tạo khu vực nội dung chính cho các bài viết blog của chúng ta. Thêm mã này sau thanh điều hướng:

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Bài viết blog sẽ ở đây -->
</div>
<div class="col-md-4">
<!-- Nội dung cột bên sẽ ở đây -->
</div>
</div>
</div>

Điều này tạo ra một container với hai cột: một cho các bài viết blog (8 cột rộng) và một cho cột bên (4 cột rộng). Nó giống như chia phòng ngủ của bạn thành một khu vực học tập và một khu vực thư giãn - mỗi khu vực phục vụ một mục đích cụ thể!

Bước 4: Tạo một bài viết blog

Bây giờ, hãy thêm một bài viết blog mẫu. Chèn mã này vào nơi chúng ta để lại chú thích cho các bài viết blog:

<article class="blog-post">
<h2 class="blog-post-title">Bài viết mẫu</h2>
<p class="blog-post-meta">Ngày 1 tháng 1, 2023 bởi <a href="#">Mark</a></p>

<p>Đây là một đoạn văn bản mẫu bổ sung. Nó được viết để lấp đầy không gian khả dụng và cho thấy cách một đoạn văn bản dài hơn ảnh hưởng đến nội dung xung quanh. Chúng ta sẽ lặp lại nó nhiều lần để duy trì demo, vì vậy hãy để ý đến đoạn văn bản này.</p>

<h3>Phụ đề</h3>
<p>Đây là một đoạn văn bản mẫu bổ sung. Nó được viết để lấp đầy không gian khả dụng và cho thấy cách một đoạn văn bản dài hơn ảnh hưởng đến nội dung xung quanh. Chúng ta sẽ lặp lại nó nhiều lần để duy trì demo, vì vậy hãy để ý đến đoạn văn bản này.</p>

<a href="#" class="btn btn-primary">Đọc thêm</a>
</article>

Điều này tạo ra một bài viết blog đơn giản với tiêu đề, thông tin meta, các đoạn văn bản và một nút "Đọc thêm". Nó giống như viết một lá thư cho độc giả của bạn, chia sẻ suy nghĩ và ý tưởng của bạn!

Bước 5: Thêm nội dung cột bên

Cuối cùng, hãy thêm một chút nội dung vào cột bên của chúng ta. Chèn mã này vào nơi chúng ta để lại chú thích cho nội dung cột bên:

<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">Về chúng tôi</h4>
<p class="mb-0">Chào mừng bạn đến với Blog Awsome Của Tôi! Tại đây, tôi chia sẻ suy nghĩ của mình về công nghệ, lập trình và cuộc sống của một nhà phát triển.</p>
</div>

<div class="p-4">
<h4 class="font-italic">Lưu trữ</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">Tháng 3 năm 2023</a></li>
<li><a href="#">Tháng 2 năm 2023</a></li>
<li><a href="#">Tháng 1 năm 2023</a></li>
</ol>
</div>

<div class="p-4">
<h4 class="font-italic">Khác</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>

Điều này thêm một phần "Về chúng tôi", một lưu trữ các bài viết và các liên kết đến các hồ sơ mạng xã hội. Nó giống như thêm một touch cá nhân vào blog của bạn, cho phép người đọc biết thêm về bạn và những gì bạn đã viết!

Kết luận

Và thế là bạn đã có một cấu trúc cơ bản cho một blog Bootstrap! Tất nhiên, đây chỉ là bước đầu. Bạn có thể tùy chỉnh màu sắc, thêm nhiều bài viết hơn, bao gồm hình ảnh và nhiều hơn nữa. Cách tiếp cận quan trọng là bắt đầu đơn giản và từ từ phát triển.

Nhớ rằng, việc tạo một blog không chỉ liên quan đến mã - nó còn liên quan đến việc chia sẻ giọng nói của bạn với thế giới. Vậy đừng ngại thử nghiệm, mắc lỗi và quan trọng nhất là tận hưởng!

Chúc mừng bạn với mã lập trình, và mong rằng blog của bạn sẽ đầy ắp nội dung tuyệt vời để khuyến khích và giáo dục người khác!

Phương pháp	Mô tả
Bootstrap CDN	Sử dụng để bao gồm các tệp CSS và JS của Bootstrap
Container	Tạo một container trung tâm cho nội dung
Row	Tạo một nhóm cột ngang
Col	Định nghĩa chiều rộng cột cho các kích thước màn hình khác nhau
Navbar	Tạo một tiêu đề điều hướng phản hồi
Article	Element HTML5 ngữ nghĩa cho nội dung độc lập, tự bao gồm
Button	Tạo một nút có thể nhấp

Credits: Image by storyset

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

Bootstrap - Demo 导航

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

Bootstrap - Demo Trượt