Tutorial Penggunaan Twitter Bootstrap

Terimakasih telah mengunjungi tutorial saya lagi, setelah tutorial sebelumnya tentang Pengenalan Twitter Bootstrap
INSTALASI TWITTER BOOTSTRAP
Langkah 1 :
Download file Bootstrap yang ada Disini. Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG.

Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css
Isi folder JS : bootstrap.js & bootstrap.min.js
Isi folder IMG : glyphicons-halflings.png & glyphicons-halflings-white.png

Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery. Silahkan Download Disini (Direkomendasikan untuk download versi yang terbaru).
Langkah 2 :
Buat sebuah folder dengan nama Belajar_Bootstrap di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP.
Langkah 3 :

Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap.
Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS
Lalu, Buat file HTML dengan nama index.html, Letakan / simpan di dalam folder Belajar_Bootstrap.

Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini :

Belajar_Bootstrap

css

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css

img

glyphicons-halflings.png
glyphicons-halflings-white.png

bootstrap.js

bootstrap.min.js

jquery.js

index.html

Keterangan : Yang di Bold (Cetak Tebal) itu = Folder

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.





    Belajar Bootstrap

Coding diatas fungsinya : memanggil file-file yang dibutuhkan. Jika ada 2 file dengan nama sama dan akhirannya berbeda, contoh: dengan akhiran ---.js atau ---.min.js , panggil / load salah satu aja.

IMPLEMENTASI TWITTER BOOTSTRAP

Setelah langkah di atas selesai, maka tahap instalasi / pengaturan struktur folder dan file, serta pemanggilan file kedalam file index.html telah selesai. Silahkan anda coba modifikasi atau buat code-code yang ada pada Dokumentasi dari Twitter Bootstrap. Ketikan Coding anda di bagian yang ada tulisan CODING HERE.
Sebagai contoh awal, silahkan Copy Paste Code berikut ,dan lihat hasil nya..


      
        
          
          Belajar Bootstrap - JagoCoding.com
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link
                
              
            
            
              
              
              
            
          

        
      
    
 
    
 
      
      
        Hello, world!
        This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
        Learn more »
      
 
      
      
        
          Heading
          Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
          View details »
        
        
          Heading
          Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
          View details »
       
        
          Heading
          Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
          View details »
        
      
 
      
 
      
        © Gilang Sonar ( gilangsonar15@gmail.com )

Baiklah,sekian dulu tutorial dari saya,silahkan diperdalam & dipelajari sendiri tentang penggunaan Twitter Bootstrap dengan membaca Dokumentasi yang ada. Perhatikan attribute class pada setiap Tag dan pelajari itu,karena pada dasarnya untuk menggunakan bootstrap kita hanya bermain pada selector tersebut untuk menampilkan suatu desain / toolkit lain yang ada pada Twitter Bootstrap.

Semoga tutorial ini bermanfaat khusus nya buat para pemula yang baru ingin belajar mengenai Twitter Bootstrap. Sampai ketemu di Tutor berikutnya.