Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Template Awalan Demo

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menakjubkan Bootstrap dan eksplorasi template awalannya. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengorbit Anda dalam perjalanan ini. Jadi, ambil minuman kesukaan Anda, rajikan diri Anda, dan mari kita mulai!

Bootstrap-Starter template Demo

Apa itu template awalan?

Sebelum kita melompat ke detil template awalan Bootstrap, mari kitaahui apa sebenarnya template awalan itu. Bayangkan itu seperti sebuah resep siap pakai untuk struktur website Anda. Seperti resep yang memberikan Anda bahan-bahan dasar dan panduan untuk membuat makanan yang lezat, template awalan menyediakan Anda HTML, CSS, dan JavaScript yang penting untuk memulai proyek web Anda.

Dalam konteks Bootstrap, template awalan adalah file HTML dasar yang termasuk semua komponen dan dependensi Bootstrap yang diperlukan. Itu seperti memiliki kanvas kosong dengan semua alat lukis Anda sudah disiapkan dan siap digunakan!

Mengapa menggunakan template awalan?

Mungkin Anda berpikir, " Mengapa saya perlu bermasalah dengan template awalan? Bukan saya bisa menulis semuanya dari awal?" Well, Anda benar-benar bisa, tapi mari saya bagikan cerita kecil dari hari-hari teaching awal saya.

Pernah saya punya murid yang bersikeras membuat segala sesuatu dari dasar. Meskipun hal itu dapat dihargai, dia menghabiskan minggu-minggu mencoba untuk memecahkan masalah tata letak dasar yang Bootstrap dapat selesaikan dalam menit. Jangan seperti murid itu - kerjakan lebih cerdas, bukan keras!

Menggunakan template awalan:

  1. Menyimpan waktu
  2. Memastikan Anda memiliki semua dependensi yang diperlukan
  3. Menyediakan titik awal yang konsisten
  4. Mengarahkan Anda untuk fokus pada konten dan fungsionalitas aktual

Sekarang kita mengerti 'mengapa', mari kita lihat 'bagaimana'!

Template Awalan Bootstrap

Ini adalah penampilan template awalan Bootstrap dasar:

<!doctype html>
<html lang="en">
<head>
<!-- Meta tag yang diperlukan -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hallo, dunia!</title>
</head>
<body>
<h1>Hallo, dunia!</h1>

<!-- JavaScript Opsional; pilih salah satu! -->

<!-- Opsi 1: Bootstrap Bundle dengan Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Opsi 2: Popper dan Bootstrap JS Terpisah -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

Mari kitauraikan ini bagian per bagian:

Deklarasi Tipe Dokumen

<!doctype html>

Baris ini mengatakan kepada browser bahwa ini adalah dokumen HTML5. Itu seperti memperkenalkan diri Anda sebelum memulai percakapan - itu menentukan nuansa untuk apa yang akan datang.

Tag HTML

<html lang="en">

Ini membuka dokumen HTML kita dan menentukan bahwa bahasa adalah Inggris. Itu seperti membuka buku dan melihat bahwa itu ditulis dalam Inggris.

Bagian Kepala

<head>
<!-- Meta tag yang diperlukan -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hallo, dunia!</title>
</head>

Bagian <head> berisi metadata tentang dokumen kita. Mari kitauraikan ini:

  1. <meta charset="utf-8">: Ini menentukan penulisan karakter untuk dokumen HTML. UTF-8 adalah penulisan karakter universal yang dapat mewakili karakter apa pun.

  2. <meta name="viewport" content="width=device-width, initial-scale=1">: Ini memastikan bahwa halaman web responsif dan terlihat bagus pada semua perangkat.

  3. Tag <link> mengimpor file CSS Bootstrap dari Content Delivery Network (CDN). Itu seperti mengimpor buku panduan gaya untuk halaman web Anda.

  4. <title>: Ini menentukan judul halaman web Anda, yang muncul di tab browser.

Bagian Tubuh

<body>
<h1>Hallo, dunia!</h1>

<!-- JavaScript Opsional; pilih salah satu! -->

<!-- Opsi 1: Bootstrap Bundle dengan Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Opsi 2: Popper dan Bootstrap JS Terpisah -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

Bagian <body> adalah tempat konten utama halaman web Anda. Dalam template awalan ini, itu termasuk:

  1. Sebuah "Hello, world!" judul sederhana untuk memulai.
  2. File JavaScript untuk fungsionalitas Bootstrap. Anda memiliki dua pilihan:
  • Opsi 1: Sebuah file bundel tunggal yang termasuk Bootstrap dan Popper.js (pustaka yang Bootstrap butuhkan untuk beberapa komponen).
  • Opsi 2: File terpisah untuk Popper.js dan Bootstrap (dikomentari secara default).

Menggunakan Template Awalan

Sekarang kita telah menguraikan template awalan kita, mari kita gunakan itu! Ini adalah contoh sederhana tentang bagaimana kita dapat membangun halaman web menggunakan template ini:

<!doctype html>
<html lang="en">
<head>
<!-- Meta tag yang diperlukan -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Halaman Pertama Bootstrap Saya</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Selamat Datang di Website Saya!</h1>
<p class="lead">Ini adalah unit hero sederhana, komponen gaya jumbotron untuk memberikan perhatian ekstra pada konten atau informasi yang ditampilkan.</p>
<hr class="my-4">
<p>Itu menggunakan kelas utilitas untuk tipografi dan spasi untuk menempatkan konten dalam wadah yang lebih besar.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Pelajari lebih lanjut</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Dalam contoh ini, kita telah menambahkan unit hero ( kotak pesan yang menonjol) sederhana menggunakan kelas Bootstrap. Mari kitauraikan apa yang kita tambahkan:

  1. <div class="container">: Ini membuat wadah responsif lebar tetap.
  2. <h1 class="mt-5">: Kelas mt-5 menambahkan margin ke atas judul.
  3. <p class="lead">: Kelas lead membuat paragraf ini menonjol.
  4. <hr class="my-4">: Ini membuat garis horizontal dengan margin di sumbu y.
  5. <a class="btn btn-primary btn-lg">: Ini membuat tombol besar berwarna utama.

Kesimpulan

Dan begitu saja, teman-teman! Kita telah berpergian melalui negeri template awalan Bootstrap, dari memahami apa itu hingga membuat halaman web sederhana menggunakan salah satunya. Ingat, ini hanya awal. Bootstrap menawarkan banyak komponen dan utilitas yang Anda dapat gunakan untuk membuat website yang responsif dan menarik.

Sekarang, saya teringat tentang murid lain yang saya punya. Dia memulai dengan template ini dan, pada akhir semester, menciptakan situs portofolio yang mendapat magang. Siapa tahu? Mungkin itu akan Anda dalam beberapa bulan mendatang!

Tetap latihan, tetap eksplorasi, dan terutama, bersenang-senang dengan itu. Pengembangan web adalah seni serta ilmu, jadi biarkan kreativitas Anda bersinar. Sampai jumpa lagi, selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Bootstrap-Masonry
Tutorial Seterusnya:
Demo Album Bootstrap RTL