ایجاد ساختارهای چند ستونه با سیستم شبکه ای Bootstrap

تاریخ انتشار: 5 دی 1394

تعداد بازدید: 104 نفر

با استفاده از سیستم شبکه ای Bootstrap3، به راحتی میتوانید ساختار سایتتان را کنترل کنید که چگونه در دستگاه های مختلف با اندازه صفحه نمایش متفاوت مانند تلفن های همراه، تبلت ها، PCها و غیره نمایش داده شود.

با توجه به عکس بالا، جمعاً 12 جعبه محتوا (content box) در تمام دستگاه ها وجود دارد. اما نحوه قرارگیری آن ها با توجه به اندازه صفحه نمایش دستگاه متفاوت است به طوری که در تلفن های همراه ساختار آن به صورت ساختار شبکه ای یک ستونه است که دارای 1 ستون و 12 سطر است که یکی بالای دیگری قرار گرفته اند. در حالی که در تبلت به صورت ساختار دو ستونه نمایش داده میشود که دارای 2 ستون و 6 سطر میباشد. همچنین در صفحه نمایش های متوسط مانند لپ تاپ ها ساختار سه ستونه نمایش داده میشود که شامل 3 ستون و 4 سطر است و در نهایت در صفحه نمایش های بزرگ ساختار چهار ستونه که دارای 4 ستون و 3 سطر میباشد، نمایش داده میشود.
حال سؤال این است که چگونه میتوان ساختارهای این چنین را با استفاده از سیستم شبکه ای جدید Bootstrap3 ایجاد کرد. کار را با ایجاد ساختار برای دستگاه های متوسط مانند لپ تاپ شروع میکنیم. از آنجایی که ساختار دستگاه متوسط دارای 3 ستون و 4 سطر میباشد(ساختار 3x4) بنابراین کد HTML برای ایجاد چنین ساختاری به شکل زیر خواهد بود :

اگر خروجی مثال بالا را در یک لپ تاپ یا دستگاه دیگری که دارای صفحه نمایش با پهنای بیشتر یا برابر با 992px و کمتر از 1200px است، مشاهده کنید خواهید دید که 4 سطر دارد که هر سطر 3 ستون برابر دارد.
اما یک نکته وجود دارد مثال بالا یک مسئله مهم تنظیمی (alignment) دارد. اگر ارتفاع هر ستون از ستون دیگر بیشتر باشد به درستی نمایش داده نمی شود و ساختار را به هم میریزد. برای حل این مشکل، از ترکیب یک کلاس clearfix. و کلاس های کاربردی responsive استفاده کنید. (در انتهای همین مطلب به لیست این کلاس ها اشاره میشود)

با توجه به اینکه ساختار سیستم شبکه ای 12 ستونه است و در ساختار ما مجموع هر سه ستون *-col-md. برابر با 12 میباشد به همین دلیل در این مثال بعد از هر سه ستون clear را قرار دادیم. در سناریوهای دیگر که تعداد ستون ها متفاوت است باید clearfix. را بعد از ستونی که عدد 12 را کامل میکند قرار دهید.
نکته : کلاس کاربردی visible-md-block. باعث میشود که کلاس clearfix. تنها بر روی دستگاه های سایز متوسط تأثیر بگذارد و در دستگاه های دیگر مخفی (hidden) است.
حال زمان آن است که این ساختار را برای دستگاه های دیگر ایجاد کنیم. ابتدا برای تبلت ایجاد میکنیم. از آنجایی که در تبلت ساختار به صورت 2x6 نمایش داده میشود بنابراین کلاس col-sm-6. را به هر ستون اضافه کنید.

حال از آنجایی که مجموع هر دو ستون *-col-sm. برابر با 12 است بنابراین بعد از هر دوبار تکرار ستون ها باید floatها را clear کنید. بعد از clear کردن floatها برای دستگاه های کوچک کد نهایی به شکل زیر خواهد بود :

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

نکته : با توجه به مثال بالا نیازی به ایجاد ساختار برای دستگاه های بسیار کوچک نیست زیرا ستون ها در این دستگاه ها همواره افقی بوده و به صورت ساختار یک ستونه نمایش داده میشوند.

Offset کردن ستون ها :

همچنین میتوانید با استفاده از کلاس های offset. مانند *-col-md-offset.و *-col-sm-offset. ، ستون ها را جهت تنظیم (alignment) به سمت راست حرکت دهید.
این کلاس ها ستون ها را با افزایش حاشیه چپ آن ها (left margin) به اندازه مشخص انتقال میدهند. برای مثال، کلاس 4-col-sm-offset. در ستون 8-col-sm. ، این ستون را به اندازه 4 ستون از مکان اصلی خودش به سمت راست منتقل میکند.

تو در تو کردن ستون ها :

ستون های grid در Bootstrap3 قابلیت تو در تو شدن (nested) دارند. به این معنی که میتوان سطرها و ستون ها را داخل یکدیگر قرار داد. با این حال، نحوه قرارگیری ستون ها مشابه قبل خواهد بود یعنی مجموع ستون های هر سطر باید برابر با 12 یا کمتر باشد.

کلاس های کاربردی responsive در Bootstrap :

با استفاده از کلاس های responsive میتوان قابلیت مشاهده (visiblity) مؤلفه ها را در دستگاه هایی که صفحه نمایش آن ها با محدوده مشخص شده مطابقت دارد، فعال کرد.
طبق v3.2.0 ، کلاس های * -* -visible. برای هر نقطه انفصال ( breakpoint ) سه نوع هستند.

کلاس	توضیحات
*-visible-xs.	مؤلفه را فقط در دستگاه های بسیار کوچک با پهنای صفحه نمایش کمتر از 768px قابل مشاهده (visible) میکند. در بقیه دستگاه ها مخفی است.
*-visible-sm.	مؤلفه را فقط در دستگاه های کوچک با پهنای صفحه نمایش بزرگتر یا برابر با 768px و کمتر از 992px قابل مشاهده (visible) میکند. در بقیه دستگاه ها مخفی است.
*-visible-md.	مؤلفه را فقط در دستگاه های متوسط با پهنای صفحه نمایش بزرگتر یا برابر با 992px و کمتر از 1200px قابل مشاهده (visible) میکند. در بقیه دستگاه ها مخفی است.
*-visible-lg.	مؤلفه را فقط در دستگاه های بزرگ با پهنای صفحه نمایش بزرگتر یا برابر با 1200px قابل مشاهده (visible) میکند. در بقیه دستگاه ها مخفی است.

نکته : میتوان با ترکیب این کلاس ها با هم مؤلفه ها را بر روی چندین دستگاه قابل مشاهده کرد. برای مثال، میتوان با به کار بردن کلاس های *-visible-xs. و *-visible-md. بر روی هر مؤلفه آن را بر روی دستگاه های بسیار کوچک و متوسط قابل رؤیت کرد.

به طور مشابه میتوانید با استفاده از کلاس های کاربردی مخفی (hidden)، مؤلفه ها را روی دستگاه های خاصی مخفی (hide) کنید.

کلاس	توضیحات
hidden-xs.	مؤلفه را فقط در دستگاه های بسیار کوچک با پهنای صفحه نمایش کمتر از 768px مخفی (hidden) میکند. در بقیه دستگاه ها قابل مشاهده است.
hidden-sm.	مؤلفه را فقط در دستگاه های کوچک با پهنای صفحه نمایش بزرگتر یا برابر با 768px و کمتر از 992px مخفی (hidden) میکند. در بقیه دستگاه ها قابل مشاهده است.
hidden-md.	مؤلفه را فقط در دستگاه های کوچک با پهنای صفحه نمایش بزرگتر یا برابر با 768px و کمتر از 992px مخفی (hidden) میکند. در بقیه دستگاه ها قابل مشاهده است.
hidden-lg.	مؤلفه را فقط در دستگاه های بزرگ با پهنای صفحه نمایش بزرگتر یا برابر با 1200px مخفی (hidden) میکند. در بقیه دستگاه ها قابل مشاهده است.

نکته : میتوان با ترکیب این کلاس ها با هم مؤلفه ها را بر روی چندین دستگاه مخفی کرد. برای مثال، میتوان با به کار بردن کلاس های hidden-xs. و hidden-md. بر روی هر مؤلفه آن را در دستگاه های بسیار کوچک و متوسط مخفی کرد.

مطلب بعدی -> تایپوگرافی در Bootstrap

اشتراک گذاری:

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

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

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