Saturday , December 5 2020
Home » Bootstrap » Membuat Navigasi Tabs Menggunakan Bootstrap

Membuat Navigasi Tabs Menggunakan Bootstrap

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.

Advertisements

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 :

Advertisements
<!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 :

membuat navigasi tabs menggunakan bootstrap

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 :

membuat navigasi tabs menggunakan bootstrap

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.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

membuat navigation bar menggunakan bootstrap

Navigation Bar Menggunakan Bootstrap

Navigation Bar Menggunakan Bootstrap lebakcyber.net – Membuat Navigation bar menggunakan bootstrap. Pada kesempatan kali ini …

Leave a Reply

Your email address will not be published. Required fields are marked *