Ok Sobat, disini saya akan membagi tutorial membuat tampilan web untuk online shop dengan Bootstrap. anda belum tahu apa itu bootstrap ?
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. jadi anda tinggal panggil panggil saja fungsi css nya yang sudah dijadikan framework sama bootstrap. Bootstrap ini untuk mempermudah kita dalam membuat tampilan web kekinian yaitu Resvonsive.
1. Download dulu Bootstrap nya Download
2. Anda buat folder online shop nya, dengan nama Onlineshop. silahkan simpan dimana saja.
3. setelah itu, anda masukan file bootstrap yang telah didownload tadi ke dalam folder Onlineshop
4. didalam Folder Onlineshop anda buat folder baru dengan nama foto_produk
5. Masih didalam folder Onlineshop silahkan anda buat Coding nya dengan teks editor nya.
Copykan kode di bawah ini . Lalu simpan dengan nama file index.html
<!DOCTYPE html>
<html>
<head>
<title>Toko Online</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Keranjang</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Chekout</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" style="float: right; padding: 10px;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Konten -->
<section class="konten">
<div class="container">
<h1>Produk Terbaru</h1>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/dell.jpg">
<div class="caption">
<h3>Laptop Dell Gamer</h3>
<h5>Rp. 1,500,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/asus.jpg">
<div class="caption">
<h3>Laptop Asus X451C</h3>
<h5>Rp. Rp. 2,000,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/acer.png">
<div class="caption">
<h3>Laptop Acer A541Z</h3>
<h5>Rp. 2,500,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/samsung.jpg">
<div class="caption">
<h3>Laptop Samsung</h3>
<h5>Rp. 3,000,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/axio.png">
<div class="caption">
<h3>Laptop Axio</h3>
<h5>Rp. 2,300,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/aspire.jpg">
<div class="caption">
<h3>Laptop Aspire xix</h3>
<h5>Rp. Rp. 2,000,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/apple.jpeg">
<div class="caption">
<h3>Laptop Apple</h3>
<h5>Rp. 5,000,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="foto_produk/macintosh.png">
<div class="caption">
<h3>Laptop Macintosh</h3>
<h5>Rp. 4,000,000</h5>
<a href="#" class="btn btn-primary">Beli</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Untuk Gambar, silahkan masukan dulu gambar nya ke folder foto_produk, setelah itu ganti kode berikut, dan sesuaikan dengan nama gambar yang ada di folder foto_produk.
<!DOCTYPE html>
<img src="foto_produk/dell.jpg">
Setelah itu Selesai. silahkan buka index.html nya lewat browser anda.
Dan hasilnya seperti ini *SS:
Lihat Blog Generasi Baper
EmoticonEmoticon