• Home
  • /
  • Tag Archives:  bootstrap tutorial

Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery

Setelah kemarin membahas tentang penerapan bootstrap di navigasi paging, kini saya akan membahas tentang bagaimana cara membuat tooltips keren dengan sangat mudah menggunakan kombinasi bootstrap dan jQuery.

Oya, apa itu tooltips? tooltips adalah informasi yang muncul ketika mouse dikenakan pada suatu obyek. Perhatikan contoh tooltips berikut ini

 photo tooltips01_zpsea4cca2e.jpg

OK dah paham ya apa itu tooltips. Selanjutnya dalam artikel ini kita akan memodifikasi tampilan tooltips tersebut supaya lebih cantik menggunakan Bootstrap dan jQuery. Ini dia tampilan yang diharapkan…

 photo tooltips02_zps565e9440.jpg
CSS

Mempercantik Navigasi Paging dengan Twitter Bootstrap

Beberapa waktu yang lalu, saya pernah memaparkan tentang bagaimana membuat script PHP untuk keperluan paging. Jika diperhatikan, link navigasi perhalaman yang dihasilkan dari script tersebut masih sangat sederhana sekali. Perhatikan gambar berikut ini

 photo twitter-bootstrap01_zpsa29c4847.jpg

Nah.. dalam artikel ini kita akan sedikit memoles tampilan navigasinya tersebut supaya lebih cantik menggunakan Twitter Bootstrap. Apa itu Twitter Bootstrap? Twitter Bootstrap adalah framework CSS yang dikembangkan oleh Twitter. Dengan framework CSS yang siap ini kita tidak perlu pusing-pusing memikirkan atau membuat style CSS nya. Adapun hasil akhir dari tampilan navigasinya nanti adalah seperti ini

 photo twitter-bootstrap02_zpsde13f801.jpg

Mau tau cara membuatnya? OK mudah kok ternyata.