وب

Grid System یا سیستم شبکه بوت استرپ

منظور از شبکه چیست؟

در طراحی گرافیک، یک شبکه، یک ساختار (معمولا دو بعدی) است که از یک سری خطوط مستطیلی (عمودی، افقی) متقاطع تشکیل شده است که برای ایجاد ساختار محتوا استفاده می‌شود. این شبکه به طور گسترده ای برای طراحی طرح بندی Layout و ساختار محتوا در طراحی چاپ استفاده می‌شود. شبکه در طراحی وب هم، یک روش بسیار موثر برای ایجاد سریع و موثر یک طرح سازگار با استفاده از HTML و CSS است.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

به بیان ساده، شبکه‌ها در سازماندهی طراحی وب و ساختار محتوا، اسکن وب سایت‌ها را آسان کرده و باعث کاهش بارِ شناختی کاربران می‌شود.

سیستم شبکه بوت استرپ چیست؟

برای داشتن تعریف درستی از سیستم شبکه بوت استرپ یا سیستم شبکه بندی بوت استرپ، تعریفی که توسط اسناد رسمی بوت استرپ برای سیستم شبکه بوت استرپ مطرح شده است را در نظر می‌گیریم:

بوت استرپ شامل یک سیستم شبکه واکنش گرا، و اولین شبکه سازگار برای گوشی تلفن همراه است که به طور مناسب و تا ۱۲ ستون، بر اساس اندازه دستگاه یا اندازه نمایشگر افزایش می‌یابد. این شامل کلاس‌های از پیش تعریف شده برای گزینه‌های طرح بندی آسان، و همچنین ترکیب قدرتمندی برای تولید طرح‌های معنایی بیشتر است.

بگذارید عبارت بالا را درک کنیم. بوت استرپ ۳، اول برای تلفن همراه است به این معنا که کار کد بوت استرپ ابتدا با هدف قرار دادن صفحه‌های نمایش کوچکتر مانند دستگاه‌های تلفن همراه و تبلت‌ها آغاز می‌شود و سپس اجزا و شبکه‌ها را برای صفحه نمایش‌های بزرگتر مانند لپ تاپ‌ها و دسکتاپ‌ها “گسترش” می‌دهد.

آموزش پیشنهادی برای شما : آموزش Bootstrap 4 | جادوی رابط کاربری

استراتژیِ اول موبایل یا Mobile First

  • محتوا: تعیین آنچه که مهم تر است.
  • طرح بندی: ابتدا طراحی برای عرض‌های کوچک تر >>> پایه CSS اول برای دستگاه تلفن همراه؛ کوئری رسانه، برای تبلت و دسک تاپ‌ها.
  • پیشرفت تصاعدی: اضافه کردن عناصر با افزایش اندازه صفحه نمایش

کار سیستم شبکه بوت استرپ

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

  • در سیستم شبکه بوت استرپ، ردیف‌ها باید در یک کلاس .container قرار بگیرند تا هماهنگی و بالشتک‌ها یا padding مناسب داشته باشند.
  • از سطرها برای ایجاد گروه‌های افقی متشکل از ستون‌ها در سیستم شبکه بوت استرپ، استفاده کنید.
  • در سیستم شبکه بوت استرپ، محتوا باید در داخل ستون قرار گیرد و ستون‌ها فرزندان ردیف‌ها هستند.
  • کلاس‌های سیستم شبکه بوت استرپ، از پیش تعریف شده مانند .row و .col-xs-4 برای سرعت بخشیدن به طرح بندی شبکه‌ها در دسترس هستند. ترکیب‌های کمتر نیز می‌توانند برای طرح بندی معنایی بیشتر، استفاده شوند.
  • ستون‌ها با استفاده از padding، شیار‌ها (شکاف بین محتوای درون ستون) را ایجاد می‌کنند. این padding، ستون اول و آخر را در ردیف‌ها مرتب می‌کند. این کار با استفاده از حاشیه منفی در .rows انجام می‌شود.

در سیستم شبکه بوت استرپ، ستون‌های گرید با مشخص کردن تعداد دوازده ستونی که می‌خواهید گسترده شوند ایجاد می‌شود. به عنوان مثال، برای داشتن سه ستون هم اندازه باید از سه .col-xs-4 استفاده کرد.

نمایش ساده و گویایی از سیستم شبکه بوت استرپ
نمایش ساده و گویایی از سیستم شبکه بوت استرپ

سیستم شبکه بوت استرپ و کوئری‌های رسانه Media Queries

کوئری مدیا یا رسانه یک اصطلاح واقعا فانتزی برای “rule of conditional CSS” یا دستور شرطی CSS است. این کوئری به سادگی، برخی از CSS‌ها را بر اساس شرایط خاصی اعمال می‌کند. در حقیقت، اگر این شرایط برآورده شود، استایل اعمال می‌شود.

کوئری‌های رسانه در بوت استرپ به شما این امکان را می‌دهند که براساس اندازه نمایشگر، محتوا را حرکت داده، نمایش دهید و یا پنهان کنید. کوئری‌های رسانه  ی زیر، در فایل‌های LESS برای ایجاد breakpoint‌های کلیدی یا نقطه‌های پایانی کلیدی در سیستم شبکه بوت استرپ استفاده می‌شوند.

گاهی اوقات این کوئری‌ها گسترده می‌شوند تا حداکثر عرض max-width را برای محدود کردن CSS به باریک ترین مجموعه از دستگاه‌ها ایجاد کنند.

کوئری رسانه دارای دو بخش، مشخصات دستگاه و سپس یک دستور اندازه است. در مورد فوق، دستور زیر تنظیم شده است. اجازه دهید این خط را در نظر بگیریم:

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

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

Extra small devices Phones (<768px Small devices Tablets (≥۷۶۸px Medium devices Desktops (≥۹۹۲px) Large devices Desktops (≥۱۲۰۰px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) ۷۵۰px ۹۷۰px ۱۱۷۰px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns ۱۲ ۱۲ ۱۲ ۱۲
Max column width Auto ۶۰px ۷۸px ۹۵px
Gutter width ۳۰px

(۱۵px on each side of a column)

۳۰px

(۱۵px on each side of a column)

۳۰px

(۱۵px on each side of a column)

۳۰px

(۱۵px on each side of a column)

Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

ساختار شبکه اصلی در سیستم شبکه بوت استرپ

کد زیر، ساختار پایه سیستم شبکه بوت استرپ است:

سیستم شبکه بوت استرپ و بازنشانی ستون واکنش گرا  Responsive column resets

با چهار سطح شبکه، در سیستم شبکه بوت استرپ، ممکن است به شرایط خاصی بر بخورید که ستون‌ها کاملا درست نمی‌شوند، مثلا یکی بلندتر از دیگری است. برای رفع این مشکل در سیستم شبکه بوت استرپ، از ترکیب یک کلاس classclearfix و کلاس‌های ابزار‌های واکنش گرا responsive utility classes استفاده کنید، همانطور که در مثال زیر نشان داده شده است:

این کد، نتیجه زیر را تولید می‌کند:

شبکه بوت استرپ

برای این که نتیجه دلخواه خود را از این مثال بگیرید، اندازه پورت نمایش را تغییر دهید و یا این کد از سیستم شبکه بوت استرپ را روی گوشی تلفن چک کنید.

ستون‌های افست  Offsetsدر سیستم شبکه بوت استرپ

Offset ها، یک ویژگی مفید برای طرح بندی‌های تخصصی در سیستم شبکه بوت استرپ هستند. برای مثال می‌توان از آن‌ها برای فشرده کردن ستون‌ها به منظور داشتن فاصله ی بیشتر استفاده کرد. کلاس‌های.col-xs = *  از افست‌ها پشتیبانی نمی‌کنند، اما با استفاده از یک سلول خالی می‌توان آن‌ها را به راحتی برگرداند.

برای استفاده از افست‌ها در صفحه نمایش‌های بزرگ، از کلاس‌های .offset-md-* class  استفاده کنید. این کلاس‌ها، حاشیه چپ ستون را به اندازه ۱ تا ۱۱ افزایش می‌دهند.

در مثال زیر، <div class = “col-md-6”> .. </ div> را داریم و با استفاده از کلاس center-md-offset-3 آن را در مرکز قرار خواهیم داد.

این کد، نتیجه زیر را تولید می‌کند:

شبکه بوت استرپ

ستون‌های تو در تو در سیستم شبکه بوت استرپ

برای قرار دادن محتوا در حالت پیش فرضِ سیستم شبکه بوت استرپ، یک ستون جدید .row و مجموعه ای از ستون‌های .col-md-*  را در یک ستون موجود .col-md-*  اضافه کنید. ردیف‌های تو در تو باید شامل مجموعه ای از ستون‌های اضافه شده تا تعداد ۱۲ عدد باشد.

در مثال زیر، طرح دارای دو ستون است، و ستون دوم، با دو ردیف، به چهار باکس تقسیم می‌شود.

این کد، نتیجه زیر را تولید می‌کند:

شبکه بوت استرپ

مرتب سازی ستون‌ها در سیستم شبکه بوت استرپ

یکی دیگر از ویژگی‌های خوبِ سیستم شبکه بوت استرپ  این است که شما به راحتی می‌توانید ستون‌ها را در یک نظمی بنویسید و سپس آن‌ها را بر اساس نظم دیگری نشان دهید. شما می‌توانید به راحتی ستون‌های شبکه را با کلاس‌های .col-md-push-* و .col-md-pull-* تغییر دهید که در آن، * ۱ تا ۱۱ می‌باشد.

در مثال زیر، دو ستون طرح بندی در سیستم شبکه بوت استرپ داریم که ستون سمت چپ تا حد امکان باریک شده و به عنوان یک نوار کناری عمل می‌کند. ما ترتیب این ستون‌ها را با استفاده از کلاس‌های .class-md-push-*  و .col-md-pull-*  عوض خواهیم کرد.

این کد در نهایت، نتیجه زیر را تولید می‌کند:

شبکه بوت استرپ

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا