Tutorial Bootstrap : Merubah ukuran image navbar brand
(On previous bootstrap tutorial, we have learned how to change the color of a Bootstap Navigation Bar where we changed default color of Inverted Navigation Bar which has black becomes blue. Please learn first previous tutorial) :
Edisi tutorial bootstrap pada kesempatan ini akan mendalami tentang bagaimana menggantikan navbar brand dengan gambar anda sendiri (mengganti text dengan image). Karena navbar-brand memiliki ukuran tinggi dan padding tersendiri, oleh karena itu jika ukuran gambar yang terlalu tinggi dapat menyebabkan navigation bar menjadi berantakan.
(Our Bootstrap tutorial is how to learn about how to replace the navbar brand with your own image by swapping the text for an image. Because navbar-brand has its own size of height and padding, because of that if the image size is too high, it can cause navigation bar into a mess).
Percobaan 1 (Experiment 1)
Dengan meminjam source code pada tutorial sebelumnya :Tutorial Boostrap tentang merubah warna navigation bar, kita akan menambah navbar brand dengan sebuah gambar, seperti yang ditunjukkan oleh script dibawah ini( By using in the previous tutorial : Boostrap Tutorial in the color changing of navigation bar, we'll add navbar brand with an image as shown by the following script ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
<style type="text/css">
.navbar-inverse {
background-color: #3b5998;
font-size:18px;
}
</style>
</head>
<body>
<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>
<a class="navbar-brand" href="index.html">
<img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
</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>
<!-- /.navbar -->
</body>
</html>Sehingga output yang dihasilkan akan ditunjukkan oleh gambar berikut
(So, the output as shown by following figure):
Anda dapat melihat output diatas, jika tinggi gambar kita tidak seimbang dengan tinggi navigation bar maka tampilan yang diinginkan kurang responsive . Nah sekarang bagaimana caranya agar gambar tersebut dapat menyesuaikan dengan ukuran navigation bar. Perhatikan pada percobaan 2
(You can see the output above, if height of an image is not balance with navigation bar's heigh then the desired output look less responsive.So how is the way to make an image can adapt the size of navigation bar .Look at the experiment 2 to get the answer).
Percobaan 2 (Experiment 2)
Tambahkan script css berikut untuk membuat image dari navbar brand dapat menyesuiakan ukuran navigation bar(Add the following script to make an image of navbar brand can adapt with the size of navigation bar).
.navbar-brand{
float: none !important;
}(the output of css script above is shown by figure below):
Anda dapat mendownlad keseluruhan source code tutorial tersebut pada
(You can download source code of the entire tutorial on ):
