Membuat Template E-Commerce Responsive Dengan Bootstrap (Part 1)

Assalamualaikum wr. wb.
Ketemu lagi dengan saya, pada kesempatan kali ini saya akan menulis tutorial tentang pembuatan
Template E-Commerce dengan bootstrap, berhubung ini hanya sebuah template maka kita hanya
akan bermain dilingkungan client side saja (HTML, CSS, Javascript/Jquery) tanpa PHP maupun
MySQL, berikut penampakannya.
sebelum lanjut ke tutorial berikut saya jelaskan tentang penggunaan grid system pada bootstrap agar
nantinya mudah untuk melanjutkan tutorial. bootstrap menggunakan grid system untuk mengatur
tata letak element html. sederhanya grid itu adalah kotak-kotak, jadi bootstrap memisahkan
tampilan kedalam kotak-kotak. setiap baris terdiri dari 12 kotak/kolom.
contoh.
pada gambar diatas baris pertama memiliki 2 kotak, yaitu kotak col-md-8 dan kotak col-md-4
jumlah total = col-md12, setiap baris harus memiliki 12 kotak/kolom. kita bebas
mengkombinasikan kotak berapa saja yang kita inginkan asalkan jumlah akhir perbaris adalah 12.
lihat lagi contoh baris 2, terdapat 3 kotak/kolom yaitu col-md-4 sebanyak 3 jadi col-md4 x 3 =
col-md-12, kemudian pada baris terakhir, terdapat 2 kotak yaitu col-md-6 sebanyak 2 kotak jadi
totalnya col-md-6 x 2 = col-md-12. dan setiap 12 kotak dibungkus oleh class row.
berikut code dari gambar diatas.
1 <div class="row">
2 <div class="col-md-8">.col-md-8</div>
4 </div>
5 <div class="row">
9 </div>
10 <div class="row">
13 </div>
kira-kira seperti itu, untuk lebih jelasnya bisa dilihat di situsnya sendiri http://getbootstrap.com/css/.
selanjutnya kita akan mendesain template e-commerce perbaris/row. download dulu
perlengkapanya disini, pada tutorial ini saya menggunakan bootstrap yang telah dicostumize dari
situs http://bootswatch.com/
ok pertama buat file index.html
<!DOCTYPE html>
<html lang='en'>
1 <head>
2 <meta charset='utf-8'>
3
<meta name='viewport' content='width=device-width, initial-
4
scale=1'>
5
<link rel="stylesheet" href="bootstrap-3.3.4-
6
dist/css/bootstrap.css">
7
8 <script src="bootstrap-3.3.4-dist/js/jquery-
9 1.11.3.min.js"></script>
10 <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
11 </head>
12 <body>
13 
14
</body>
</html>
includekan semua plugin2nya.
ok mulai, pertama kita buat navbar atau menu bagian atas.

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
1
<button type="button" class="navbar-toggle collapsed
2
navbar-default" data-toggle="collapse" data-target="#navbar" aria-
3
4 expanded="false" aria-controls="navbar">
5 <span class="sr-only">Toggle navigation</span>
6 <span class="icon-bar"></span>
9 </button>
10 <a class="navbar-brand" href='#'><span class="glyphicon
11 glyphicon glyphicon-shopping-cart"><span> Rp. 10.000</a>
12 </div>
13 <div id="navbar" class="navbar-collapse collapse">
14 <form class="navbar-form navbar-left">
15 <input type="text" class="form-control"
16 style="width:100%;"placeholder="Search...">
17 </form>
18 <ul class="nav navbar-nav navbar-right">
19 <li class="active"><a href="#">Home</a></li>
20 <li><a href="#about">Best Produk</a></li>
21 <li><a href="#contact">How to buy</a></li>
22
<li class="dropdown">
23
<a href="#" class="dropdown-toggle" data-
24
25 toggle="dropdown" role="button" aria-expanded="false">Member <span
26 class="caret"></span></a>
27 <ul class="dropdown-menu" role="menu">
28 <li><a href="#">Login</a></li>
29 <li><a href="#">Sign Up</a></li>
30 </ul>
31 </li>
32 </ul>
33 </div>
</div>
</div>
</nav>

hasilnya
selanjutnya kita buat div container sebagai penampung div-div lain, jadi untuk kedepannya semua
div akan diletakkan didalam div ini.
1 
2 <div class="container">
3
4 
5
6 </div>
7 
container sudah jadi, sekarang kita akan membuat baris pertama, yaitu bagian logo produk. pada
baris ini kita akan menggunakan 1 kotak saja yaitu col-sm-12.
(pada penjelasan diatas saya menggunakancontoh col-md-*dan untuk penerapan saya
menggunakan col-sm-*) apa perbedaan dari md dan sm ?
md dan sm adalah class ukuran layar (md akronim dari Medium Device yaitu layar dengan
ukuran(992px) sedangakan sm adalah akronim dari Small Device yaitu layar dengan ukuran
(768px),
ok lanjut ke tutorial. baris pertama .
1 

2 <div class='row'>
3 <div class='col-sm-12'>
4 <img src="gherus.png" class="img-responsive">
5 </div>
6 </div>
7 
hasilnya.
selanjutnya baris kedua, carousel dan tabel keranjang kecil.

1 
2 <div class="row">
3 <div class="col-sm-8 col-xs-12">
4
5 <div class="panel panel-success">
6 <div class="panel-heading"><span class="glyphicon
7 glyphicon-star-empty"></span> Our Produk !</div>
8 <div class="panel-body">
9 
10 <div id="myCarousel" class="carousel slide" data-
11 ride="carousel">
12 
13 <ol class="carousel-indicators">
14 <li data-target="#myCarousel" data-slide-
15 to="0" class="active"></li>
16
<li data-target="#myCarousel" data-slide-
17 to="1"></li>
18
<li data-target="#myCarousel" data-slide-
19
to="2"></li>
20
</ol>
21

22
<div class="carousel-inner">
23
24 <div class="item active">
25 <img src="img/1.jpg">
26 <div class="carousel-caption">
27 <h3>Ghebuk </h3>
28 <p>Lorem ipsum dolor sit amet
29 consectetur
30 Lorem ipsum dolor sit amet
31 consectetur
33 consectetur
35 consectetur
37 consectetur
consectetur
39
</p>
40
</div>
41
</div>
42
43 <div class="item">
46 <h3>Rap-Orap</h3>
48 consectetur
50 consectetur
52 consectetur
54 consectetur
56 consectetur
Lorem ipsum dolor sit amet
57 consectetur
58 </p>
59 </div>
60 </div>
61 <div class="item">
64 <h3>Krepek Tette</h3>
66 consectetur
68 consectetur
70 consectetur
72 consectetur
74 consectetur
76 consectetur
77 </p>
78 </div>
79 </div>
80 </div>
81 
82 <a class="carousel-control left"
83 href="#myCarousel" data-slide="prev">
84 <span class="glyphicon glyphicon-
85 chevron-left"></span>
86 </a>
87 <a class="carousel-control right"
88 href="#myCarousel" data-slide="next">
89 <span class="glyphicon glyphicon-
90 chevron-right"></span>
91 </a>
92 </div>
93 
94 </div>
95 </div>
96 </div>
97 <div class="col-sm-4 col-xs-12">
98 <div class="panel panel-success">
99 <div class="panel-heading"><span class="glyphicon
100 glyphicon-shopping-cart"></span> Cart !</div>
101 <div class="panel-body">
<table class="table">
<tr class="success">
<th>Barang </th>
<th>Jumlah </th>
</tr>
<tr>
<td>Krupuk</td>
<td><span class="badge badge-
success">2</span></td>
</tr>
<tr>
<td>Nang-nginang</td>
</tr>
<tr>
<td>Ghebuk</td>
</tr>
<tr>
<td class="success"></td>
<td class="success"><span
class="label label-success">Rp. 10.000 </span></td>
</tr>
</table>
<button type="button" class="btn btn-warning
btn-sm" data-toggle="modal" data-target="#myModal"> View Cart
</button>
<button type="button" class="btn btn-success
btn-sm" >Chek Out </button>
</div>
</div>
</div>
</div>

part 1 sampai disini dulu.

Membuat Template E-Commerce Responsive Dengan Bootstrap (Part 1)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Template E-Commerce Responsive Dengan Bootstrap (Part 1)

Diunggah oleh

Hak Cipta:

Format Tersedia

Assalamualaikum wr. wb.

ok lanjut ke tutorial. baris pertama .

1

selanjutnya baris kedua, carousel dan tabel keranjang kecil.

Anda mungkin juga menyukai