Bootstrap - Persiapan Lingkungan

Hai, para pengembang web yang sedang belajar! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ke dunia Bootstrap. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak siswa terangsang saat mereka menyadari seberapa banyak Bootstrap dapat meningkatkan keterampilan pengembangan web mereka. Jadi, mari kita masuk dan mengatur lingkungan Bootstrap kami!

Bootstrap - Environment Setup

Apa Itu Bootstrap?

Sebelum kita mulai, mari secara cepat mengulang apa itu Bootstrap. Bayangkan Anda membangun sebuah rumah. Bootstrap seperti sebuah paket prefabricat yang memberikan Anda semua bagian esensial untuk membangun rumah yang kokoh dan menarik secara cepat. Dalam istilah pengembangan web, itu adalah kerangka front-end yang kuat yang menyediakan komponen dan gaya yang terbuat sebelumnya untuk membantu Anda membuat website responsif, mobile-first dengan mudah.

CSS dan JS yang Dikompilasi

Cara termudah untuk mulai menggunakan Bootstrap adalah dengan memasukkan file CSS dan JavaScript yang dikompilasi ke dalam proyek Anda. Itu seperti mendapatkan set alat siap pakai - Anda tidak perlu mengatur alat itu sendiri!

Berikut adalah cara untuk memasukkan Bootstrap ke dalam file HTML Anda:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Bootstrap Saya</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten Anda disini -->

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

Dalam contoh ini, kita menghubungkan file CSS Bootstrap di bagian <head> dan memasukkan file JavaScript sebelum tag </body> ditutup. Hal ini memastikan bahwa gaya dimuat terlebih dahulu, dan JavaScript dijalankan setelah konten halaman dimuat.

File Sumber

Untuk Anda yang suka memodifikasi dan merancang (saya melihat Anda, para pengembang masa depan!), Bootstrap juga menyediakan file sumber. Ini adalah bahan mentah yang membentuk Bootstrap, ditulis dalam Sass dan JavaScript.

Untuk menggunakan file sumber, Anda akan perlu mengatur proses build menggunakan task runner seperti Gulp atau Webpack. Ini sedikit lebih tingkat tinggi, jadi kita akan simpan itu untuk pelajaran berikutnya. Hanya ingat, itu seperti memiliki resep dan bahan untuk membuat kue dari awal daripada membeli yang sudah jadi!

CDN melalui jsDelivr

CDN singkatan dari Content Delivery Network. Itu seperti memiliki banyak salinan buku di perpustakaan di seluruh dunia - pengguna dapat mengakses salinan terdekat secara cepat. jsDelivr adalah CDN gratis, open-source yang menyediakan file Bootstrap.

Berikut adalah cara untuk menggunakan Bootstrap melalui jsDelivr:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Atribut integrity dan crossorigin adalah untuk keamanan. Itu seperti shake-hand rahasia yang memastikan Anda mendapatkan file tepat yang Anda harapkan.

Manajer Paket

Untuk proyek yang lebih tingkat tinggi, Anda mungkin menggunakan manajer paket seperti npm atau yarn. Ini adalah tools yang membantu mengelola dependensi proyek Anda. Pahami ini sebagai asisten pribadi yang mencatat semua bahan yang Anda butuhkan untuk resep pengembangan web Anda.

Untuk menginstal Bootstrap menggunakan npm, Anda akan membuka terminal dan mengetik:

npm install bootstrap

Kemudian di file JavaScript Anda, Anda dapat mengimpor Bootstrap seperti ini:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

Template HTML

Sekarang, mari kita gabungkan semuanya dalam template HTML dasar:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hallo, Dunia Bootstrap!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Template ini termasuk meta tag yang diperlukan, tautan ke file CSS dan JS Bootstrap melalui CDN, dan judul "Hello, Bootstrap World!" untuk memulai.

Kesimpulan

Selamat! Anda baru saja mengatur lingkungan Bootstrap Anda. Itu seperti Anda baru saja membuka set alat dan menata semua alat Anda. Sekarang Anda siap untuk memulai membangun website responsif yang menakjubkan.

Ingat, kunci untuk menguasai Bootstrap (atau teknologi apa pun) adalah latihan. Jangan takut untuk mencoba dan membuat kesalahan - itu adalah bagaimana kita semua belajar. Dalam tahun-tahun pengajaran saya, saya telah melihat siswa dari pemula menjadi menciptakan website yang memukau dalam waktu singkat dengan Bootstrap.

Dalam pelajaran berikutnya, kita akan mempelajari cara menggunakan sistem grid Bootstrap untuk membuat tata letak. Itu akan menarik, jadi tunggu saja!

Selamat mengoding, dan semoga website Anda selalu responsif! ??

Metode	Deskripsi	Kemudahan Penggunaan	Personalisasi
CSS dan JS yang Dikompilasi	Gunakan file Bootstrap yang dikompilasi	Mudah	Terbatas
File Sumber	Gunakan file sumber Bootstrap	Tingkat Tinggi	Tinggi
CDN melalui jsDelivr	Hubungkan ke file Bootstrap yang disimpan di CDN	Sangat Mudah	Terbatas
Manajer Paket	Install Bootstrap menggunakan npm atau yarn	Sedang	Sedang

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Pandangan Umum

Tutorial Seterusnya:

Bootstrap - RTL