Tutorial Bootstrap: Merubah warna navigation bar

Navigation Bar atau yang disingkat dengan navbar pada Bootstrap merupakan bagian navigasi yang secara default berada pada bagian atas. Namun kita juga dapat merubahnya menjadi posisi bawah, sehingga menjadi footer. (Navigation Bar or sometimes it's called navbar on Bootstrap is counterpart of navigation by default is placed at the top of page. We can also turn it into a bottom position, so that it becomes footer). 

Ada beberapa jenis Navigation Bar pada Bootstrap, beberapa diantaranya adalah : Default Navigation Bar, Inverted Navigation Bar, Fixed Navigation Bar dsb (There are several types of Navigation Bars on Bootstrap, some of which are : Default Navigation Bar, Inverted Navigation Bar, Fixed Navigation Bar etc).

Secara default, warna navigation bar pada Bootstrap terdiri dua : abu-abu [Default Navigation Bar] dan hitam [Inverted Navigation Bar]. (By default, the color of Bootstrap Navigation Bars consist of two : gray [Default Navigation Bar] and black [Inverted Navigation Bar]).

Dalam percobaan ini, kita akan melakukan ujicoba pada Inverted Navigation Bar. Pertama-pertama kita akan mencoba warna defaut pada inverted navbar seperti script berikut ( In this experiment, we try it on inverted navigation bar. Firstly we try the color default as show by following script ) :

<div class="navbar navbar-inverse">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about.html">Programming</a></li>
    <li><a href="courses.html">English</a></li>
    <li><a href="price.html">Review</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="videos.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
  </div>
 </div>
</div>

Script.1

Sehingga output yang dihasilkan oleh script 1 akan ditunjukkan oleh Gambar.1 Output Script1 (The output of script 1 will be showed by Figure.1 Output Script 1).

Gambar.1 Output Script 1

Nah sekarang  kita akan merubah warna defaultnya inverted navigation bar. Sebagai contoh kita akan merubah menjadi warna biru. Tambahkan script CSS berikut, bisa anda letakkan secara internal maupun external. Baca Tutorial Implementasi CSS untuk memahi maksud css internal dan external  (Right now, we'll change the default color of inverted navigation bar. For example, we'll chage it to be blue. Add the following script, you can put it both internally and externallu. Read Tutorial CSS Implementation to get understand deeply about  the meaning of css internal and external) :

<style type="text/css">
    .navbar-inverse {
    background-color: #3b5998;
    font-size:18px;
    }
</style>

Script.2

Output dari script.2 ditunjukkan oleh gambar berikut, dimana ukurat font juga kita ikut rubah ukurannya (The output of script.2 is shown by following figure, we also change font-size)

Gambar.2 Output Script2

Anda dapat mendownlad keselurah source code edisi tutorial merubah warna navigation bar pada link berikut  (You can download all source code of this tutorial on following link):

• 4Shared
• Ziddu

Tweet

Subscribe to receive free email updates: