Hai teman-teman, setelah sebelumnya kita pernah membahas tentang cara membuat tab menu dengan bootstrap, sekarang kita akan membuat menu dengan menggunakan class nav-pills yang diberikan bootstrap. Menu ini akan kita kostumisasi juga dengan menggunakan glyphicon.
Untuk membuat menu seperti di atas ketikkan mark up HTML di bawah ini. Tentu saja kamu telah memanggil bootstrap.css nya.
<ul class="nav nav-pills">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Beranda</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Pesan</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profil</a></li>
</ul>
Penjelasan:
- Sederhana, kamu hanya perlu memanggil class =â€nav nav-pills†di dalam tag <ul>
- Untuk membuatnya lebih baik, kamu dapat menambahkan icon pada menu dengan menambahkan class glyphicon dalam tag <span> di antara tag <a></a>. Misalnya:
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Pesan</a></li>
Maka kita akan menampilkan icon pesan pada menu “pesanâ€.
Bagaimana? Sangat mudah kan teman-teman? Semoga bermanfaat. Terima kasih.