Bootstrap - RTL: Hướng dẫn toàn diện cho người mới bắt đầu

Xin chào các bạnfuture web developers! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình đầy thú vị vào thế giới của Bootstrap RTL. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi đã chứng kiến rất nhiều sinh viên tỏa sáng khi họ lĩnh hội được những khái niệm này. Vậy, hãy cùng nhau nhảy vào và tạo nên điều kỳ diệu!

Bootstrap - RTL

Bootstrap RTL là gì?

Trước khi bắt đầu, hãy cùng nhau hiểu rõ Bootstrap RTL thực sự có nghĩa là gì. RTL viết tắt của "Right-to-Left," và nó là một tính năng quan trọng cho các trang web cần hỗ trợ các ngôn ngữ như阿拉伯语, Hebrew, hoặc Urdu, những ngôn ngữ này được đọc từ phải sang trái.

Hãy tưởng tượng việc cố gắng đọc câu này ngược lại - đó là cách người dùng ngôn ngữ RTL cảm thấy khi họ gặp một trang web từ trái sang phải (LTR). Bootstrap RTL ra đời để cứu nguy!

Yêu cầu

Để bắt đầu với Bootstrap RTL, bạn sẽ cần:

Một trình soạn thảo văn bản (Tôi khuyên dùng Visual Studio Code - nó miễn phí và tuyệt vời!)
Một trình duyệt web (Chrome, Firefox, hoặc trình duyệt bạn ưa thích)
Bootstrap 5 (chúng ta sẽ xem cách bao gồm này)
Một chút tò mò và một chút niềm đam mê!

Mẫu bắt đầu

Hãy cùng bắt đầu với một mẫu cơ bản. Đừng lo lắng nếu nó trông có vẻ đáng sợ - chúng ta sẽ phân tích nó từng phần!

<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap RTL Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
</head>
<body>
<h1>مرحبا بالعالم!</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:

<html lang="ar" dir="rtl">: Đặt ngôn ngữ là阿拉伯语 và hướng là từ phải sang trái.
The <meta> tags đảm bảo việc hiển thị và zoom chạm đúng cách.
Chúng ta liên kết với phiên bản RTL của Bootstrap CSS.
Thân của trang chứa một câu "Hello, World!" bằng阿拉伯语.
Chúng ta bao gồm bộ JavaScript của Bootstrap ở cuối.

Tùy chỉnh từ mã nguồn

Đối với những bạn muốn thử nghiệm nhiều hơn, chúng ta có thể tùy chỉnh Bootstrap từ các tệp nguồn. Điều này giống như nướng bánh từ scratch thay vì sử dụng hỗn hợp - nhiều công việc hơn, nhưng oh thế nào tuyệt vời!

Tải xuống các tệp nguồn Bootstrap từ trang web chính thức.
Tìm thư mục scss.
Tìm tệp _variables.scss.
Tìm biến $enable-rtl và đặt nó thành true:

$enable-rtl: true;

Recompile các tệp SCSS của bạn, và voilà! Bạn đã có một phiên bản RTL tùy chỉnh của Bootstrap.

Giá trị RTL tùy chỉnh

Bây giờ, hãy trở nên sáng tạo! Chúng ta có thể tùy chỉnh các giá trị RTL cụ thể để phù hợp với nhu cầu của mình. Dưới đây là một ví dụ:

$rtl-prefix: "rtl-";
$enable-rtl-transform: true;

Những biến này cho phép chúng ta thêm tiền tố RTL cho các lớp và bật chuyển đổi RTL. Điều này giống như tặng trang web của bạn một cuộc cải tạo RTL tùy chỉnh!

Bộ phông chữ thay thế

Khi làm việc với các ngôn ngữ RTL, chúng ta thường cần sử dụng các phông chữ khác nhau. Dưới đây là cách chúng ta có thể thiết lập một bộ phông chữ thay thế:

$font-family-sans-serif:
"Segoe UI",
"Tahoma",
"Helvetica",
"Arial",
sans-serif;

Điều này đảm bảo rằng văn bản RTL của chúng ta trông đẹp và dễ đọc trên các thiết bị và trình duyệt khác nhau.

RTL và LTR cùng một lúc

Đôi khi, chúng ta cần hỗ trợ cả RTL và LTR trong cùng một dự án. Điều này giống như việc biết hai ngôn ngữ, nhưng cho thiết kế web! Dưới đây là cách chúng ta có thể đạt được điều này:

<div class="row">
<div class="col-6">
<p class="text-start">Văn bản canh trái trên tất cả các kích thước viewport.</p>
</div>
<div class="col-6">
<p class="text-end">Văn bản canh phải trên tất cả các kích thước viewport.</p>
</div>
</div>

Trong ví dụ này, chúng ta sử dụng các lớp căn chỉnh văn bản của Bootstrap để tạo một bố cục hoạt động cho cả RTL và LTR.

Trường hợp Breadcrumb

Breadcrumbs là một công cụ导航 klassisch, nhưng chúng cần sự chú ý đặc biệt trong các bố cục RTL. Hãy cùng xem cách implement breadcrumbs thân thiện với RTL:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>

Hỗ trợ RTL của Bootstrap tự động đảo ngược hướng của breadcrumbs, đảm bảo chúng đọc chính xác trong các ngôn ngữ RTL.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Bootstrap RTL, từ mẫu cơ bản đến cấu hình tùy chỉnh. Nhớ rằng, chìa khóa để thành thạo điều này (và bất kỳ khái niệm lập trình nào) là thực hành. Vậy, hãy tiếp tục, thử nghiệm với các ví dụ này, làm hỏng chúng, sửa chúng, và quan trọng nhất, hãy vui vẻ!

Như tôi luôn nói với sinh viên của mình, lập trình giống như học một ngôn ngữ mới - nó mở ra một thế giới mới của khả năng. Với Bootstrap RTL, bạn không chỉ đang học cách mã hóa; bạn đang học cách tạo ra các trang web bao gồm, khả dụng toàn cầu. Và trong thế giới liên kết ngày nay, đó là một siêu năng lực đáng có!

Tiếp tục mã hóa, tiếp tục học hỏi, và nhớ - trong thế giới phát triển web,唯一的 hướng là tiến lên (ngay cả khi chúng ta đang mã hóa cho RTL)!

Credits: Image by storyset

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

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

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

Bootstrap - Biến CSS