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 - Blog RTL Demo

Tổng quan

Xin chào các bạn nhà phát triển web đang follow! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Bootstrap và tạo một blog đẹp mắt với hỗ trợ RTL (Trái sang Phải). Đừng lo lắng nếu bạn mới làm quen với điều này - tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn của một giáo viên mẫu giáo giải thích tại sao trời lại xanh. Hãy cùng bắt đầu!

Bootstrap-Blog RTL Demo

Blog là gì?

Trước khi bắt đầu lập mã, hãy cùng nhau hiểu thế nào là một blog. Hãy tưởng tượng bạn có một nhật ký số nơi bạn có thể chia sẻ suy nghĩ, trải nghiệm và video về mèo với thế giới. Đó chính xác là gì đó giống như một blog! Đó là một trang web nơi các bài viết (gọi là "bài đăng") được hiển thị theo thứ tựChronological ngược, với các bài đăng mới nhất xuất hiện đầu tiên.

Bây giờ, hãy đội mũ nhà phát triển và bắt đầu xây dựng blog của riêng chúng ta bằng Bootstrap!

Thiết lập dự án

Đầu tiên, chúng ta cần thiết lập dự án. Tạo một thư mục mới trên máy tính của bạn và đặt tên nó là "bootstrap-blog-rtl". Trong thư mục này, tạo một tệp HTML tên là "index.html". Mở tệp này trong trình soạn thảo văn bản yêu thích của bạn.

Hãy bắt đầu với cấu trúc HTML cơ bản:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog RTL Tuyệt vời của Tôi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<h1>Chào mừng đến với Blog RTL Tuyệt vời của Tôi!</h1>

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

Hãy phân tích này:

  1. Chúng ta đặt thuộc tính dir thành "rtl" trong thẻ <html> để启用 right-to-left layout.
  2. Chúng ta bao gồm tệp CSS của Bootstrap và phiên bản RTL của CSS Bootstrap.
  3. Chúng ta thêm một thẻ <h1> đơn giản để kiểm tra trang.
  4. Cuối cùng, chúng ta bao gồm gói JavaScript của Bootstrap ở cuối thẻ <body>.

Tạo thanh导航

Bây giờ, hãy thêm một thanh导航 vào blog của chúng ta. Chúng ta sẽ sử dụng thành phần navbar của Bootstrap cho điều này:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog 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 một thanh导航响应 với tên thương hiệu và ba liên kết điều hướng. Class navbar-expand-lg đảm bảo rằng thanh导航 sẽ thu gọn thành một menu hamburger trên màn hình nhỏ hơn.

Tạo bố cục Blog

Bây giờ, hãy tạo bố cục chính cho blog của chúng ta. Chúng ta sẽ sử dụng hệ thống lưới của Bootstrap để tạo một bố cục hai cột:

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Các bài đăng 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 một hộp chứa với hai cột: một cột rộng hơn cho các bài đăng blog và một cột hẹp hơn cho nội dung cột bên.

Thêm các bài đăng Blog

Hãy thêm một số bài đăng blog mẫu vào khu vực nội dung chính:

<div class="col-md-8">
<article class="blog-post">
<h2 class="blog-post-title">Bài đăng Blog 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 bài đăng blog mẫu. Nó có thể chứa văn bản, hình ảnh và các yếu tố HTML khác.</p>
<hr>
</article>

<article class="blog-post">
<h2 class="blog-post-title">Bài đăng Blog Khác</h2>
<p class="blog-post-meta">Ngày 15 tháng 2, 2023 bởi <a href="#">Jacob</a></p>
<p>Đây là một bài đăng blog mẫu khác. Bạn có thể thêm bao nhiêu bài đăng tùy thích!</p>
<hr>
</article>
</div>

Mỗi bài đăng blog được bao bọc trong thẻ <article> để có HTML ngữ nghĩa. Chúng ta sử dụng các class typography của Bootstrap để định dạng tiêu đề bài đăng và thông tin meta.

Thêm nội dung Cột bên

Bây giờ, hãy thêm một số nội dung vào cột bên của chúng ta:

<div class="col-md-4">
<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 đến với blog của tôi! Tại đây, tôi chia sẻ suy nghĩ của mình về phát triển web, mèo và ý nghĩa của cuộc sống.</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>

Điều này thêm một phần "Về chúng tôi" và một danh sách "Lưu trữ" vào cột bên.

Làm cho nó Hỗ trợ RTL

Blog của chúng ta đã hỗ trợ RTL thanks to Bootstrap RTL CSS mà chúng ta đã bao gồm trước đó. Tuy nhiên, hãy thêm một chút CSS tùy chỉnh để cải thiện hơn nữa bố cục RTL:

<style>
body {
text-align: right;
}
.navbar-nav {
margin-right: auto;
margin-left: 0 !important;
}
.blog-post-meta {
text-align: left;
}
</style>

Thêm này vào phần <head> của HTML. Điều này đảm bảo rằng văn bản được căn phải, các mục navbar được căn trái (đ Điều này là phải trong RTL), và thông tin meta của bài đăng blog được căn trái để dễ đọc hơn.

Kết luận

Chúc mừng! Bạn vừa tạo xong một bố cục blog cơ bản với RTL bằng Bootstrap. Dưới đây là bảng tóm tắt các thành phần chính chúng ta đã sử dụng:

Thành phần Mục đích
Navbar Menu điều hướng
Hệ thống lưới Bố cục trang
Các class typography Định dạng văn bản
Các class tiện ích Khoảng cách và nền

Nhớ rằng, đây chỉ là bước đầu. Bạn có thể tùy chỉnh blog của mình thêm bằng cách thêm nhiều thành phần Bootstrap hơn, triển khai một hệ thống bình luận, hoặc thậm chí tích hợp một hệ thống quản lý nội dung.

Phát triển web giống như xây dựng với LEGO - bắt đầu từ cơ bản, và trước khi bạn biết điều đó, bạn sẽ tạo ra những kiệt tác. Hãy tiếp tục thực hành, luôn tò mò và quan trọng nhất, hãy vui vẻ!

Chúc mừng coding, các pháp sư web tương lai! ?‍♂️?

Credits: Image by storyset

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