Dalam tutorial ini kalian akan belajar betapa mudahnya membuat halaman web menggunakan Bootstrap. Tetapi sebelum mulai, pastikan untuk memiliki editor kode dan beberapa pengetahuan HTML dan CSS.
Baiklah, mari kita mulai membuat halaman web dengan bootstrap pertama kalian.
Membuat Halaman Web Pertama Kalian dengan Bootstrap
Sekarang kita akan membuat template Bootstrap dasar dengan memasukkan Bootstrap CSS dan file JS, serta dependensi JavaScript lainnya seperti jQuery dan Popper.js melalui CDN.
Kami menyarankan untuk menambahkan Bootstrap di proyek kalian melalui CDN (Content Delivery Network) karena CDN menawarkan manfaat kinerja dengan mengurangi waktu loading, karena mereka meng-hosting file di beberapa server yang tersebar di seluruh dunia sehingga ketika user meminta file itu akan dilayani dari server yang terdekat dengan mereka. Kami juga menggunakan tautan CDN dalam contoh berikut:
Langkah 1: Membuat File HTML Basic
Buka editor kode favorit kalian dan buat file HTML baru. Mulailah dengan jendela kosong dan ketikkan kode berikut dan simpan sebagai “basic.html” di desktop kalian.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Basic HTML File</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Tip: Selalu sertakan tag viewport <meta> di dalam bagian <head> dokumen kalian untuk mengaktifkan touch zooming dan memastikan rendering yang tepat pada perangkat seluler.
Langkah 2: Membuat File HTML ini sebagai Templat Bootstrap
Untuk membuat file HTML sederhana ini menjadi template Bootstrap, cukup sertakan file Bootstrap CSS dan JS serta jQuery dan Popper.js yang diperlukan menggunakan tautan CDN mereka.
Kalian harus memasukkan file JavaScript di bagian bawah halaman, tepat sebelum tag penutup </body> untuk meningkatkan kinerja halaman web kalian, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Basic Bootstrap Template</title>
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Dan kita siap! Setelah menambahkan CSS Bootstrap dan file JS dan library jQuery dan Popper.js yang diperlukan, kita dapat mulai mengembangkan situs atau aplikasi apa pun dengan framework Bootstrap.
Atribut integrity dan crossorigin telah ditambahkan ke tautan CDN untuk menerapkan Subresource Integrity (SRI). Ini adalah fitur keamanan yang memungkinkan kalian untuk mengurangi risiko serangan yang berasal dari CDN yang dikompromikan, dengan memastikan bahwa file yang diambil oleh situs web kalian (dari CDN atau di mana pun) telah dikirimkan tanpa modifikasi yang tidak berbahaya. Hal ini memungkinkan kalian untuk memberikan cryptographic hash file yang diambil harus cocok.
Langkah 3: Menyimpan dan Melihat File
Sekarang simpan file di desktop kalian sebagai “bootstrap-template.html”.
Untuk membuka file ini di browser web, navigasikan ke sana, lalu klik kanan padanya, dan pilih browser web favorit kalian. Atau, kalian dapat membuka browser dan menarik file ini ke sana.
Catatan: Adalah penting bahwa ekstensi .html ditentukan, karena jika tidak beberapa editor teks, seperti Notepad pada Windows, secara otomatis akan menyimpannya sebagai .txt .
Download File Bootstrap
Atau, kalian juga dapat mengunduh file CSS dan JS Bootstrap dari situs web resmi mereka dan termasuk juga proyek kalian. Ada dua versi yang tersedia untuk diunduh, compiled Bootstrap dan Bootstrap source. Kalian dapat mengunduh file Bootstrap 4 dari sini.
Compiled download berisi versi CSS dan JavaScript yang dikompilasi dan diperkecil untuk mempercepat web dan memudahkan dalam mengembangkan web tersebut. Namun versi yang dikompilasi tidak termasuk dependensi opsional JavaScript seperti jQuery dan Popper.js. Sedangkan, source download berisi file sumber asli untuk semua CSS dan JavaScript, bersama dengan salinan lokal dokumen.
Unduh dan unzip compile Bootstrap. Sekarang jika kalian melihat ke dalam folder kalian akan menemukannya berisi file CSS dan JS yang dikompilasi (bootstrap. *), Serta CSS dan JS yang dikompilasi dan diperkecil (bootstrap.min. *). Gunakan file bootstrap.min.css dan bootstrap.min.js.
Menggunakan versi CSS dan JS file yang diperkecil akan meningkatkan kinerja situs web kalian dan akan menghemat bandwidth karena permintaan HTTP dan ukuran unduhan yang lebih kecil.
