Menambahkan Framework Bootstrap pada Halaman Web

Bootstrap berisi kumpulan kode css yang bisa dipanggil dalam halaman HTML. Dengan memakai Bootstrap desainer halaman web akan lebih mudah dalam membuat berbagai macam efek dalam websitenya tanpa harus membuat kode css sendiri. Tidak hanya css, bootstrap juga berisi kumpulan kode Javascript.

Untuk menambahkan Bootstrap dalam halaman web, langkah pertama adalah mendownload Bootstrap di situs resmi Bootstrap, http://getbootstrap.com/. Setelah di download anda akan mendapat file zip, misal: bootstrap-3.3.7-dist.zip. ekstrak zip file tersebut, anda akan mendapatkan sebuah folder bootstrap yang berisi folder css, font, dan js. Copy ketiga folder tersebut kedalam folder dimana script HTML anda berada.

Selanjutnya hubungkan bootstrap dengan file HTML dengan memakai tag <link rel="stylesheet" href="lokasi bootsrap css">. File yang perlu dihubungkan ke HTML adalah bootstrap.min.css yang berada dalam folder css, tagnya menjadi seperti ini:

<link href="css/bootstrap.min.css" rel="stylesheet">  

Letakkan tag tersebut diposisi paling atas script, tepatnya dibawah tag <head>. Selanjutnya hubungkan file bootstrap javascript yang berada dalam folder js dengan cara memakai tag <script src="Lokasi bootstrap javascript"></script>. File yang perlu dihubungkan adalah bootsrap.min.js yang berada dalam folder js, tagnya menjadi seperti ini:

<script src="js/bootstrap.min.js"></script>  

Letakkan tag tersebut di paling bawah script, diatas tag </body>.

Pada artikel ini, penulis akan menggunakan bootstrap css untuk mengubah tombol submit pada web contoh pada artikel sebelumnya dengan tombol yang disediakan oleh bootsrap. hasilnya akan menjadi seperti ini:
alt

Jika dilihat pada situs bootstrap maka tag yang diperlukan adalah:

<button type="button" class="btn btn primary">Primary</button>  

Pada artikel sebelumnya, bagian pada script yang membentuk tombol submit adalah:

<input type="submit">  

Ganti dengan tag yang disediakan oleh bootstrap. keseluruhan script HTML akan menjadi seperti ini:

<!DOCTYPE html>  
<head>  
<link href="css/bootstrap.min.css" rel="stylesheet">  
<link href="normalize.css" rel="stylesheet">  
<title>Web Latihan</title>  
<style>  
    body {
        text-align: center;
        background: url("asset/background.png");
        background-size: cover;
        background-position: center;
        color: white;
        font-family: helvetica;
    }
    p {
        font-size: 22px;
    }
    input {
        border: 0;
        padding: 10px;
        font-size: 18px;
    }
    input[type="submit"] {
        color: white;
        background: red;
    }
</style>  
</head>  
<body>  
<img src="asset\avatar.png" height="260" width="260">  
<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<button type="button" class="btn btn-primary">Submit</button>  
<script src="jquery-3.1.1.min.js"></script>  
<script src="js/bootstrap.min.js"></script>  
</body>  

Untuk mengetahui fungsi-fungsi dari Bootstrap dapat dilihat di http://getbootstrap.com/css/ dan http://getbootstrap.com/javascript/.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.