Bootstrap 4 ile responsive duyarlı web sayfası tasarım örneği. Örnekte Masaüstü bilgisayar, tablet ve mobil için ayrı ayrı görünüm ayarlanmıştır. navbar kullanımı, corousel kullanımı, margin kullanımı, order kullanımı ve yerleşim düzeni kullanımını inceleyebileceğiniz BootStrap 4 tasarımı.
Örneğe ait masaüstü, tablet ve mobil için görünümler ve HTML kodları aşağıdadır.
Masaüstü Görünüm:
Tablet Görünümü:
Mobil Görünümü:
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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <!doctype html> <html> <head> <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> <div class="container"> <div class="row"> <div class="col"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html">SİTE ADI</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" 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="#">Ürünler</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Referanslar</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"> Hizmetler </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Web Tasarım</a> <a class="dropdown-item" href="#">Grafik Tasarım</a> <a class="dropdown-item" href="#">Veritabanı</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">İletişim</a> </li> </ul> </div> </nav> </div> </div><!--NavBar--> <div class="row"> <div class="col"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="image/1.jpg" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h5>CSS Renkler</h5> <p>CSS Renklerle Çalışmak</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="image/2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="image/3.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div><!--Carousel--> <div class="row mt-3"><!--İçerik--> <div class="col-lg-4 col-md-12 mb-3"> <div class="row"> <div class="col-lg-12 col-md-4"> <img class="img-fluid" src="image/3.jpg"> </div> <div class="col-lg-12 col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum. </div> </div> </div> <div class="col-lg-4 col-md-12 mb-3"> <div class="row"> <div class="col-lg-12 col-md-4 order-md-2 order-lg-1"> <img class="img-fluid" src="image/1.jpg"> </div> <div class="col-lg-12 col-md-8 order-md-1 order-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum..</div> </div> </div> <div class="col-lg-4 col-md-12 mb-3"> <div class="row"> <div class="col-lg-12 col-md-4"> <img class="img-fluid" src="image/2.jpg"> </div> <div class="col-lg-12 col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet sit amet odio non dictum.</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> |
Yorum Yap