Navigasi TokoOnline Bootstrap template

Navigasi TokoOnline Bootstrap template

Navigasi :


merupakan hal yang penting bagi toko online navigasi yang baik juga akan memberikan pengalaman yang baik bagi visitornya
pada kesempatan kali ini weonesite akan membagikan cource code mudah untuk membuat Navigasi TokoOnline Bootstrap template.
sebelum kita masuk bagi sobat weone yang belum punya bootstrap library file bootstrap libray bisi di dapatkan di https://getbootstrap.com/


<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="lib/bootstrap.min.css">

 <script src="lib/jquery.min.js"></script>

 <script src="lib/bootstrap.min.js"></script>

</head>

<body>



<div class="bs-example">

 <nav id="myVavbar" class="navbar navbar-default" role="navigation">

 <!-- Brand and toggle get grouped for better mobile display-->

<div class="container">

<div class="navbar-header">

 <button type="button" class="navbar-toggle" data-toggle="collapse"

 data-target="#bs-example-navbar-collapse-1">

 <span class="sr-only">Toggle navigation</span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 </button>

 <a class="navbar-brand" href="#">Toko online Wahid</a>

 </div>

 <!-- collect the nav links, forms, and other content for toggling-->

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav">

  

  <li><a href="#">Home</a><li>

  <li  class="dropdown">

  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Profile

  <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="#">History</a></li>

  <li><a href="#">Owner</a></li>

  <li><a href="#">Organization</a></li>

  </ul>

  <li  class="dropdown">

  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Product

  <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="#">HP</a></li>

  <li><a href="#">PC</a></li>

  <li><a href="#">CAMERA</a></li>

  </ul>

  <li  class="dropdown">

  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Service

  <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="#">HOW TO BUY</a></li>

  <li><a href="#">DELIVERY ORDER</a></li>

  <li><a href="#">HOW TO COMPLAIN</a></li>

  </ul>

  <li  class="dropdown">

  <a href="latBprofile.html" data-toggle="dropdown" class="dropdown-toggle">Contack us

  <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="latBproduct.html">OFFICE</a></li>

  <li><a href="latBservice.html">FB</a></li>

  <li><a href="latBpcontact.html">INSTA</a></li>

  </ul>

 </li>

 </ul>

 <ul class="nav navbar-nav navbar-right">

 <li  class="dropdown">

  <a href="latBprofile.html" data-toggle="dropdown" class="dropdown-toggle">Admin

  <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="latBproduct.html">action</a></li>

  <li><a href="latBservice.html">another act</a></li>

  <li class="divider"></li>

  <li><a href="latBpcontact.html">setting</a></li>

  </ul>

 </li>

 </ul>

 </div><!--/.navbar-collapse-->

 </div>

 </nav>

 </div>

 

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-body">BEST PHONE</div>

   <div class="panel-body"><img src="iphone.jpg"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">iphone 7- 125GB -jet black jet black <br>

  <a href="product.html" target="_blank">spesifikasi</a><br>

  rp. 120.10.1000<br>

  <strike>RP. 120.10.1000</strike><br>

  <italic>cicilan</italic>:1.000.0000</div>

 </div>

 </div>

 

   <div class="col-sm-4">

   <div class="panel panel-danger">

   <div class="panel-body">BEST SELLER</div>

   <div class="panel-body"><img src="amb11.jpg"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Apple macbook  -jet Grey jet black <br>

  <a href="product1.html" target="_blank">spesifikasi</a><br>

  rp. 12.10001000<br>

  <strike>RP. 120.10.1000</strike><br>

  <italic>cicilan</italic>:1.000.0000</div>

 </div>

 </div>

 

   <div class="col-sm-4">

   <div class="panel panel-succes">

   <div class="panel-body">NEW CAMERA</div>

   <div class="panel-body"><img src="NC1.jpg"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">NIKON D5200  -jet Grey jet black <br>

  <a href="product2.html" target="_blank">spesifikasi</a><br>

  rp. 12.10001000<br>

  <strike>RP. 10.10.1000</strike><br>

  <italic>cicilan</italic>:1.000.000</div>

 </div>

 </div>

 </div>

 </div><br>

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-heading">DISCOUN ULANG TAHUN</div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=SPESIAL DISCOUN"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">SYARAT DAN KETENTUAN BERLAKU </div>

 </div>

 </div>

 

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-heading">CASHBACK UP TO 50%</div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=CASHBACK"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">SYARAT DAN KETENTUAN BERLAKU </div>

 </div>

 </div>

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-heading">FREE ONGKOS KIRIM</div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=FREE ONGKIR"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">SYARAT DAN KETENTUAN BERLAKU </div>

 </div>

 </div>

 </div><br><br>



<footer class="container-fluid text-center">

 <p>Copyrigth toko online</p>

 <form class="form-inline">Get deals:

 <input type="Email" class="form-control"size="50" placeholder="Alamat Email">

 <button type="button" class="btn btn-danger">Sign Up</button>

 </form>

 </footer>

 </body>

 </html>


Hasil Contoh Navigasi TokoOnline Bootstrap template versi dekstop

Navigasi TokoOnline Botstrap template versi dekstop

Hasil Contoh Navigasi TokoOnline Bootstrap template versi mobile

Hasil Contoh Navigasi TokoOnline Botstrap template versi mobile

Penjelasan tentang Navigasi TokoOnline Bootstrap template

Navigasi Template bootstrap tersebut bisa di edit sesuai kebutuh mulai dari nama toko, produk, harga, spesifikasi bahkan testimoni yang dibuat pada page html lain yang kita link ke page utama kita.


cukup sekian artikel tentang Navigasi TokoOnline Bootstrap template
semoga bermanfaat...!!!

No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel