Bootstrap : Definisi, instalasi

Definisi Bootstrap

Bootstrap adalah library framework CSS untuk desaign web baik itu front end maupun back end yang dirancang khusus memadukan antara HTML, Javascript dan CSS. Bootstrap banyak digunakan oleh programmer web base terutama di Indonesia, salah satu website terkenal yang menggunakan Bootstrap adalah Twitter.

Membuat web dengan bootstrap sebagai desain template sangat mudah dilakukan, kita hanya mengikuti aturan-aturan class yang telah ditetapkan oleh bootrap, Contoh Bootstrap dalam membuat tombol, kita hanya menambahkan class “btn” ke dalam tag tombol tersebut ( <button class="btn btn-default" type="submit">Button</button> ).

Cara Instalasi Bootstrap

Dalam membuat website menggunakan bootstrap tentunya kita harus mendownload library bootstrap terlebih dahulu. Library Bootstrap bisa didapatkan di situs resminya yaitu getbootstrap.com. Di situs tersebut di jelaskan bagaimana menggunakan class-class. Berikut ini bagaimana cara instalasi bootstrap :

Masuk ke website bootstrap yaitu getboostrap.com.
Klik tombol “Download Bootstrap”.
Ekstrak file bootstrap ke dalam folder yang berisi website yang ingin kita bangun. Hasil ekstrak bootstrap berisi 3 buah folder yaitu CSS, fonts dan js.

Penjelasan masing - masing Folder :

Sebelum melangkah lebih jauh dalam pembuatan website, kita simak lebih dahulu penjelasan dari masing-masing folder Bootstrap yang telah kita download. Simak penjelasan sebagai berikut.

Folder CSS

Di dalam folder CSS terdiri dari 8 buah file, yaitu :

bootstrap.css
bootstrap.min.css
bootstrap.css.map
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.min.css
bootstrap-theme.css.map
bootstrap-theme.css.min.map

Folder fonts

Di dalam folder fonts terdiri dari 5 buah file, yaitu :

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

Folder js

Di dalam folder js terdiri dari 3 buah file, yaitu :

bootstrap.js
bootstrap.min.js
npm.js

Cara menggunakan bootstrap

Dalam menggunakan Bootstrap kita hanya perlu menuliskan beberapa kode diantara tag pembuka dan penutup head HTML. Berikut ini contoh cara menggunakan Boostrap :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1> Hello, world! </h1>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>  <script src="js/bootstrap.min.js"></script> </body> </html>