Bootstrap 4 ile responsive tasarım örneklerine devam ediyoruz. navbar kullanaımı, responsive image kullanımı, layout yerleşim kullanımının gösterildiği web sayfa örneği.
Örneğe ait masaüstü görünümü ve mobil görünümü + HTML kodları aşağıdadır.
Masaüstü Görünüm:
Mobil Görünüm:
index.html 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 |
<!doctype html> <html lang="tr"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>tasarimkodlama.com</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html">tasarimkodlama.com</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Anasayfa <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Web Tasarım</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Programlama</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Veritabanı </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">SQL Server</a> <a class="dropdown-item" href="#">SQLite</a> <a class="dropdown-item" href="#">Oracle</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Uygulamalar</a> </li> </ul> </div> </nav> <div class="container mt-3"> <div class="row"> <div class="col-lg-8 col-sm-12"><img src="images/1.png" class="img-fluid"></div> <div class="col-lg-4 col-sm-12"> <h2>WEB TASARIM</h2> <p class="text-justify">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <button type="button" class="btn btn-primary">TIKLA</button> </div> </div> <div class="row"> <div class="col-lg-12 col-sm-12"> <div class="p-3 mb-2 bg-secondary text-white mt-3 text-center">Web Tasarım Dersleri ve Kodlama Dersleri için <a href="https://www.tasarimkodlama.com">tasarimkodlama.com</a> adresini ziyaret edin.</div> </div> </div> <div class="row"> <div class="col-lg-4 col-sm-12"> <div class="card"> <img class="card-img-top" src="images/card-1.png" alt="Card 1"> <div class="card-body"> <h5 class="card-title">Programlama</h5> <p class="card-text">Sitemizde C#, C++, Python, Java gibi programlama dillerine ait bir çok örnek bulunmaktadır..</p> <a href="#" class="btn btn-primary">Daha Fazlası...</a> </div> </div> </div> <div class="col-lg-4 col-sm-12"> <div class="card"> <img class="card-img-top" src="images/card-2.png" alt="Card 1"> <div class="card-body"> <h5 class="card-title">Web Tasarım</h5> <p class="card-text">HTML, CSS, Bootstrap, JavaScript, Jquery, PHP, ASP.NET dersleri örnekleri için tasarimkodlama.com.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-lg-4 col-sm-12"> <div class="card"> <img class="card-img-top" src="images/card-3.png" alt="Card 1"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-sm-12"> <div class="col-lg-12 col-sm-12"> <div class="p-3 mb-2 bg-secondary text-white mt-3 text-center"><a href="https://www.tasarimkodlama.com">tasarimkodlama.com</a> Web Tasarım ve Kodlama.</div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> |
Add comment