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 🙂

Tagged: Bootstrap, Framework
Computer Web Desgn Internet & Security ®