Home » Bootstrap » Tutorial Cara Menggunakan Bootstrap Untuk Pemula
cara menggunakan bootstrap

Tutorial Cara Menggunakan Bootstrap Untuk Pemula

Oke Sebelum kita melangkah ke tutorial Cara menggunakan Bootstrap Untuk Pemula ada baiknya kita simak dulu.

Apa itu bootstrap?

Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

OK. Cukup segitu aja. untuk selengkapnya silahkan baca2 di wiki..atau web resminya.

Sekarang kita lanjut ke tutorial cara penggunaan bootstrap.

1. Download dulu bootstrapnya Disini. versi terbaru untuk saat ini yaitu bootstrap 3.2

2. Ektrak dan taruh dalam satu folder. biarkan strukturnya seperti dibawah ini.

cara menggunakan bootstrap

 

3. Buka text editor seperti notepad, notepad++ ,sublime text dsb.

yang dikira nyaman aja di pake, kalau saya sendiri menggunakan notepad++(karena sekarang cuma ada itu, biasanya pake sublime 😀 )

4. klik New dan buat tag html,head,body seperti biasa.

cara menggunakan bootstrap

5. Klik Simpan(CTRL+S) lalu tempatkan di file bootstrap yang sudah di ektrak tadi. beri nama

misalkan latihan.html

cara menggunakan bootstrap

 

6. Nah sekarang kita panggil CSS bootstap dengan perintah eksternal.

Apa itu perintah external? baca2 dulu disini.

7. Masukkan code berikut diantara tag <head> dan </head>

Sehingga akan terlihat seperti ini.

 

bootstrap

8. Setelah itu masukkan code berikut diatas tag </body>

Penampakannya akan seperti berikut ini.

bootstrap

 

9. Sekarang Kita buat tulisan di diantara tag <body> dan </body>

Ex:

 

Tampilan HTML biasa tanpa bootstrap

Tampilan HTML yang sudah menggunakan bootstrap

itulah tutorial sederhana cara menggunakan bootstrap untuk pemula. Adapun keuntungan apabila kita menggunakan framework css bootstrap adalah kita tidak perlu repot-repot lagi mendesain web dengan css dari awal, cukup gunakan class-class yang sudah di sediakan oleh bootstrap. Untuk lebih detailnya silahkan kunjungi situs resmi bootstrap disini.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

x

Check Also

cara menggunakan bootstrap

Cara Membuat Table Pagination Dengan Bootstrap

 apa itu bootstrap?? Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang ...