Bootstrap merupakan sebuah framework css yang digunakan untuk tampilan sebuah website, bootstrap sendiri support dengan responsive, sehingga bisa dibuka melalui banyak device, seperti monitor, handphone, tablet dan lain lain.

bootstrap

Bootstrap sendiri sudah menyediakan html, css dan js yang sudah siap kita pakai, jadi tentunya memudahkan kita untuk mengembangkan website dan menghemat waktu mengerjakan project kita. Untuk mendapatkan bootstrap silahkan anda merujuk ke getbootstrap.com dan mendownloadnya.

Disini kita ingin memasangkan bootstrap ke dalam template joomla kita yang pernah kita buat, setelah pada sebelumnya kita bisa memasang js dan css sekarang kita akan memasang bootstrap. Ketika kita include atau masukan bootstrap kita hanya butuh dua file saja yaitu : bootstrap.css dan bootstrap.js.

Untuk memasukan bootstrap sendiri kita menggunakan $doc sama halnya ketika kita memasukan css dan js, yaitu menggunakan $doc dan meload di dalam head menggunakan jdoc. misal kita dulu punya file style.css dan main.js, kalau dulu kita memasukanya sebagai berikut :

dimana kita memangil style.css dan main.js didalam head sekarang kita ganti dengan menggunakan $doc, statemen ini diletakan diatas baris sendiri sebelum !doctype sehingga jadi

Dari atas anda dapat lihat saya letakan css dan js dengan menggunakan $doc dan juga kemudian saya load dengan menggunakan jdoc diantara tag head.

Setelah anda buat simpan maka tampilan template anda akan jadi seperti ini :

template-css

Selanjutnya adalah kita akan menambahkan bootstrap css dan js ke template kita, seperti yang sudah disinggung diatas kita hanya memerlukan dua file saja yaitu bootstrap.css (atau bootstrap.min.css) dengan bootstrap.js (atau bootstrap.min.js).

kita tambahkan dengan menggunakan $doc di atas style.css dan juga js diatas main.js sehingga seperti ini :

Anda lihat yang berwarna merah itulah saya menambahkan bootstrap, mudah bukan. Jangan lupa simpan dan kemudian reload halaman atau refresh, sehingga tampilan template anda akan berubah :

bootstrap-css

Gambar diatas menunjukan template yang sudah menggunakan bootstrap, ini bisa kita terapkan pada semua template joomla yang tidak menggunakan bootstrap.

Sedangkan untuk menjadikanya responsive itu juga mudah tidak sulit, sebetulnya bootstrap sendiri sudah dapat membuat template jadi responsive tapi kita perlu sedikit modifikasi sehingga bootstrap mengambil alih kendali untuk menampilkanya menjadi responsive.

Kita hapus semua struktur css yang mengontrol untuk layout, font dan warna dan biarkan kita memakai punya bootstrap, sesudah itu kita hapus tampilan dari template menjadi
hpus-css

Terlihat berantakan tapi jangan takut kita akan mulai mengimplementasikan bootstrap responsive kedalam template kita, menurut dokumen di bootstrap kita perlu memasukan dua baris yaitu :

kita akan masukan dua baris ini ke template kita. Kita ambil file bootstrap-responsive.css copykan ke folder css template kita. kemudian kita masukan ke template kita dibawah bootstrap.css sehingga menjadi :

Satu lagi dibawah jdoc kita masukan meta name :

Sesudah itu kita akan menambah class container, pada Bootstrap konten utama adalah berada pada container, oleh karena itu kita tambahkan div dibawah body dengan class container:

setelah itu kita simpan maka template akan jadi seperti ini

main_container-class

Setelah main container kita buat, kita akan mengedit class row dan span. jika anda membaca pada dokumentasi bootstrap row class mendifinisikan container yang akan membentuk span class, row dibagi jadi 12 kolom, anda bisa menggunakan span class untuk membagi kolomnya misalkan mau dibuat satu kolom anda cukup membuatnya menjadi span=”12″, dstnya.

Untuk tutorial kali ini saya akan membagi 3/4 dan 1/4 layout saja sehingga codignnya adalah sebagai berikut :

mudah bukan menambahkan bootstrap dan membuatnya menjadi responsive. Setelah anda buat semua makan tampilan akan jadi seperti dibawah

completed

 

Untuk kode lengkapnya dari semua awal hingga akhir :

 

(Visited 1,938 times, 3 visits today)