Assalamu’alaikum
Apa kabar teman ?, baiklah kali ini kami akan menjelaskan tentang Bootstrap. Pernah dengar gak??,
Sebelum mengetahui apa itu bootstrap,kita akan mengenal terlebih dahulu sejarahnya.
Bootstrap dibuat pada tahun 2011 oleh dua orang programer twitter yang bernama mark octo dan jacob thornton, saat itu bootstrap digunakan di lingkungan internal twitter. Nama lain dari Bootstrap adalah Twitter Bootstrap.
Pada januari 2012, Bootstrap merilis versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout, sejak itu popularitas Bootstrap tak tertahankan lagi dan sampai saat ini Bootstrap merupakan projek GitHub yang paling banyak di copy (forked) yaitu seitar18.500 kali.
Jadi, pengertian Bootstrap adalah suatu framework yang isinya terdapat komponen-komponen dasar web yang dirancang sedemikian rupa untuk digunakan secara bersama.Bootstrap juga digunakan untuk membuat layout halaman , serta momodifikasinya.Perangkat yang juga dapat membuat website yang sederhana.
Untuk menggunakan Bootstrap yang harus pertama kali dilakukan adalah instalasi bootsrtrap dengan mendownload di website resminya di http://getbootstrap.com/getting-started/
Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:
1. DOWNLOAD FILE BOOTSTRAP
Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/.
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 
Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.
2. 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
3. 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 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:
1. PASTIKAN LINK STYLESHEET BOOTSTRAP MENGARAH PADA PATH YANG TEPAT DIMANA FILE CSS BOOTSTRAP BERADA, RELATIVE TERHADAP FILE HTML YANG MEMANGGILNYA.
<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.
2. PASTIKAN JUGA SCRIPT JAVASCRIPT BOOTSTRAP MENGARAH PADA PATH YANG TEPAT DIMANA FILE JAVASCRIPT BOOTSTRAP BERADA, RELATIVE TERHADAP FILE HTML YANG MEMANGGILNYA.
<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.
3. 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.
Demikianlah penjelasan dari kami, semoga bermanfaat 
Wassalamu’alaikum
kalo lo belom ngerti klik disini!
Your Affiliate Money Making Machine is ready -
ReplyDeleteAnd making money online using it is as simple as 1-2-3!
Here are the steps to make it work...
STEP 1. Tell the system which affiliate products the system will promote
STEP 2. Add PUSH BUTTON TRAFFIC (this LITERALLY takes 2 minutes)
STEP 3. Watch the system explode your list and sell your affiliate products all by itself!
Are you ready??
Click here to make money with the system