Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - RTL: Panduan Lengkap untuk Pemula

Hai sana, para pengembang web masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia Bootstrap RTL. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya telah melihat banyak siswa yang 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 dengan Bootstrap RTL. RTL berarti "Kanan-ke-Kiri," dan ini adalah fitur penting bagi situs web yang perlu mendukung bahasa seperti Arab, Ibrani, atau Urdu, yang dibaca dari kanan ke kiri.

Imaginasi jika Anda mencoba membaca kalimat ini ke belakang - itu seperti rasa pengguna bahasa RTL saat mereka menemukan situs web LTR (Kiri-ke-Kanan). Bootstrap RTL disini untuk menyelamatkan hari!

Persyaratan

Untuk memulai dengan Bootstrap RTL, Anda akan memerlukan:

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

Template Awal

Mari kita mulai dengan template dasar. Jangan khawatir jika terlihat menakutkan - kita akan membongkar nya piece by piece!

<!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 mengatur bahasa ke Arab dan arah ke kanan-ke-kiri.
  2. Tag <meta> memastikan rendering yang benar dan zoom sentuh.
  3. Kita menautkan ke versi RTL Bootstrap CSS.
  4. Body berisi "Hello, World!" dalam Bahasa Arab.
  5. Kita masukkan bundle Bootstrap JavaScript di akhir.

Menyesuaikan dari Sumber

Untuk Anda yang merasa lebih petarung, kita dapat menyesuaikan Bootstrap dari file sumbernya. Ini seperti membuat kue dari nol bukannya menggunakan campuran - lebih banyak kerja, tapi sungguh memuaskan!

  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 nya ke true:
$enable-rtl: true;
  1. Recompile file SCSS Anda, dan voila! Anda memiliki versi RTL Bootstrap yang disesuaikan.

Nilai RTL Terspesifik

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

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

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

Stack Font Alternatif

Ketika bekerja dengan bahasa RTL, kita seringkali memerlukan font yang berbeda. Berikut cara kita dapat mengatur stack font alternatif:

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

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

RTL dan LTR Secara Bersamaan

kadang-kadang, kita perlu mendukung RTL dan LTR dalam proyek yang sama. Itu seperti menjadi dwibahasa, tapi untuk desain web! Berikut cara kita dapat 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 penjajaran teks Bootstrap untuk membuat tata letak yang cocok untuk kedua RTL dan LTR.

Kasus Breadcrumb

Breadcrumb adalah bantuan 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 dibaca dengan benar dalam bahasa RTL.

Kesimpulan

Dan begitu saja, teman-teman! Kita telah melintasi dunia Bootstrap RTL, dari template dasar hingga konfigurasi khusus. Ingat, kunci untuk memahami ini (dan konsep coding apa pun) adalah latihan. Jadi, buruan cobalah contoh ini, perbaiki hal yang rusak, dan terutama, 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 mengoding; Anda belajar membuat situs web inklusif dan dapat diakses secara global. Dan dalam dunia yang terhubung saat ini, itu adalah kekuatan yang berharga!

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

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Tetapan Persekitaran
Tutorial Seterusnya:
Bootstrap - Variabel CSS