In Feed Ads

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.

Panduan menciptakan grid toko online dengan  Membuat Grid Toko Online Dengan Bootstrap 4

Hai teman-teman, Dalam posting ini aku memperlihatkan 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 elok alasannya 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 bentuk nya sudah ibarat card atau kartu bukan ibarat 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 ibarat sublime atau notepad++.
2. Jika sudah,  buat sebuah file gres > beri nama index.html > paste kan aba-aba 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> 
3. Kemudian buat file gres lagi, new file > berinama custom.css > pastekan aba-aba dibawah ini > save.
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; }
4. Lebih baik lagi kau meletakkan kedua file ini kedalam satu project atau folder supaya gampang dalam pemanggilan file. Atau kau dapat sesuaikan dengan proyek kamu.
5. Jika sudah, kau dapat privew akhirnya di browser kamu. Jika berhasil maka akhirnya akan ibarat dibawah ini.

Panduan menciptakan grid toko online dengan  Membuat Grid Toko Online Dengan Bootstrap 4

Hal yang perlu kau perhatikan adalah:

  • Bootstrap yang dipakai diatas ialah script online, jadi kau haru terkoneksi dengan internet supaya scriptnya berjalan dengan baik. Tapi jikalau 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. jikalau kau suka dengan desain grid shop kita kali ini dapat kau share dan bagikan ke social media kau supaya teman-teman kau juga mencar ilmu bersama kita.

Berlangganan update artikel terbaru via email:

0 Response to "Membuat Grid Toko Online Dengan Bootstrap 4"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel