Responsive (Duyarlı) web tasarımı, telefonlardan büyük masaüstlerine kadar tüm cihazlarda iyi görünmesini sağlayacak web sitelerini ifade eder. Responsive tasarımda kullanılabilecek bir yöntem olan Bootstrap HTML ve CSS tabanlı tasarım şablonları içeren bir yapıdır. Bu örneğimizde Bootstrap ile basit bir duyarlı tasarım örneği oluşturacağız. Örneğimizde Bootstrap navbar kullanımı, image kullanımı, Bootstrap Form kullanımı, Masaüstü, tablet ve mobil cihazlar için yerleşim planlarını inceleyebilirsiniz.
Masaüstü Görünüm
Tablet Görünümü:
Mobil Görünümü
Kodlar:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>www.yazilimkodlama.com</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .img1{ margin-bottom: 30px; } .btn1{ margin-bottom: 30px; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Ahmet Cansever</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Ana Sayfa</a></li> <li><a href="#">Sayfa 1</a></li> <li><a href="#">Sayfa 2</a></li> <li><a href="#">Sayfa 3</a></li> </ul> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <img src="images/aa.jpg" class="img-responsive col-lg-12 col-md-12 col-sm-12"> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <h1>Projeler</h1> <hr> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <img src="images/a.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/b.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/c.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/a.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/b.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/c.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/a.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> <img src="images/b.jpg" class="img-responsive img1 col-lg-3 col-md-6 col-sm-12"> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <h1>Yazarlar</h1> <hr> <p class="col-lg-12 col-md-12 col-sm-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <div class="col-lg-3 col-md-6 col-sm-12"> <img src="images/1.png" class="img-responsive col-lg-12 col-md-12 col-sm-12"> <h2 class="col-lg-12 col-md-12 col-sm-12">Yazar 1</h2> <p class="col-lg-12 col-md-12 col-sm-12">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <button type="button" class="btn1 col-lg-12 col-md-12 col-sm-12 btn btn-primary btn-lg btn-block">Button</button> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <img src="images/2.jpg" class="img-responsive col-lg-12 col-md-12 col-sm-12"> <h2 class="col-lg-12 col-md-12 col-sm-12">Yazar 2</h2> <p class="col-lg-12 col-md-12 col-sm-12">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <button type="button" class="btn1 col-lg-12 col-md-12 col-sm-12 btn btn-primary btn-lg btn-block">Button</button> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <img src="images/3.png" class="img-responsive col-lg-12 col-md-12 col-sm-12"> <h2 class="col-lg-12 col-md-12 col-sm-12">Yazar 3</h2> <p class="col-lg-12 col-md-12 col-sm-12">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <button type="button" class="btn1 col-lg-12 col-md-12 col-sm-12 btn btn-primary btn-lg btn-block">Button</button> </div> <div class="col-lg-3 col-md-6 col-sm-12" > <img src="images/4.png" class="img-responsive col-lg-12 col-md-12 col-sm-12"> <h2 class="col-lg-12 col-md-12 col-sm-12">Yazar 4</h2> <p class="col-lg-12 col-md-12 col-sm-12">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <button type="button" class="btn1 col-lg-12 col-md-12 col-sm-12 btn btn-primary btn-lg btn-block">Button</button> </div> </div> </div> <div class="row"> <div class="col-lg12 col-md-12 col-sm-12"> <h2>İletişim</h2> <form> <div class="form-group"> <label for="ad">Ad:</label> <input type="text" class="form-control" id="ad"> <label for="soyad">Soyad:</label> <input type="password" class="form-control" id="soyad"> <label for="mail">E-Posta:</label> <input type="text" class="form-control" id="mail"> <label for="yorum">Mesaj:</label> <textarea class="form-control" rows="5" id="yorum"></textarea> <button type="button" class="btn btn-success">Success</button> </div> </form> </div> </div> <div class="row"> <h2>İletişim</h2> <div class="col-lg-12 col-md-12 col-sm-12"> <iframe class="col-lg-12 col-md-12 col-sm-12" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3010.9111427824905!2d28.97444895073676!3d41.005318027454706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDHCsDAwJzE5LjEiTiAyOMKwNTgnMzUuOSJF!5e0!3m2!1str!2str!4v1518630549585" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> </body> </html> |