tRikSonic
Tema
/ / Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia

Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 9 September 2018 - 09.16
/ / Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navbar

TrikSonic - Tutorial kali ini kita akan belajar tentang cara membuat navbar dengan menggunakan bootstrap 3.
Apa itu navbar ? navbar adalah bar navigasi atau blok navigasi yang digunakan pada sebuah halaman html atau sebuah aplikasi yang pada umumnya berada diposisi atas sebuah dokumen.
Dengan menggunakan Bootstrap, keperluan untuk membuat navabar dapat dilakukan atau dibuat dengan cepat efisien dan modern serta yang tidak kalah penting adalah desain responsive pada semua perangkat
Berikut tutorial dan contoh tentang Navbar dengan menggunakan Bootstrap 3 :
Table of contents

Bootstrap 3 - Default navbar

Default navbar adalah komponen dasar penggunaan bootstrap navbar, nama class yang digunakan adalah .navbar-default yang ditulis pada class dasarnya .navbar

Cara penulisan

<nav class="navbar navbar-default">
...
</nav>

Contoh

<nav class="navbar navbar-default">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <!-- tombol membuka dropdown [media responsive] -->
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <!-- Nama Blog / website -->
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    
    <div class="collapse navbar-collapse" id="collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <!-- tombol membuka dropdown list-->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown <span class="caret"></span>
          </a>
          <!-- dropdown list -->
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div>
    
  </div>
</nav>

Hasil

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 CSS-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Navbar default</h2>

<nav class="navbar navbar-default">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <!-- tombol membuka dropdown [media responsive] -->
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <!-- Nama Blog / website -->
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    
    <div class="collapse navbar-collapse" id="collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link Active</a></li>
        <li><a href="#">Link 2</a></li>
        <li class="dropdown">
          <!-- tombol membuka dropdown list-->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown <span class="caret"></span>
          </a>
          <!-- dropdown list -->
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div>
    
  </div>
</nav>

<p>
 Silahkan atur area preview untuk melihat media screen (atau tampilan)
</p>

<div class="alert alert-warning">
<strong>Catatan :</strong> Penggunaan javascript diperlukan untuk demo ini.
</div>


<!-- jquery dan bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap 3 - Inverted navbar

Jika tidak ingin dengan tampilan warna pada navbar default, bootstrap juga memberikan warna lainnya yaitu hitam dengan tingkat kepekatan diatas sedang, yang mempunyai nilai warna : #222;
Untuk menerapkannya, cukup menambahkan class .navbar-inverse ke class dasar .navbar

Cara Penulisan

<nav class="navbar navbar-inverse">
...
</nav>

Contoh

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><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>
    </ul>
  </div>
</nav>

Hasil

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Bootstrap 3 css -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - Inverted navbar</h2>

<!-- navbar open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><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>
    </ul>
  </div>
</nav>
<!-- navbar close -->

<p>
 Atur lebar preview, untuk melihat media responsive
</p>

<p>
Contoh ini tanpa penggunaan javascript, 
untuk fungsi dropdown menu dapat melihat contoh yang lainnya.
</p>

</div>
</body>
</html>

Bootstrap 3 - Navbar Forms dan Dropdown Menu

Berikut contoh yang bisa dipelajari untuk membuat navbar dengan memasukan sebuah form dan menu dropdown

Contoh

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    <!-- form -->
    <form class="navbar-form navbar-left">
      <div class="input-group">
        <input class="form-control" type="text"/>
        <span class="input-group-btn">
        <!--ganti nilai dari type button, sesuai dengan keperluan-->
        <button class="btn btn-default" type="button">Search</button>
        </span>
      </div>
    </form>
  </div>
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 CSS-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Navbar Form dan Dropdown Menu</h2>


<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    <!-- form -->
    <form class="navbar-form navbar-left">
      <div class="input-group">
        <input class="form-control" type="text"/>
        <span class="input-group-btn">
        <!--ganti nilai dari type button, sesuai dengan keperluan-->
        <button class="btn btn-default" type="button">Search</button>
        </span>
      </div>
    </form>
  </div>
</nav>

<p>
 Silahkan atur area preview untuk melihat media screen (atau tampilan)
</p>

<div class="alert alert-warning">
<strong>Catatan :</strong> Penggunaan javascript diperlukan untuk demo ini.
</div>


<!-- jquery dan bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap 3 - Navbar Brand image

Digunakan untuk mengganti teks Judul dengan sebuah gambar. Mungkin css tambahan diperlukan agar tampilan sesuai dengan keinginan.

Contoh

<style>
/*custom css navbar brand*/
.navbar-brand.triksonic-logo {
  /*property : value*/
}
</style>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand triksonic-logo" href="#">
       <!-- Logo image-->
        <img alt="demo" src="..."/>
      </a>
    </div>
  </div>
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- css, jQuery, dan bootstrap3 js -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<style>
/*
custom css navbar brand image
Sesuaikan dengan logo anda
*/
.navbar-brand.triksonic-logo {
  padding : 7px 15px;
}
</style>

</head>
<body>
<div class="container">
<h2>Bootstrap 3 - Navbar Brand image</h2>

<!-- navbar open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    
    <div class="navbar-header">
      <a class="navbar-brand triksonic-logo" href="#">
        <img alt="triksonic-logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTm_ZiWWH0j_zo54jgAqhC294ezjkAKGXXsid6lgmtHdcCVF0_Rz8VVsPZAm7FStOFQMFW2AkTDJ0K43rMD_NpRLs2yR_vDHegJV7d1cJuXL0Wb_2jr_XwFwhbvAdrqZgVcKhsAa5eV-n/s1600/TrikSonic-Logo.png"/>
      </a>
    </div>
    
    <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
        
      </li>
    </ul>
    
    <!-- form -->
    <form class="navbar-form navbar-left">
      <div class="input-group">
        <input class="form-control" type="text"/>
        <span class="input-group-btn">
        <!--ganti nilai dari type button, sesuai dengan keperluan-->
        <button class="btn btn-default" type="button">Search</button>
        </span>
      </div>
    </form>
    
  </div>
  
  </div>
</nav>
<!-- navbar close -->

<div class="alert alert-info">
<strong>Catatan :</strong> JavaScript diperlukan untuk 
open close menu dan dropdown menu
</div>


</div>
</body>
</html>

Bootstrap 3 - Navbar Buttons

Digunakan untuk menambahkan sebuah tombol atau button, yang mungkin dipergunakan untuk fungsi dari javascript. Tambahakan class .navbar-btn pada class dasar .btn, misal seperti ini :
<button class="btn btn-default navbar-btn">Button</button>
<button class="btn btn-primary navbar-btn">Button</button>
<button class="btn btn-danger navbar-btn">Button</button>
etc..

Contoh

<!-- navbar 1 open -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-primary navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 1 close -->


<!-- navbar 2 open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-danger navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 2 close -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- css, jQuery, dan bootstrap3 js -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - Navbar Button</h2>

<!-- navbar 1 open -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-primary navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 1 close -->


<!-- navbar 2 open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>    
    <button class="btn btn-danger navbar-btn">Button</button>    
  </div>
</nav>
<!-- navbar 2 close -->


<p>
  Resize area preview untuk melihat media screen
</p>

</div>
</body>
</html>

Bootstrap 3 - Navbar Text

Digunakan untuk menuliskan sebuah teks biasa, didalam navbar. Untuk penerapan gunakan class .navbar-text pada element html, misal <p> atau <div>

Contoh

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!-- navbar text open-->
    <div class="navbar-text">Teks Biasa</div>
    <div class="navbar-text">Teks Biasa</div>
    <!-- navbar text close-->
  </div>
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- css, jQuery, dan bootstrap3 js -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - Navbar Text</h2>

<!-- navbar open -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TrikSonic</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!-- navbar text open-->
    <div class="navbar-text">Teks Biasa</div>
    <div class="navbar-text">Teks Biasa</div>
    <!-- navbar text close-->
  </div>
</nav>
<!-- navbar close -->


<p>
  Resize area preview untuk melihat media screen
</p>

</div>
</body>
</html>

Bootstrap 3 - Navbar Component alignment

Digunakan untuk mengatur posisi atau keselarasan element. Untuk penerapannya gunakan class .navbar-left atau .navbar-right pada element HTML yang ingin diatur posisi nya.
Sebenarnya Bootstrap 3 sudah menyediakan class tertentu untuk mengatur keselarasan element, seperti .pull-left dan .pull-right, tapi untuk tampilan navbar yang tepat disemua perangkat penggunaan class .navbar-left atau .navbar-right lebih disarankan

Contoh

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    
    <!-- form -->
    <form class="navbar-form navbar-right">
        <input class="form-control" type="text"/>
    </form>
    
  </div>
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 CSS-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Navbar Component alignment</h2>

<!-- navbar open-->
<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- tombol untuk membuka dan menutup menu, diarea responsive -->
    <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <!-- Judul -->
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        Dropdown <span class="caret"></span>
        </a>
        <!-- Dropdown List -->
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub Menu 4</a></li>
        </ul>
      </li>
    </ul>
    
    <!-- form -->
    <form class="navbar-form navbar-right">
        <input class="form-control" type="text"/>
    </form>
    
  </div>
</nav>
<!-- navbar close-->

<p>
 Silahkan atur area preview untuk melihat media screen (atau tampilan)
</p>

<div class="alert alert-warning">
<strong>Catatan :</strong> Penggunaan javascript diperlukan untuk demo ini.
</div>


<!-- jquery dan bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap 3 - Navbar Fixed to top

Digunakan untuk membuat navbar memiliki posisi tetap berada di atas dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class .navbar-fixed-top pada class dasar .navbar

Contoh

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 CSS-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>


<!--hanya untuk demo-->
<div style="background:pink;height:300px;margin:70px 0px 20px 0px">Demo</div>
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>

</body>
</html>

Bootstrap 3 - Navbar Fixed to bottom

Digunakan untuk membuat navbar memiliki posisi tetap berada di bawah dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class .navbar-fixed-bottom pada class dasar .navbar

Contoh

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 CSS-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">


<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">TrikSonic</a>
  </div>
  <!-- code anda selanjutnya-->
</nav>


<!--hanya untuk demo-->
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>
<div style="background:red;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px">Demo</div>
<div style="background:pink;height:300px;margin:20px 0px 70px 0px">Demo</div>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.