طراحی ریسپانسیو وب 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>
</div>
<div class="city">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو،
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</body>
</html>

آزمایش کنید

بھوتسپرک کا استعمال

ریسپانسیو ڈیزائن بنانے کا ایک دوسرا طریقہ، موجودہ CSS فریم ورک کا استعمال کرنا ہے۔

بھوتسپرک سب سے زیادہ مقبول ریسپانسیو ویب کا HTML, CSS, اور JS فریم ورک ہے۔

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

!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>
  </div>
  <div class="col-md-4">
    <h2>پاریس</h2>
    <p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
  </div>
  <div class="col-md-4">
    <h2>توکیو</h2>
    <p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو،
    و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
  </div>
</div>
</div>
</body>
</html>

آزمایش کنید

برای یادگیری بیشتر در مورد Bootstrap، لطفاً دروس Bootstrap.