Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Template Awal Demo

Halo sana, para pengembang web yang berbakat! Hari ini, kita akan masuk ke dunia yang menakjubkan Bootstrap dan mengexplore template awalnya. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai!

Bootstrap-Starter template Demo

Apa Itu Template Awal?

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

Dalam konteks Bootstrap, template awal 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 Awal?

Anda mungkin berpikir, " Mengapa harus bermasalah dengan template awal? Bisakah saya menulis segalanya dari awal?" Well, Anda tentu bisa, tapi biarkan saya sharesuatu cerita dari hari-hari awal mengajar saya.

Pernah saya punya murid yang bersikeras membuat segalanya dari awal. Meskipun hal itu memuji, dia memerlukan minggu-minggu untuk berjuang dengan masalah layout dasar yang Bootstrap bisa sepertiga menyelesaikan dalam menit. Jangan seperti murid itu - kerjakan lebih cerdas, bukan keras!

Menggunakan template awal:

  1. Menyimpan waktu
  2. Memastikan Anda memiliki semua dependensi yang diperlukan
  3. Menyediakan titik awal yang konsisten
  4. Membantu Anda fokus pada konten dan fungsi sebenarnya

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

Template Awal Bootstrap

Berikut ini adalah gambaran template awal Bootstrap dasar:

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

<!-- Bootstrap CSS -->
<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 memberitahu browser bahwa ini adalah dokumen HTML5. Itu seperti memperkenalkan diri Anda sebelum memulai sebuah percakapan - itu menentukan nada untuk apa yang akan datang.

Tag HTML

<html lang="id">

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

Bagian Kepala

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

<!-- Bootstrap CSS -->
<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 penyetelan karakter untuk dokumen HTML. UTF-8 adalah penyetelan karakter universal yang dapat merepresentasikan 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 CDN. Itu seperti mengimpor buku panduan gaya untuk halaman web Anda.

  4. <title>: Ini menentukan judul halaman 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 awal ini, itu termasuk:

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

Menggunakan Template Awal

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

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

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

<title>Halaman Bootstrap Pertama 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 meminta 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 heading.
  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 melakukan perjalanan melalui dunia template awal Bootstrap, dari memahami apa itu hingga membuat halaman web sederhana menggunakan salah satunya. Ingat, ini hanya permulaan. Bootstrap menyediakan banyak komponen dan utilitas yang Anda dapat gunakan untuk membuat website yang responsif dan menakjubkan.

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

Terus latih, terus eksplorasi, dan terutama, bersenang-senang dengan itu. Pengembangan web adalah seni serta ilmu, jadi biarkan kreativitas Anda bersinar. Sampaijumpa lagi, selamat coding!

Credits: Image by storyset

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