طراحی وب‌سایت پاسخگو - شبکه‌های پاسخگو

شبکه‌های پاسخگو چیست؟

بسیاری از وب‌سایت‌ها بر اساس شبکه‌های پاسخگو (grid-view) هستند، این بدان معناست که صفحه به چند ستون تقسیم شده است:

استفاده از نمونه شبکه در طراحی وب‌سایت بسیار مفید است. این کار به شما اجازه می‌دهد تا به راحتی عناصر را روی صفحه قرار دهید.

شبکه‌های پاسخگو معمولاً 12 ستون دارند و عرض کل آن‌ها 100% است و هنگام تغییر اندازه پنجره مرورگر انقباض و انبساط می‌کنند.

ساخت شبکه‌های پاسخگو

اجازه دهید شروع به ساخت نمونه‌ای از شبکه‌های پاسخگو شویم.

ابتدا، اطمینان حاصل کنید که تمام عناصر HTML box-sizing ویژگی تنظیم شده به border-boxاین کار اطمینان حاصل می‌کند که عرض و ارتفاع کل عناصر شامل حاشیه‌ها (填充) و لبه‌ها است.

لطفاً کد زیر را به CSS اضافه کنید:

* {
  box-sizing: border-box;
}

لطفاً در Box Sizing 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;
}

آزمایش کنید

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