Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Demuran Sistem Blog RTL

Pandangan Umum

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan memulai perjalanan yang menarik ke dunia Bootstrap dan membuat blog yang cantik dengan dukungan RTL (Kanan-ke-Kiri). Jangan khawatir jika Anda baru - saya akan menggイド Anda di setiap langkah dengan kesabaran seorang guru taman kanak-kanak menjelaskan mengapa langit biru. Ayo masuk ke dalam!

Bootstrap-Blog RTL Demo

Apa itu blog?

Sebelum kita mulai mengoding, mari kitaambil sedikit waktu untuk memahami apa itu blog. Bayangkan Anda memiliki catatan digital tempat Anda dapat berbagi pikiran, pengalaman, dan video kucing Anda dengan dunia. Itu esensialnya apa itu blog! Itu adalah situs web di mana entri (disebut "posting") ditampilkan dalam urutan kronologis terbalik, dengan posting terbaru muncul pertama.

Sekarang, mari kita pakai topi pengembang kita dan mulai membuat blog sendiri menggunakan Bootstrap!

Menyiapkan Proyek Kita

Pertama-tama, kita perlu menyiapkan proyek kita. Buat folder baru di komputer Anda dan namakan "bootstrap-blog-rtl". Dalam folder ini, buat file HTML bernama "index.html". Buka file ini di editor teks favorit Anda.

Marilah kita mulai dengan struktur HTML dasar:

<!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 Saya yang Menakjubkan</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>Selamat Datang di Blog RTL Saya yang Menakjubkan!</h1>

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

mari kitauraikan ini:

  1. Kita menetapkan atribut dir ke "rtl" di tag <html> untuk mengaktifkan tata letak kanan-ke-kiri.
  2. Kita menyertakan file CSS Bootstrap dan versi RTL CSS Bootstrap.
  3. Kita menambahkan tag <h1> sederhana untuk menguji halaman kita.
  4. Akhirnya, kita menyertakan bundel JavaScript Bootstrap di akhir body.

Membuat Batang Navigasi

Sekarang, mari kita tambahkan batang navigasi ke blog kita. Kita akan menggunakan komponen navbar Bootstrap untuk ini:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Blog</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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

Kode ini membuat navbar responsif dengan nama merek dan tiga tautan navigasi. Kelas navbar-expand-lg memastikan bahwa navbar akan collapse menjadi menu hamburger pada layar yang lebih kecil.

Membuat Tata Letak Blog

Sekarang, mari kita buat tata letak utama untuk blog kita. Kita akan menggunakan sistem grid Bootstrap untuk membuat tata letak dua kolom:

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Posting blog akan berada di sini -->
</div>
<div class="col-md-4">
<!-- Konten sidebar akan berada di sini -->
</div>
</div>
</div>

Ini menciptakan wadah dengan dua kolom: satu yang lebih lebar untuk posting blog dan satu yang lebih sempit untuk konten sidebar.

Menambahkan Posting Blog

Marilah kita tambahkan beberapa posting blog contoh ke area konten utama:

<div class="col-md-8">
<article class="blog-post">
<h2 class="blog-post-title">Posting Blog Contoh</h2>
<p class="blog-post-meta">1 Januari 2023 oleh <a href="#">Mark</a></p>
<pIni adalah posting blog contoh. Ini dapat berisi teks, gambar, dan elemen HTML lainnya.</p>
<hr>
</article>

<article class="blog-post">
<h2 class="blog-post-title">Posting Blog Lainnya</h2>
<p class="blog-post-meta">15 Februari 2023 oleh <a href="#">Jacob</a></p>
<p>Ini adalah posting blog lainnya. Anda dapat menambahkan sebanyak yang Anda suka!</p>
<hr>
</article>
</div>

Setiap posting blog dibungkus dalam tag <article> untuk HTML semantik. Kita menggunakan kelas tipografi Bootstrap untuk gayakan judul posting dan informasi meta.

Menambahkan Konten Sidebar

Sekarang, mari kita tambahkan beberapa konten ke sidebar kita:

<div class="col-md-4">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Selamat datang di blog saya! Di sini, saya berbagi pikiran tentang pengembangan web, kucing, dan arti hidup.</p>
</div>

<div class="p-4">
<h4 class="font-italic">Arsip</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">Maret 2023</a></li>
<li><a href="#">Februari 2023</a></li>
<li><a href="#">Januari 2023</a></li>
</ol>
</div>
</div>

Ini menambahkan bagian "About" dan daftar "Arsip" ke sidebar kita.

Membuatnya Kompatibel RTL

Blog kita sudah kompatibel RTL karena kita menyertakan CSS Bootstrap RTL sebelumnya. Namun, mari kita tambahkan beberapa CSS pribadi untuk meningkatkan tata letak RTL:

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

Tambahkan ini ke bagian <head> HTML Anda. Ini memastikan bahwa teks diatur ke kanan, item navbar diatur ke kiri (yang adalah kanan dalam RTL), dan informasi meta posting blog diatur ke kiri untuk keadaan baca yang lebih baik.

Kesimpulan

Selamat! Anda telah membuat tata letak blog RTL dasar menggunakan Bootstrap. Berikut adalah tabel yang menggabungkan komponen utama yang kita gunakan:

Komponen Tujuan
Navbar Menu navigasi
Sistem grid Tata letak halaman
Kelas tipografi Gaya teks
Kelas utilitas Spasi dan latar belakang

Ingat, ini hanya permulaan. Anda dapat menyesuaikan blog Anda lebih lanjut dengan menambahkan lebih banyak komponen Bootstrap, mengimplementasikan sistem komentar, atau bahkan mengintegrasikan sistem manajemen konten.

Pengembangan web seperti membangun dengan batu bata LEGO - mulai dari dasar, dan sebelum Anda tahu, Anda akan menciptakan karya master. Tetap latih, stay curious, dan terutama, bersenang-senang!

Selamat coding, para ahli web masa depan! ?‍♂️?

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Bootstrap-Carousel RTL
Tutorial Seterusnya:
Bootstrap-Dashboard RTL Demo