Membuat Grid Toko Online Dengan Bootstrap 4
Panduan menciptakan grid toko online dengan bootstrap 4 php dan custom css. Grid toko online atau layout kontent online shop yang keren hanya dengan bootstrap 4.
Hai teman-teman, Dalam posting ini aku menunjukkan Anda desain kotak toko online, gird shop, box real estate dan lain-lain. Kamu dapat memakai desain ini untuk menampilkan produk atau barang yang ingin dijual.
Desain grid shop ini sangat cantik alasannya ialah di dalamnya sudah memuat gambar produk, label harga, keterangan produk, rating produk dan ada dua tombol yang dapat kau kutom sesuai toko online yang ingin kau bangun. Layout ini dapat kau kombinasikan dengan toko online atau project kamu.
Desain ini dibentuk memakai fitur column atau kolom pada bootstrap 4 dan tentungan box-box ini sudah niscaya responsive. Kalau pada bootstrap 4 namanya mungkin sudah sedikit berubah alasannya ialah bentuk nya sudah menyerupai card atau kartu bukan menyerupai thumbnail lagi.
Bagi kalian yang sedang mencari rujukan box online shop atau gird shop dapat ikuti panduan dibawah ini untuk membuatnya:
2. Jika sudah, buat sebuah file gres > beri nama index.html > paste kan isyarat dibawah ini > save.
5. Jika sudah, kau dapat privew akibatnya di browser kamu. Jika berhasil maka akibatnya akan menyerupai dibawah ini.
Hal yang perlu kau perhatikan adalah:
Semoga tutorial Membuat Grid Toko Online Dengan Bootstrap 4 kali ini dapat bekerja dengan baik pada kau juga, dan semoga desain grid shop ini dapat diterapkan pada project kamu. Apabila ada error atau pertanyaan dapat ditanyakan di kolom komentar dibawah ini.
Jika sudah paham, tidak ada salahanya meninggalkan jejak dikolom komentar saya, yang penting sopan dan tidak melanggar hukum dan SARA. kalau kau suka dengan desain grid shop kita kali ini dapat kau share dan bagikan ke social media kau semoga teman-teman kau juga berguru bersama kita.
Hai teman-teman, Dalam posting ini aku menunjukkan Anda desain kotak toko online, gird shop, box real estate dan lain-lain. Kamu dapat memakai desain ini untuk menampilkan produk atau barang yang ingin dijual.
Desain grid shop ini sangat cantik alasannya ialah di dalamnya sudah memuat gambar produk, label harga, keterangan produk, rating produk dan ada dua tombol yang dapat kau kutom sesuai toko online yang ingin kau bangun. Layout ini dapat kau kombinasikan dengan toko online atau project kamu.
Desain ini dibentuk memakai fitur column atau kolom pada bootstrap 4 dan tentungan box-box ini sudah niscaya responsive. Kalau pada bootstrap 4 namanya mungkin sudah sedikit berubah alasannya ialah bentuk nya sudah menyerupai card atau kartu bukan menyerupai thumbnail lagi.
Bagi kalian yang sedang mencari rujukan box online shop atau gird shop dapat ikuti panduan dibawah ini untuk membuatnya:
Cara Membuat Gird Shop dengan Bootstrap
1. Silahkan buka aplikasi text editor favorit anda menyerupai sublime atau notepad++.2. Jika sudah, buat sebuah file gres > beri nama index.html > paste kan isyarat dibawah ini > save.
<!DOCTYPE html> <html> <head> <title>Toko Online Design</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container main-section"> <div class="row"> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="jaket2.jpg" class="p-0 m-0 res-ponsive"> <!--Ganti Gambar Sendiri/ Script PHP Produk--> <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2">Jaket Boomber</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">Rp 300.000</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a> </div> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="jaket2.jpg"> <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2">Jaket Boomber 1</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">Rp 400.000</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a> </div> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="jaket2.jpg" > <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2">Jaket Gunung</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">Rp 300.400</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Beli</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Masuk Keranjang</a> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> body{ background-color: #f5f5f5; font-family: 'Roboto Condensed', sans-serif; } .main-section{ margin-top:20px; } .add-sens{ position: absolute; top:0px; right:50px; } .img-section{ overflow: hidden; } .img-section img{ overflow: hidden; width:100%; } .img-section img:hover{ opacity:0.6; transition: 0.5s; cursor: pointer; } .sectin-title h1{ font-weight:700; font-size:23px; color:#285A63; } .section-detail p{ color:#756d6d; letter-spacing: 1px; } .fa-star,.fa-star-half-alt{ color:#FEC00B; } .fa-star-half-alt{ margin-right: 10px; }5. Jika sudah, kau dapat privew akibatnya di browser kamu. Jika berhasil maka akibatnya akan menyerupai dibawah ini.
Hal yang perlu kau perhatikan adalah:
- Bootstrap yang dipakai diatas ialah script online, jadi kau haru terkoneksi dengan internet semoga scriptnya berjalan dengan baik. Tapi kalau kau ingin memakai untuk offline kau dapat download bootstrap4 yg offline nya.
- Kamu dapat ganti produk image dengan gambar kau sendiri, caranya sialhkan copy gambar ke dalam folder project dan ganti link gambar profil nya pada index.html.
- Kamu dapat sesuakan semua link yang ada didalam script dengan proyek yang sedang kau kerjakan.
Semoga tutorial Membuat Grid Toko Online Dengan Bootstrap 4 kali ini dapat bekerja dengan baik pada kau juga, dan semoga desain grid shop ini dapat diterapkan pada project kamu. Apabila ada error atau pertanyaan dapat ditanyakan di kolom komentar dibawah ini.
Jika sudah paham, tidak ada salahanya meninggalkan jejak dikolom komentar saya, yang penting sopan dan tidak melanggar hukum dan SARA. kalau kau suka dengan desain grid shop kita kali ini dapat kau share dan bagikan ke social media kau semoga teman-teman kau juga berguru bersama kita.
Posting Komentar untuk "Membuat Grid Toko Online Dengan Bootstrap 4"