Mengenal Bootstrap lebih dalam

Ditanyakan pada tanggal 4 April 2019 oleh Fauzi Rahman

Temen-temen selamat siang, maaf saya mau menanyakan tentang bootstrap ini lebih jauh lagi, secara pengetahuannya terima kasih code politan sudah banyak membantu untuk tutorial ini, tapi ada yang belum saya pahami, setelah menggunakan bootstrap ini, secara implementasi bisa, tapi secara fungsionalnya saya kurang paham, contoh dasar saja saya menggunakan SB admin 2, di implementasikan di project test saya, semua sudah terimplement dengan baik, hanya fungsinya saja dalam hal code berikut ini :

  <!-- Nav Item - Tables -->
  <li class="nav-item active">
    <a class="nav-link" href="<?php base_url('Mitra/') ?>">
      <i class="fas fa-fw fa-table"></i>
      <span>Data Mitra</span>
    </a>
  </li>

  <!-- Nav Item - Dashboard -->
  <li class="nav-item">
    <a class="nav-link" href="<?php base_url('Mitra/update') ?>">
      <i class="fas fa-fw fa-tachometer-alt"></i>
      <span>Update</span></a>
  </li>

Pertanyaannya adalah :

  1. Pada saat saya masuk ke menu input, link tersebut tidak statik, malah mengikut ke ('Mitra/input'), yang seharusnya kan untuk menu itu statik --> ('Mitra/'). Begitu pula saat diindex awal, yang harusnya link masuk ke update / <?php base_url('Mitra/update') ?> ini tetap saja ke / <?php base_url('Mitra/') ?>, sedang kan apabila linknya berupa html itu tidak masalah (gambar terlampir) https://drive.google.com/open?id=1JZogEqArgZgs8vnxJ-Xq3VTuPftfSe07

  2. Bagaimana caranya, pada saat saya berpindah menu, di class="nav-item active" ini mengikuti menu mana yang aktif?

  3. Apakah ada tutorial atau tata cara lebih lanjut untuk mengimplementasi bootstrap yang sudah ada? seperti penggunaan alert, saat sudah menginput data muncul alert dari bootstrap sendiri, ataupun saat delete data.

Settingan yang dilakukan,

sesuai dengan tutorial, saya memecah bagian header, footer, dan sidebar menjadi 3 bagian, dan saya load view di konten.

1 JAWABAN / 0 KOMENTAR

Generic placeholder image
Ardi Widyanto Saputra menjawab pada tanggal 28 April 2019

Untuk persoalan nomor dua bisa menggunakan JQuery mas. Sebagai referensi sebagai berikut:

<ul id="nav">
    <li><a href="<?php echo base_url(); ?>">Home</a></li>
    <li><a href="<?php echo base_url()."Tentang/"; ?>">About Us</a></li>
        <li><a href="<?php echo base_url()."Kontak/"; ?>">Contact</a></li>
</ul>

Terus bagian javascript bisa menambahkan kode berikut.

$(function() {
    $('#nav a[href~="' + location.href + '"]').parents('li').addClass('active');
});

Pada bagian script tersebut akan menambahkan class="active" pada elemen <li> yang sesuai dengan halaman saat ini. Dan di bagian CSS anda bisa menambahkan ini untuk memberikan style yang berbeda:

#nav li.active a {
    background-color: blue;
}