Salam bro/sis kali ini saya akan menunjukkan plugin javascript yang keren-keren dari bootstrap, yang dapat membuat halaman web menjadi lebih interaktif. Apa saja itu ? Check this out :D
Sebelumnya siapkan dulu file yang dibutuhkan yaitu bootstrap.css jquery.js dan bootstrap.js
Kamu bisa download disini
Jika sudah didownload jangan dibiarin aje ye :D di embed ke dokumen html nya :D Jika sudah yuk kita mulai
-
Alert
alert ini digunakan untuk menampilkan pesan notifikasi kepada user, ada yang menggunakan tombol ada juga yang tidak. Difitur alert ini tersedia juga loh tombol close nya :D.
Kamu bisa kostumisasi dimana alert ini akan ditampilkan
- Model Bertombol
<div class="alert alert-block alert-error fade in"> <a class="close" data-dismiss="alert" href="#">×</a> <h4 class="alert-heading">Oh snap! You got an error!</h4> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p> <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a> </p> </div>
- Model Tidak Bertombol
<div class="alert fade in"> <a class="close" data-dismiss="alert" href="#">×</a> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>
-
Modal
Modal ini semacam alert box yang biasa kita buat dengan javascript, namun bootstrap membuatnya lebih baik
<div id="modalku" class="modal hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Contoh Modal</h3> </div> <div class="modal-body"> <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-success">lanjut</a> <a href="#" class="btn" data-dismiss="modal">Batal</a> </div> </div>
Dan ini contoh memanggil/menampilkan/trigger modal nya
<a class="btn" data-toggle="modal" href="#modalku" >Tampilkan Contoh Modal</a>
Yang perlu diperhatikan adalah pastikan id modal yang dipanggil sama dengan nilai href pada trigger. Pada contoh diatas id modalku pada modal dan href modalku pada trigger nya
-
POPOVER
popover ini masih saudara kandung dengan yang namanya tooltip
Jadi ketika kamu mengarahkan kursor kesuatu objek muncul la si popover ini. Berikut penampakanya :
Berikut implementasinya.
<a href="#" class="btn btn-info" rel="popover" title="Profil Saya" data-content="I am human I am human I am humanI am human I am human">Profil</a>
Selanjutnya tambahkan skrip javascript berikut ini, perhatian : skrip ini harus diletakkan dibawah Jquery.js
<script> $(function(){ $("a[rel=popover]").popover({ placement : 'right', trigger : 'hover' }); }) </script>
Kamu harus menambahkan rel="popover" title dan data-content untuk menampilkan popover pada suatu objek.
Jadi ketika kursor diarahkan kepada link profil maka akan muncul popover nya, menampilkan sesuai dengan nilai yang diberi pada atribut title dan data-content
Atribut untuk popover ini bisa dikostumisasi, silahkan liat atribut serta nilai yang tersedia pada gambar dibawah ini.
-
Tooltip
Nah untuk yang satu ini sama seperti tooltip biasanya, hanya saja warna backgroundnya hitam dan tulisanya berwarna putih.
Implementasinya kamu cukup menambahkan rel="tooltip" dan title yang nilainynya akan ditampilkan pada tooltip.
<a href="#" rel="tooltip" title="ini adalah tooltip">hover over me</a>
Lalu tambahkan skrip javascript berikut harus dibawah skrip jquery.js kamu
<script> $(function(){ $('a').tooltip(); }); </script>