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

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

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

با استفاده از سیستم شبکه ای 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. بر روی هر مؤلفه آن را در دستگاه های بسیار کوچک و متوسط مخفی کرد.