HTML ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜ਼ਾਇਨ

ریسپانسیو ویب ڈیزائن کیا ہے؟

  • RWD یعنی ریسپانسیو ویب ڈیزائن (Responsive Web Design)
  • RWD ویب پیج کو متغیر سائز میں بھیج سکتا ہے
  • RWD بلٹ پر یورین اور موبائل پر ضروری ہے

اپنی خود کی ریسپانسیو ڈیزائن بنائیں

ریسپانسیو ڈیزائن بنانے کا ایک طریقہ، یہ ہے کہ آپ خود بخود ان کی ڈیزائن بنائیں:

!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 ڈیمو</h1>
<h2>ریسپانسیو ویب پیج کو چوڑا کریگا!</h2>
<br>
<div class="city">
<h2>لندن</h2>
<p>لندن انگلینڈ کی راجدھانی شہر ہے.</p>
<p>یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے,</p>
<p>جس میں میٹروپولیٹن علاقے میں 13 ملین سے زیادہ آبادی ہے.</p>
</div>
<div class="city">
<h2>پیر</h2>
<p>پیر فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو جاپان کی راجدھانی، بڑی توکیو علاقے کا مرکز ہے,</p>
اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے.</p>
</div>
</body>
</html>

آپ خود اسپرین بھیجئے

Bootstrap استعمال کریگا

ریسپانسیو ڈیزائن بنانے کا ایک دوسرا طریقہ، یہ ہے کہ آپ خود بخود ان کی ڈیزائن بنائیں:

Bootstrap سب سے پھلے دیکھنے والی HTML، CSS، اور JS فریم ورک ہے جو ریسپانسیو ویب کی ترقی کرنے میں مدد دیتا ہے。

Bootstrap مدد کریگا اپن سائٹس کی ڈیزائن کریگا کریگا کسی بھی سائز میں ڈسپلے، لپ تاپ، تبلٹ یا موبائل:

!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 ڈیمو</h1> 
  <p>اس رسپانسیو پیج کو بڑھائیں یا چھوئیں!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>لندن</h2>
    <p>لندن انگلینڈ کی راجدھانی شہر ہے.</p>
    <p>یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے,</p>
    <p>جس میں میٹروپولیٹن علاقے میں 13 ملین سے زیادہ آبادی ہے.</p>
  </div>
  <div class="col-md-4">
    <h2>پیر</h2>
    <p>پیر فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے.</p>
  </div>
  <div class="col-md-4">
    <h2>توکیو</h2>
    <p>توکیو جاپان کی راجدھانی، بڑی توکیو علاقے کا مرکز ہے,</p>
    اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے.</p>
  </div>
</div>
</div>
</body>
</html>

آپ خود اسپرین بھیجئے

اگر آپ کو بھی اور زیادہ معلومات ملنی چاہئیں، تو ہمارے Bootstrap تربیتی。