Daftar dan Belajar Sekarang!

Help!! Cara merubah bootstrap tabs jadi toggle menu ketika di mobile

foto kiwiranto
5 Kontribusi 0 Coto
2 tahun yang lalu
Temen" mohon bantuannya, ada yg tau cara merubah bootstrap tabs jadi responsive, jadi ketika di mobile tampilannya kaya gini. https://i.imgur.com/nNRrAAc.png normalnya yg udah saya buat begini. https://i.imgur.com/ZKF1UQG.png kalo di layar kecil malah numpuk kaya gini. https://i.imgur.com/YM7vOZc.png pengennya kaya gambar yg pertama, mohon bantuannya. ini link codepen saya, barang kali mau langsung ngedit silahkan https://codepen.io/kiwiranto/pen/aVVqmw?editors=1100

Jawaban
foto zergz
62 Kontribusi 46 Coto
2 tahun yang lalu
Bisa coba ikuti link brikut sbagai referensi gan https://openam.github.io/bootstrap-responsive-tabs/

foto kiwiranto
5 Kontribusi 0 Coto
2 tahun yang lalu
sayangnya itu responsive jadi accordion gan, but Terima kasih responnya gan

foto kodrenk
18 Kontribusi 3 Coto
2 tahun yang lalu
sbenernya lebih enak pake panel group dari pada make tab kalo masih kurang puas di otak atik aja sendiri...
<div class="container">

  <nav >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tes" >
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        
      </button>
    </div>
  </nav>
  
   <div class="collapse navbar-collapse" id="tes">
  <div class="panel-group" id="accordion" >
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Tab 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
        <h2>tab1</h2>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Tab 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>Tab 2</h2>
       
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Tab 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>tab3</h2>
        </div>
      </div>
    </div>
  </div> 
</div>
    </div>
untuk css nya tambahin ini biar keliatan karna background putih
.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

foto Nandar
623 Kontribusi 193 Coto
2 tahun yang lalu
dari w3schools
https://askprog.com/reads/4


Login untuk diksusi di forum sekolah koding