Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - RTL: Panduan Lengkap untuk Pemula

Halo teman-teman future web developers! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ke dunia Bootstrap RTL. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya telah melihat banyak siswa terangsang saat mereka memahami konsep ini. Jadi, mari kita masuk dan buat sesuatu yang magis!

Bootstrap - RTL

Apa Itu Bootstrap RTL?

Sebelum kita mulai, mari kitaura apa yang dimaksudkan oleh Bootstrap RTL. RTL berarti "Kanan-ke-Kiri," dan ini adalah fitur penting untuk situs web yang perlu mendukung bahasa seperti Arab, Ibrani, atau Urdu, yang dibaca dari kanan ke kiri.

Bayangkan mencoba membaca kalimat ini terbalik - itu adalah rasa yang dimiliki pengguna bahasa RTL saat mereka menemui situs web LTR (Kiri-ke-Kanan). Bootstrap RTL hadir untuk menyelamatkan hari!

Persyaratan

Untuk memulai dengan Bootstrap RTL, Anda akan memerlukan:

  1. Editor teks (Saya merekomendasikan Visual Studio Code - itu gratis dan fantastik!)
  2. Browser web (Chrome, Firefox, atau browser favorit Anda)
  3. Bootstrap 5 (kami akan membahas bagaimana mengikutsertakan ini)
  4. Sedikit kecurigaan dan sedikit kegembiraan!

Template Awal

Ayo kita mulai dengan template dasar. Jangan khawatir jika tampak menakutkan - kita akan membongkar itu bagian per bagian!

<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template Bootstrap RTL</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>

mari kitaura ini:

  1. <html lang="ar" dir="rtl">: Ini menetapkan bahasa ke Arab dan arah ke kanan-ke-kiri.
  2. Tag <meta> memastikan rendering yang benar dan zum sentuh.
  3. Kami menautkan ke versi RTL Bootstrap CSS.
  4. Tubuh berisi "Hello, World!" dalam Arab.
  5. Kami masukkan bundel Bootstrap JavaScript di akhir.

Kustomisasi dari Sumber

Untuk Anda yang merasa lebih petualang, kita dapat mengkustomisasi Bootstrap dari file sumbernya. Ini seperti memasak kue dari nol bukannya menggunakan campuran - lebih banyak kerja, tapi sungguh menyenangkan!

  1. Unduh file sumber Bootstrap dari situs web resmi.
  2. Temukan folder scss.
  3. Cari file _variables.scss.
  4. Cari variabel $enable-rtl dan setel ke true:
$enable-rtl: true;
  1. Recompile file SCSS Anda, dan voila! Anda mendapatkan versi RTL Bootstrap yang khusus.

Nilai RTL Khusus

Sekarang, mari kita kreatif! Kita dapat mengkustomisasi nilai RTL tertentu sesuai kebutuhan kita. Ini contohnya:

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

Variabel ini memungkinkan kita untuk menambahkan prefiks kelas RTL dan mengaktifkan transformasi RTL. Itu seperti memberikan website Anda penataan RTL yang khusus!

Stack Font Alternatif

Saat bekerja dengan bahasa RTL, kita seringkali perlu menggunakan font yang berbeda. Ini cara kita mengatur stack font alternatif:

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

Ini memastikan bahwa teks RTL kita tampak indah dan mudah dibaca di berbagai perangkat dan browser.

RTL dan LTR pada Waktu Yang Sama

kadang-kadang kita perlu mendukung keduanya, RTL dan LTR, dalam proyek yang sama. Itu seperti menjadi bilingual, tapi untuk desain web! Ini cara kita mencapai ini:

<div class="row">
<div class="col-6">
<p class="text-start">Teks rata kiri di semua ukuran viewport.</p>
</div>
<div class="col-6">
<p class="text-end">Teks rata kanan di semua ukuran viewport.</p>
</div>
</div>

Dalam contoh ini, kita menggunakan kelas perataan teks Bootstrap untuk membuat tata letak yang bekerja untuk keduanya RTL dan LTR.

kasus Breadcrumb

Breadcrumb adalah alat navigasi klasik, tapi mereka memerlukan perhatian khusus dalam tata letak RTL. mari kita lihat bagaimana menerapkan breadcrumb yang ramah 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>

Dukungan RTL Bootstrap secara otomatis membalik arah breadcrumb, memastikan mereka membaca dengan benar dalam bahasa RTL.

Kesimpulan

Dan itu adalah, teman-teman! Kita telah melakukan perjalanan melalui dunia Bootstrap RTL, dari template dasar hingga konfigurasi khusus. Ingat, kunci untuk menjadi ahli ini (dan konsep coding lainnya) adalah latihan. Jadi, ayo percobaan contoh ini, rusakkan sesuatu, perbaiki mereka, dan yang paling penting, bersenang-senang!

Seperti yang saya selalu katakan kepada murid-muridku, coding adalah seperti belajar bahasa baru - itu membuka dunia baru dari kemungkinan. Dengan Bootstrap RTL, Anda tidak hanya belajar coding; Anda belajar membuat situs web yang inklusif dan dapat diakses secara global. Dan di dunia terhubung saat ini, itu adalah kekuatan yang berharga!

Terus coding, terus belajar, dan ingat - di dunia pengembangan web, arah satu-satunya adalah ke depan ( bahkan saat kita sedang mengoding untuk RTL)!

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Pengaturan Lingkungan
Tutorial Selanjutnya:
Bootstrap - Variabel CSS