بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh
Pada tutorial bootstrap sebelumnya, kita telah mempelajari bagaimana merubah warna dari sebuah Navigation Bar pada Bootstrap dimana kita merubah warna default dari Inverted Navigation Bar yang berwarna hitam menjadi biru. Silahkan pelajari terlebih dahulu tutorial sebelumnya (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;
}
Output yang dihasilkan oleh script diatas (the output of css script above ):
Anda dapat mendownlad keseluruhan source code tutorial tersebut pada (You can download source code of the entire tutorial on ):
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI),
Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh
Artikel Tutorial Bootstrap : Merubah ukuran image navbar brand, Diterbitkan oleh scodeaplikasi pada Senin, 28 September 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code ,Dengan Cara menghubungi saya
Ke Email: Fajarudinsidik@gmail.com, atau
No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.
