Twitter Bootsrap adalah sebuah platform yang di kembangkan oleh tim Twitter dengan menggunakan Twitter Bootsrap membuat atau mendesain halaman website menjadi lebih cepat dan mudah, dengan twitter bootsrap ini kita dapat membuat layout halaman website,tabel,tombol,form,navigasi dan komponen lainnya dengan hanya memanggil fungsi class CSS dalam file HTML, dan ada juga komponen lain yang di buat dengan javascript
itulah pengertian dari twitter bootstrap
dan yang akan kita bahas pada kali ini adalah cara penggunaan twitter bootstrap tersebut
Cara Penggunaan Twitter Bootstrap
1. Download Bootsrap terlebih dahulu disini
2. File twitter bootsrap itu berbentuk zip, jadi ekstrak dulu ke sebuah folder, isi dari file bootsrap adalah seperti berikut
bootstrap-responsive.min.css
Isi folder JS : bootstrap.js & bootstrap.min.js
Isi folder IMG : glyphicons-halflings.png & glyphicons-halflings-white.png (ini biasannya buat icon-icon)
3. Buat folder bernama belajar bootsrap,Salin atau pindahkan file yang telah diekstrak tadi ke folder belajar bootsrap
4. jika telah selesai seperti inilah struktur foldernya
css
- bootstrap.css
- bootstrap.min.css
- bootstrap-responsive.css
- bootstrap-responsive.min.css
img
- glyphicons-halflings.png
- glyphicons-halflings-white.png
js
- bootsrap.js
- bootsrap.min.js
5. Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal. Silahkan ketikan coding berikut ini di file index.html untuk permulaan.
<html>
<head>
<title>Ini Bootsrap Pertamaku</title>
<!--Load CSS-->
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css"/>
<style type="text/css"><!--Dibutukan bila anda menggunakan navbar
fixed top-->
body {
padding-top:60px;
padding-bottom: 40px;
}
</style>
</head>
<body>
<!--Codingannya Disini ya-->
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
</body>
</html>
.png)
