Bootstrap - Pengaturan Lingkungan

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

Bootstrap - Environment Setup

Apa Itu Bootstrap?

Sebelum kita mulai, mari kita singkatkan apa itu Bootstrap. Bayangkan Anda membangun sebuah rumah. Bootstrap adalah seperti sebuah kit prefabricat yang memberikan Anda semua bagian esensial untuk membangun rumah yang kokoh dan menarik secara cepat. Dalam istilah pengembangan web, itu adalah kerangka depan yang kuat yang menyediakan komponen dan gaya yang sudah dibuat sebelumnya untuk membantu Anda membuat situs web responsif, mobile-first dengan mudah.

CSS dan JS Terkompilasi

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

Berikut adalah cara Anda dapat menyertakan Bootstrap dalam file HTML Anda:

<!DOCTYPE html>
<html lang="id">
<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 dalam <head> dan menyertakan file JavaScript sebelum tag </body> ditutup. Hal ini memastikan 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 bangunan menggunakan task runner seperti Gulp atau Webpack. Ini agak lebih tingkat lanjut, jadi kita akan simpan itu untuk pelajaran berikutnya. Tetap ingat, itu seperti memiliki resep dan bahan untuk memanggang kue dari awal daripada membeli yang siap pakai!

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 bebas, open-source yang menyediakan file Bootstrap.

Berikut adalah cara 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 sebuah salam rahasia yang memastikan Anda mendapatkan file tepat yang Anda harapkan.

Manajer Pakej

Untuk proyek yang lebih tingkat lanjut, Anda mungkin menggunakan manajer pakej seperti npm atau yarn. Ini adalah tools yang membantu mengelola dependensi proyek Anda. Pergunakan seperti seorang 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 dalam file JavaScript Anda, Anda dapat mengimpor Bootstrap seperti ini:

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

Template HTML

Sekarang, mari kita gabungkan semua itu dalam template HTML dasar:

<!doctype html>
<html lang="id">
<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 "Halo, Dunia Bootstrap!" untuk memulai.

Kesimpulan

Selamat! Anda baru saja mengatur lingkungan Bootstrap Anda. Itu seperti Anda baru saja membuka kotak alat dan menata semua alat Anda. Sekarang Anda siap untuk mulai membangun situs web responsif yang menakjubkan.

Ingat, kunci untuk menguasai Bootstrap (atau teknologi apa pun) adalah latihan. Jangan takut untuk mencoba dan membuat kesalahan - itu adalah cara kita belajar. Dalam tahun-tahun mengajar saya, saya telah melihat siswa dari pemula menjadi menciptakan situs web yang menakjubkan 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!

Happy coding, dan semoga situs web Anda selalu responsif! ??

Metode	Deskripsi	Mudah Digunakan	Kostumisasi
CSS dan JS Terkompilasi	Gunakan file Bootstrap yang sudah terkompilasi	Mudah	Terbatas
File Sumber	Gunakan file sumber Bootstrap	Tingkat Lanjut	Tinggi
CDN melalui jsDelivr	Hubungkan ke file Bootstrap yang disimpan di CDN	Sangat Mudah	Terbatas
Manajer Pakej	Install Bootstrap menggunakan npm atau yarn	Sedang	Sedang

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Tinjauan

Tutorial Selanjutnya:

Bootstrap - RTL