٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش طراحی وب پاسخگو – نمای شبکه

Grid-View چیست؟ بسیاری از صفحات وب مبتنی بر grid-view هستند ، به این معنی که صفحه به ستونهایی تقسیم شده است:یک نمای پاسخگو grid اغلب 12 ستون دارد و عرض آن 100٪ است و با تغییر اندازه پنجره مرورگر ،…

محمد یوسفی

15 جولای 2021

Grid-View چیست؟

بسیاری از صفحات وب مبتنی بر grid-view هستند ، به این معنی که صفحه به ستونهایی تقسیم شده است:یک نمای پاسخگو grid اغلب 12 ستون دارد و عرض آن 100٪ است و با تغییر اندازه پنجره مرورگر ، کوچک و گسترش می یابد.


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

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

ابتدا اطمینان حاصل کنید که همه عناصر HTML box-sizingویژگی تنظیم شده را دارند border-box. این اطمینان می دهد که بالشتک و حاشیه در عرض و ارتفاع کل عناصر موجود باشد.

کد زیر را در CSS خود اضافه کنید:

{
box-sizing: border-box;
}

اطلاعات بیشتر در مورد این box-sizingویژگی را در فصل اندازه گیری جعبه CSS ما بخوانید .

مثال زیر یک صفحه وب پاسخگو با دو ستون را نشان می دهد:

مثال

.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;
}

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها