Tutorial Dasar Bootstrap

Tutorial Dasar Twitter Bootstrap
Twitter Bootstrap adalah sebuah framework awalnya dikembangkan oleh Tim Twitter untuk para web designer agar mendesain halaman website lebih mudah dan cepat. Boostrap bersifat opensource didalamnya menyediakan HTML,
CSS, dan Javascript siap digunakan dan dikembangkan. Beberapa fitur twitter bootstrap adalah responsive design, menu dropdown, clean icons, carousel dan masih banyak lagi.

Tutorial kali ini membahas membuat menu navigasi yang responsive menggunakan bootstrap secara mudah,  sebelum memulai tutorial ini sobat sudah faham mengenai HTML,CSS,Javascript.

Ada beberapa hal yang kita butuhkan, yang terutama adalah koneksi internet 😀
– Framework Bootstrap
– Template = Html/Php
– Editor = Notepad/Notepad++ dll

Pertama
Download Framework Boostrap link ini  kemudian ekstrak file bootstrap-3.3.5-dist tersebut kemudian rename, selanjutnya buka folder tersebut sobat akan mendapatkan tiga folder :
– css
– fonts
– js

Kedua
Untuk Template buka link ini http://getbootstrap.com/examples/navbar/

  • Klik kanan kemudian pilih views page source, sorot semua kode tag dengan cara tekan Ctrl+A  klik kanan pilih copy.
  • Buka Notepad pastekan kode tersebut, Save As Pilih All kemudian beri nama index.html

Buka File index html dengan browser sobat Jika tampilan seperti dibawah ini BootstrapRubah baris code Boostrap

Hasil seperti  hasil akhir menjadi seperti dibawah ini BootstrapSemoga bermanfaat 🙂

Iklan

One thought on “Tutorial Dasar Bootstrap

  1. Ping-balik: Edit Jumbotron | Computer Web Desgn Internet & Security ®

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s