HTML Yanıt Veren Web Tasarımı

Yanıt verici Web Tasarımı nedir?

  • RWD, yanıt verici web tasarımı (Responsive Web Design) anlamına gelir
  • RWD, web sayfalarını değişken boyutlarda iletmeyi sağlar
  • RWD, tablet ve mobil cihazlar için gereklidir

Kendi yanıt verici tasarımınızı oluşturun

Yanıt verici tasarım oluşturmanın bir yolu, kendiniz oluşturmaktır:

!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com Demo</h1>
<h2> Bu yanıt verici sayfayı yeniden boyutlandırın!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London, İngiltere'nin başkenti.</p>
<p>Bu, İngiltere'nin nüfusu en fazla olan şehridir,</p>
<p>13 milyondan fazla nüfuslu bir metropoliten alanıyla.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan büyük şehridir.</p>
</div>
</body>
</html>

Kişisel olarak deneyin

Bootstrap kullanarak

Yanıt verici tasarım oluşturmanın bir başka yolu, hazır CSS çerçevelerini kullanmaktır.

Bootstrap, en popüler HTML, CSS ve JS çerçevelerinden biri olan yanıt verici web geliştirmek için kullanılır.

Bootstrap, her boyutlarda harika görünen siteler geliştirmenize yardımcı olur: televizyon ekranı, dizüstü bilgisayar, tablet veya telefon:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com Demo</h1> 
  <p> Bu duyarlı sayfayı yeniden boyutlandırın!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London, İngiltere'nin başkenti.</p>
    <p>Bu, İngiltere'nin nüfusu en fazla olan şehridir,</p>
    <p>13 milyondan fazla nüfuslu bir metropoliten alanıyla.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
    ve dünyanın nüfusu en fazla olan büyük şehridir.</p>
  </div>
</div>
</div>
</body>
</html>

Kişisel olarak deneyin

Bootstrap hakkında daha fazla bilgi edinmek için bizim Bootstrap Eğitimi.