Browsed by
Kategori: BootStrap

BootStrap Ürün Listeme Şablonu

BootStrap Ürün Listeme Şablonu

Bootstrap 4  ile hazırlanmış e-ticaret sitelerinde ürün listemek için kullanabileceğiniz güzel ve kullanışlı bir şablon aşağıya html ve css kodlarını bırakıyorum. Örnek olarak  giyim üzerine hazırlanmış durumda ancak tüm ürünlerin satışı için kullanılabilir. İlk olarak şunları head kısmına ekleyiniz. Buraya kendi oluşturacağımız css dosyasını dahil etmeyi unutmayız.   Bu kodları ise sayfanızın “body” kısmına ekleyiniz. <div class=”container”> <h3 class=”h3″>Alışveris </h3> <div class=”row”> <div class=”col-md-3 col-sm-6″> <div class=”product-grid”> <div class=”product-image”> <a href=”#”> <img class=”pic-1″ src=”http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg”> <img class=”pic-2″ src=”http://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg”> </a> <ul class=”social”>…

Devamını Oku Read More

Bootstrap Kullanıcı Giriş Şablonu

Bootstrap Kullanıcı Giriş Şablonu

Bootstrap için hazır kullanıcı giriş şablonunu aşağıdaki html ve css kodlarını projenize ekleyerek şablonu kullabilirsiniz. Html Kodları   <div class = “container”> <div class=”wrapper”> <form action=”” method=”post” name=”Login_Form” class=”form-signin”> <h3 class=”form-signin-heading”>Welcome Back! Please Sign In</h3> <hr class=”colorgraph”><br> <input type=”text” class=”form-control” name=”Username” placeholder=”Username” required=”” autofocus=”” /> <input type=”password” class=”form-control” name=”Password” placeholder=”Password” required=””/> <button class=”btn btn-lg btn-primary btn-block” name=”Submit” value=”Login” type=”Submit”>Login</button> </form> </div> </div> Css Kodları   .wrapper { margin-top: 80px; margin-bottom: 20px; } .form-signin { max-width: 420px; padding: 30px 38px 66px;…

Devamını Oku Read More

BootStrap Fotoğraf Galerisi

BootStrap Fotoğraf Galerisi

Bootstrap ile yapılmış responsive bir fotoğraf galerisi.     Resimlerin responsive olabilmesi için css kodumuz   img{ width: 100%; height: auto; }   Fotoğraf galerisinin html kodları   <div class=”col-md-8″> <section class=”slider”> <div id=”carousel-example” class=”carousel slide” data-ride=”carousel”> <ol class=”carousel-indicators”> <li data-target=”#carousel-example” data-slide-to=”0″ class=”active”></li> <li data-target=”#carousel-example” data-slide-to=”1″></li> <li data-target=”#carousel-example” data-slide-to=”2″></li> </ol> <div class=”carousel-inner”> <div class=”item active”> <a href=”#”><img src=”http://freewallpaperspictures.com/wp-content/uploads/2016/01/hd-wallpapers-1080p-widescreen-nature-free-download-1024×576.jpg” /></a> </div> <div class=”item”> <div ></div> <a href=”#”><img src=”http://freewallpaperspictures.com/wp-content/uploads/2016/01/hd-best-wallpapers-free-download-1080p-1024×576.jpg” /></a> </div> <div class=”item”> <a href=”#”><img src=”http://freewallpaperspictures.com/wp-content/uploads/2016/01/Mobile_HD_Wallpapers_1080p-1024×576.jpg” /></a> </div> </div> <a class=”left carousel-control”…

Devamını Oku Read More