Cara Mengganti Nav Tab Bootstrap Lebih menarik

Bootstrap merupakan salah satu framework css yang sangat populer saat ini. Dengan bantuan framework css, seseorang dapat lebih mudah dalam membuat tampilan sebuah aplikasi hanya dengan memanggil class yang sudah disediakan. Salah satu contoh class yang ada pada bootstrap yaitu Nav Tab. Kita dapat membuat tab hanya beberapa baris saja sesuai dengan manual yang sudah disediakan pada sistus resminya dan tinggal diimplementasikan. Namun, selain kita bisa dengan langsung mengunakan class nav-tab dari bootstrap, kita juga dapat memodifikasi cssnya. Sehingga tampilan tab nya menjadi lebih menarik.

Baik langsung saja, kita masuk ke tutorial cara mengganti nav tab bootstrap lebih menarik. 

Langkah pertama, pastikan kalian sudah punya framework bootstrap. Bagi yang belum punya framework bootstrap, kalian bisa langsung download pada situs resminya.

Selanjutnya silahkan includkan file css dan js untuk bootstrap serta file jquerynya. 

Silahkan copy script berikut :

Script HTML

<div class="container">
     <div class="row">
         <div class="col-md-12">
             <div class="panel with-nav-tabs panel-primary">
                 <div class="panel-heading">
                         <ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li>
<li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li>
<li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li>
<li class="dropdown">
                                 <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                                 <ul class="dropdown-menu" role="menu">
<li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li>
<li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
                     <div class="tab-content">
                         <div class="tab-pane fade in active" id="tab1primary">
Isi konten primary 1</div>
<div class="tab-pane fade" id="tab2primary">
Isi konten Primary 2</div>
<div class="tab-pane fade" id="tab3primary">
Isi konten Primary 3</div>
<div class="tab-pane fade" id="tab4primary">
Isi konten Primary 4</div>
<div class="tab-pane fade" id="tab5primary">
Isi konten Primary 5</div>
</div>
</div>
</div>
</div>
</div>
</div>

Script CSS

.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
 border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
 margin-bottom: -1px;
}

.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
 color: #fff;
 background-color: #3071a9;
 border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
 color: #428bca;
 background-color: #fff;
 border-color: #428bca;
 border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #428bca;
    border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #fff;   
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    background-color: #4a9fe9;
}

Silahkan save, kemudian jalankan pada browser.

Baca Juga : Membuat Breadcrumb Menarik Dengan Bootstrap
                   Cara Membuat Banner Slider Web dengan Owl Carousel

source : https://bootsnipp.com/