Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana produk-produk tersebut di tampilkan dengan format layout yang berbeda-beda. Tahukan Sobat, layout untuk display suatu produk memiliki peran penting agar suatu produk terlihat menarik, dan pengunjung ikut mencari tahu isi detail produk tersebut. Kali ini saya akan memberikan satu referensi terkait display produk dengan menggunakan Layout Box 4 Kolom dengan menggunakan Bootstrap. Versi Bootstrap yang saya pakai adalah yang terbaru yaitu versi 3.3.4. Oke langsung saja..
Alat dan Bahan:
1. file jquery-1.10.2.min.js
2. file Bootstrap.js
3. file Bootstrap.css
4. file styles.css
5. file index.html
*) File Javascript diletakkan di folder js, file css diletakkan di folder css.
Cara Pembuatan
1. Buka file index.html lalu masukkan format default struktur HTML seperti di bawah:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html><html lang="id"><head> <title>Tutorial Bootstrap Box 4 Kolom</title> <!-- Bootstrap --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"></head><body> <div class="container"><br>.............. isi kode display 4 box .................. </div> <!-- Le javascript --> <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> --> <script src="../js/jquery-1.10.2.min.js"></script> <script src="../js/bootstrap.js"></script></body></html |
2. Kode layout tampilan box 4 kolom akan kita letakkan di baris .............. isi kode display 4 box ..................
3. Masukkan di baris tersebut, kode di dibawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <h2><center>Contoh Produk Display Layout Box 4 Kolom</center></h2><div class="col-md-3"> <div class="box"> <img src="images/1.jpg" alt="" /> <div class="desc"> <h3>Pizza Papa</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="social"> <div class="likes">5 Likes</div> <div class="prize" >$25</div> </div> </div></div><div class="col-md-3"> <div class="box"> <img src="images/2.jpg" alt="" /> <div class="desc"> <h3>Pancake Honey</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="social"> <div class="likes">5 Likes</div> <div class="prize" >$65</div> </div> </div></div><div class="col-md-3"> <div class="box"> <img src="images/3.jpg" alt="" /> <div class="desc"> <h3>Meat Smoke</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="social"> <div class="likes">5 Likes</div> <div class="prize" >$15</div> </div> </div></div><div class="col-md-3"> <div class="box"> <img src="images/4.jpg" alt="" /> <div class="desc"> <h3>Pacaroni</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="social"> <div class="likes">5 Likes</div> <div class="prize" >$95</div> </div> </div></div> |
Penjelasan:
Secara garis besar, kode layout Box terdiri dari 4 blok kode yaitu dengan nama<div class="col-md-3"></div> lalu di ikuti dengan blok kode dibawahnya untuk tujuan styiling CSS dengan class <div class="box"></div>. Struktur class dan tag-nya dapat kita lihat sebagai berikut:
Level 0 col-md-3 (Kolom 1)
Level 1 ---- class "box"
Level 1.1 --------------- Tag IMG
Level 1.2 --------------- class "desc"
Level 1.3 --------------- class "social"
Level 1.3.1 ---------------------------- class "likes"
Level 1.3.2 ----------------------------- class "prize"
Level 0 col-md-3 (Kolom 2)
Level 1 ---- class "box"
Level 1.1 --------------- Tag IMG
Level 1.2 --------------- class "desc"
Level 1.3 --------------- class "social"
Level 1.3.1 ---------------------------- class "likes"
Level 1.3.2 ----------------------------- class "prize"
....... dan seterusnya sampai kolom keempat.
4. Buka file styles.css lalu isikan dengan kode CSS Berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| .box{background-color:#fff;overflow: hidden;height:350px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius:5px;-webkit-box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3);box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3);}.box img{ width:101%; height:150px;}.box h3{ padding:15px; margin:0px;}.box p{ overflow:hidden; height:100px; padding-left:15px; padding-right:15px; margin:0px;}.desc{ height:150px; border-bottom:1px solid #ddd;}.likes{ float:left; padding:15px; margin:0px;}.prize{ float:right; padding:15px; margin:0px;} |
Penjelasan:
1. Untuk membuat kotak box rounded gunakan parameter border-radius, lalu untuk membuat efek bayangan pada box gunakan box-shadow.
2. Ubahlah parameter tinggi (height) sesuai kebutuhan Sobat. Yang tidak kalah penting lagi adalah pemilihan font yang cocok sehingga tampilan lebih menarik.
Bila sudah berhasil membuat tampilan display produk dengan 4 kolom di atas, silakan dicoba agar tampilannya lebih menarik lagi seperti gambar di bawah ini:
Selamat Mencoba!
Tidak ada komentar:
Posting Komentar