Browsed by
Kategori: Html

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

jQuery DatePicker Kullanımı

jQuery DatePicker Kullanımı

Bu yazımızda jQuery nin DatePicker’ ni kullanacağız. İlk olarak şu kodlarımızı kullanacağımız yere ekliyoruz.Ben Jsp sayfası içerisinde yapacağım. Head Tagları arasına bu kodları ekliyorum.   <link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”> <script src=”//code.jquery.com/jquery-1.10.2.js”></script> <script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script> <link rel=”stylesheet” href=”/resources/demos/style.css”> <script> $(function() { $( “#datepicker” ).datepicker(); }); </script> Body Tagları arasına bu kodları ekliyorum.   <form method=”post” action=”TarihiAl.jsp” name=”tarih”> <table> <tr> <td><font size=”5″>Tarih:</font></td> <td><input type=”text” id=”datepicker” name=”tarih”></td> </tr> <tr> <td colspan=”2″ align=”right”><input type=”submit” value=”Gönder” name=”GonderButon”></td> </tr> </table> </form> Text üzerine geldiğimizde tarihi seçebileceğiz.  

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