Oh ya, untuk bisa mngerjakan proyek sepeti ini silahkan terlebih dahulu anda download Bootstrap Twitter DI Sini
Dan ini kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Layout Menggunakan Bootstrap</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="http://zieanakalay.blogspot.com#"><img alt="home" height="25" src="Lombok.jpg" width="25" /></a></li>
<li><a href="http://ziesianakalay.blogspot.com#">My Blog</a></li>
<li><a href="http://www.facebook.com#" target="blank">Profil</a></li>
<li><a href="http://www.twitter.com#">Twitter</a></li>
<li><a href="http://www.facebook.com#">Thema</a></li>
<li><a href="http://www.facebook.com#">Dev C++</a></li>
</ul>
<form class="navbar-search pull-right">
<input class="search-query" placeholder="Pencarian" type="text" />
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Nah, kemudian di bawah ini adalah bentuk tampilan About Us :
Beikut kodenya:
<div class="row" id="about">
<div class="container">
<h2>Tentang Produk Kami</h2>
<p>Isi dari about us</p>
<p>Isi dari about us</p>
<p>Isi dari about us</p>
<p>Isi dari about us</p>
</div>
</div>
Kemudian ini gambar untuk header:
Beikut ini kodenya:
<br>
<div class="row" id="produc">
<div class="container">
<div class="row">
<div class="span10">
<h2>Samsung Mobile</h2>
</div>
</div>
<div class="row">
<div class="span4 service-item">
<h4>Samsung Champ</h4>
<img src="Champ.jpg" width="70%" height="35%">
<p>Size
Dimensions : 96.3 x 53.8 x 13 mm
Weight : 80 g
Display
Type :TFT resistive touchscreen, 256K colors
Size :240 x 320 pixels, 2.4 inches
- TouchWiz Lite UI.</p>
</div>
<div class="span4 service-item">
<h4>Samsung Duos</h4>
<img src="duos.jpg" width="50%" height="25%">
<p>Samsung Galaxy Y Duos merupakan smartphone Android dengan dukungan dual GSM+GSM.</p>
<p>Samsung Galaxy Y Duos hadir menggunakan Android 2.3 Gingerbread dengan dukungan prosessor 830MHz.</p>
</div>
<div class="span4 service-item">
<h4>Samsung Galaxi Tab</h4>
<img src="galaxi.jpg" width="70%" height="30%">
<p>7-inch touchscreen Enhanced layar TFT dengan resolusi WSVGA.</p>
<p>Penawaran dan gambar lebih jelas, memberikan resolusi 1024 x 600.</p>
</div>
</div>
</div>
</div><br>
Dan ini tampilan untuk tabel atau pengisian data diri sekaligus footernya:
Berikut kodenya :
<div id="Pemesanan" class="row">
<div class="container">
<h4>Untuk Pemesanan Isikan Data Diri Anda di Bawah Ini:</h4>
<table>
<td width="200" valign="top" colspan="1" bgcolor="white" align="center">
</td><br>
<tr>
<td width="100"><b>Nama Anda</b></td></tr>
<td width="100"> <input type="text" value="Masukkan Nama Anda"size="25" /></td>
<tr>
<td width="100"><b>Credit Card</b></td></tr>
<td width="100"><select name="Credit Card">
<option>BCA
</option><option>BNI
</option><option>MANDIRI
</option></select>
</td>
<tr>
<td width="100"><b>No. Telepon</b></td></tr>
<td width="100"><input type="text" value="Masukkan No. Telepon Anda"size="25" /> </td></tr>
<tr>
<td width="100"><b>Alamat</b></td></tr>
<td width="100"><input type="text" value="Masukkan Alamat Anda"size="25" /></td>
</center></div></table>
<div id="sumbit" class="top" align="left">
<input type="submit" value="Agree"><input type="reset" value="Don't Agree">
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="container">
CopyRight@<a href="http://zianakalay.webs.com">Zianakalay.webs.com</a>
</div>
</div>
</footer>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And the last,,Kira2 sperti inilah tampilan fullnya:
Ok,,,Selesai,,,Semoga Tugas ini mendapat nilai yang sesuai dengan kerja keras saya,,,amiinnnn...
Tidak ada komentar:
Posting Komentar