Apa itu Bootstrap Dan Cara Pengunaannya

Bootstrap
Apa itu Bootstrap Dan Cara Pengunaannya

Bootstrap adalah sebuah framework yang mampu mengatasi kesulitan maupun permasalahan pada website. Agar website itu  terlihat lengkap, maka itu Bootstrap dengan segala kelengkapannya yang dibutuhkan pada masalah design baik itu menggunakan CSS maupun javascript, sudah disajikan begitu mudah, menarik dan tentunya mampu menyelesaikan design secara cepat. Tampilan yang juga responsive pada banyak platform, tetap rapi baik pada tampilan versi desktop maupun pada versi mobile .

Bootstrap digunakan pada design front-end web, dan itu masih akan terus berkembang sampai sekarang. Dengan penggunaan yang terbilang ringan, kita hanya memanggil CSS atau pun Javascript yang sudah disediakan kemudian menuliskannya pada koding kita dengan disesuaikannya class-class yang dibutuhkan.

Oleh karena itu, mari kita mengenal leboh jauh tentang bootstrap serta mengetahui cara penggunaannya.

Struktur Pada Bootstrap


Untuk menggunakan bootstrap dan mengenal fungsinya

Untuk menggunakan Bootstrap terlebih dahulu anda mengunjungi web ini untuk mengunduh file bootstrap http://getbootstrap.com/getting-started/.

Bootstrap

Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah :D Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip. Dan berikut cara penggunaannya.

1. Ekstrak File Bootstrap 

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.

bootstrap-3.3.6-dist/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

2. Buatlah Sebuah File 
Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<div class="container">
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</html>
<!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>
</body>
Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

3. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada


<link href="css/bootstrap.min.css" rel="stylesheet">
Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css. 

4. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada

<script src="js/bootstrap.min.js"></script>
Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

 Pastikan JQuery terpanggil Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja. Oke, jika semuanya sudah aman, coba silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.

Hasil Menggunakan Bootstrap

Demikianlah apa yang dimaksud dengan bootstrap serta cara menggunakannya.

Comments