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 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 :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/support/css/style.css" type="text/css" />
<script src="/support/js/main.js" type="text/javascript"></script>
</head>
<body>
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
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
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 :
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 :
<?php $doc = JFactory::getDocument(); $doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap.css'); $doc->addStyleSheet('templates/' . $this->template . '/css/style.css'); $doc->addScript('/templates/' . $this->template . '/js/bootstrap.js', 'text/javascript'); $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript'); ?>
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 :
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
Terlihat berantakan tapi jangan takut kita akan mulai mengimplementasikan bootstrap responsive kedalam template kita, menurut dokumen di bootstrap kita perlu memasukan dua baris yaitu :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/support/assets/css/bootstrap-responsive.css" rel="stylesheet">
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 :
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap.css');
$doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/bootstrap.js', 'text/javascript');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!DOCTYPE
Satu lagi dibawah jdoc kita masukan meta name :
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
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:
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class='header'>Header</div>
setelah itu kita simpan maka template akan jadi seperti ini
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 :
<div class='container'>
<!-- header -->
<div class='row'>
<div class='span12'>Header</div>
</div>
<!-- Tengah digunakan untuk sidebar dan konten utama-->
<div class='row'>
<!-- main content area -->
<div class='span9'>
<jdoc:include type="modules" name="position-2" style="oke" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-3" style="oke" />
</div>
<!-- right sidebar -->
<div class='span3'>
<jdoc:include type="modules" name="position-1" style="oke" />
</div>
<div style='clear:both;'></div>
</div>
<!-- footer -->
<div class='row'>
<div class="span12">
Footer
</div>
</div>
</div>
mudah bukan menambahkan bootstrap dan membuatnya menjadi responsive. Setelah anda buat semua makan tampilan akan jadi seperti dibawah
Untuk kode lengkapnya dari semua awal hingga akhir :
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap.css');
$doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/bootstrap.js', 'text/javascript');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class='row'>
<div class='span12'>Header</div>
</div>
<!-- Tengah digunakan untuk sidebar dan konten utama-->
<div class='row'>
<!-- main content area -->
<div class='span9'>
<jdoc:include type="modules" name="position-2" style="oke" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-3" style="oke" />
</div>
<!-- right sidebar -->
<div class='span3'>
<jdoc:include type="modules" name="position-1" style="oke" />
</div>
<div style='clear:both;'></div>
</div>
<!-- footer -->
<div class='row'>
<div class="span12">
Footer
</div>
</div>
</div>
</body>
</html>
terimakasih sudah berbagi tentang ilmunya , sangat membantu sekali
Tutorialnya bermanfaat. Terimakasih