Cara Menggunakan Twitter Bootstrap

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Bootstrap atau yang akrab juga disebut Twitter Bootstrap adalah salah satu Framework CSS yang banyak digunakan oleh Web Developer untuk memudahkan proses Desain. Saat artikel ini ditulis, Bootstrap telah merilis versi ke 3 dengan penambahan beberapa fitur seperti support tampilan mobile serta fitur untuk membuat tampilan website menjadi lebih responsive. 

Bootstrap sendiri dikembangkan oleh orang-orang Twitter sejak tahun 2010 yang lalu. Untuk menggunakan Bootstrap sebenarnya bisa dikatakan gampang-gampang susah oleh karenanya saya tertarik untuk membuat postingan ini. Jika kita melihat struktur utama Bootstrap, ada 3 folder disana, yaitu CSS, Fonts dan JS seperti gambar berikut. Jika anda bingung mendownload masternya sudah saya siapkan disini.

Cara Menggunakan Twitter Bootstrap
Langkah Menggunakan Bootstrap

1. Copy ketiga folder tersebut kedalam folder projek anda 

2. Buat Sebuah File dengan nama bootstrap.html sehingga struktut File pada folder projek anda menjadi seperti berikut

Cara Menggunakan Twitter Bootstrap
3. Edit dan Tambahkan tag-tag dasar HTML pada file bootstrap tersebut. Jangan lupa untuk menambahkan tag yang mendefinisikan HTML 5. Panggil juga file booststrap.css diantara tag head sehingga menjadi seperti berikut ini 
<!DOCTYPE HTML>
<html>
<head>
 <title>Menggunakan Boostrap</title>
 <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>

code anda disini

</body>
</html>

4. Setelah itu, anda hanya perlau memanggil class dan id yang sudah ada pada file bootstrap.css. suatu misal seperti berikut ini. letakan diantara tag body
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>

Cara Menggunakan Menu Dropdown Bootstrap

5. Untuk menggunakan menu Dropdown Bootstrap kita perlu memanggil dua buah file js berikut yang ada di folder js. Letakkan diantara tag head
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

6. Kemudian Tambahkan Code HTML yang ada pada link ini diantara tag body. Berikut adalah hasil yang saya dapatkan

Cara Menggunakan Twitter Bootstrap
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.