رسپانسیو ویب ڈیزائن - گرید ویو

گرید ویو کیا ہے؟

بہت سے ویب پج گرید ویو (grid-view) پر مبنی ہیں، یعنی ویب پج کچھ کلومن میں تقسیم کیا گیا ہے:

ویب پج کی ڈیزائن میں، گرید ویو کا استعمال کریئے، جس سے عناصر کو ویب پج پر رکھنا آسان ہوجاتا ہے。

رسپانسیو گرید ویو عامتاً 12 کلومن رکھتا ہے، کل چوڑائی 100% اور بروئر ونڈو کی چوڑائی کو تبدیل کرنے پر تنگ اور بڑھتا ہوا ہوتا ہے。

رسپانسیو گرید ویو کی تعمیر

ہم رسپانسیو گرید ویو کی تعمیر شروع کریئے:

ابتدا، سبھی HTML عناصر کا box-sizing نمائش کا border-boxایسا کرنا یقینی بنائے کہ عناصر کی کل اونچائی اور چوڑائی میں داخلی فضائی (پادھار) اور فریم (بوردر) شامل ہیں。

CSS میں مندرجہ بالا کو کریپت کریئے:

* {
  box-sizing: border-box;
}

لطفاً ہمارے CSS بکس سائزنگ box-sizing نمائش کی کئی معلومات پڑھیئے:

ایک مثال دکھادیگا جس میں ایک سادے رسپانسیو ویب پج میں دو کلومن شامل ہیں:

25%
75%

مثال

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

亲自试一试

اگر وب‌سایت فقط شامل دو ستون باشد، مثال بالا خوب است.}

اما، ما می‌خواهیم از یک ویژگی شبکه پاسخگو با 12 ستون استفاده کنیم تا بهتر از وب‌سایت کنترل کنیم.

ابتدا باید درصد یک ستون را محاسبه کنیم: 100% / 12 ستون = 8.33%.

بعد از آن، ما برای هر یک از 12 ستون یک کلاس ایجاد می‌کنیم، یعنی class="col-" و یک عدد، که تعیین می‌کند این بخش باید چند ستون را پوشش دهد:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

亲自试一试

تمام این ستون‌ها باید به سمت چپ شناور شوند و دارای 15px فضای داخلی باشند:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

هر سطر باید توسط <div> در آنجا. تعداد کل ستون‌های درون باید مجموع 12 باشد:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

تمام ستون‌های درون به سمت چپ شناور می‌شوند، بنابراین از جریان صفحه خارج می‌شوند و سایر عناصر را در جایی قرار می‌دهند که گویی این ستون‌ها وجود ندارند. برای جلوگیری از این مسئله، ما استایل‌های پاکسازی جریان را اضافه می‌کنیم:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

آموزش می‌خواهیم برخی از استایل‌ها و رنگ‌ها را اضافه کنیم تا بهتر به نظر برسد:

مثال

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

亲自试一试

请注意，当您将浏览器窗口调整为非常小的宽度时，例中的网页看起来并不理想。在下一章中，您将学习如何解决这个问题。