Membuat Navigasi Tabs Menggunakan Bootstrap

lebakcyber.net – Membuat navigasi tabs menggunakan bootstrap. Oke jadi pada kesempatan kali ini kita akan membahas mengenai bagamana cara untuk membuat sebuah navigasi tabs di bootstrap.

Navigasi Tabs merupakan class yang ada pada bootstrap yang paling sering digunakan serta memiliki kegunaan yang sangat besar untuk membuat sebuah front-end yang terlihat lebih modern.

Selain membuat navigasi tabs kita juga dapat membuat navigasi pill dengan cepat dan pastinya bisa menghemat waktu, hal tersebut karena kita hanya perlu menambahkan class-class yang sudah ada pada bootstrap untuk membuat sebuah navigasi tabs ataupun pills dengan menggunakan bootstrap.

Cara Membuat Navigasi Tabs

Untuk membuat sebuah navigasi tabs pada bootstrap kita memerlukan class “nav nav-tabs”. class “nav” itu sendiri digunakan untuk mendefinisikan kalau yang sedang kita buat adalah navigasi serta “nav-tabs” dapat digunakan untuk membuat sebuah navigasi dalam bentuk tabs.

Sekarang langsung saja kita coba praktekan, silahkan buat sebuah file index.html baru lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Navigasi Tabs Menggunakan Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Membuat Navigasi Tabs di Bootstrap</h1> 
        
                <br/>
 
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
 
    </div>
 
</body>
</html>

Bisa kita lihat pada perintah diatas kita memasukan class “nav” dan juga “nav-tabs” didalam tag <ul>, sedangkan untuk penambahan class “active” dan juga “disabled” juga bisa ditambahkan untuk membuat sebuah navigasi tabs. Hasil dari perintah diatas nanti seperti gambar dibawah ini :

Dynamic Tabs Di Bootstrap

Sekarang kita akan mencoba untuk membuat sebuah dynamic tabs di bootstrap, jadi silahkan buat sebuah file index.html baru lalu masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Navigasi Tabs Dynamic di Bootstrap - lebakcyber.net</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Membuat Navigasi Tabs dynamic di Bootstrap</h1> 
        <br/>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
            <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>Home</h3>
                <p>lebakcyber.net</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Tutorial belajar Bootstrap</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Membuat navigasi tabs dynamic menggunakan bootstrap.</p>
            </div>
                <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Belajar Membuat website dengan mudah</p>
            </div>
        </div>
    </div>
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi seperti itulah bagaimana cara untuk membuat suatu navigasi tabs dengan memakai bootstrap, semoga tutorial sederhana ini dapat bermanfaat dan sampai ketemu lagi pada tutorial belajar bootstrap selanjutnya.

2 comments

yasar wicaksono
11/07/2021 at 9:02 pm

mau tanya kak. kalau saya mau ada tombol didalam tab yang fungsinya untuk membuka tab selanjutnya, itu kodingnya gmn ya.

- Firdan Ardiansyah
  14/07/2021 at 2:12 pm
  
  Mungkin maksudnya membuka halaman baru ya ka? kalau begitu tinggal masukin urlnya pas di perintah
- Menu 1

Lebak Cyber Tips dan Trik Komputer

Membuat Navigasi Tabs Menggunakan Bootstrap