Grid system یا سیستم جدول بندی Bootstrap چیست و چه کاربردی دارد؟

با سلام خدمت شمادوستان گرامی امیدوارم که شاد باشید وسلامت .در مورد grid system امروز میخوام براتون توضیح بدم .امیدوارم که براتون جالب باشه.

Grid system روشی آسان و سریع برای ایجاد طرح کلی و layout سایت به صورت واکنش گرا یا responsive می باشد. برخلاف سیستم grid در ویرایش قبلی (۲٫x) Bootstrap که به صورت پیش فرض (ثابت) fixed بود، ویرایش جدید (Bootstrap 3) با ارائه ی سیستم grid یا خانه بندی واکنش گرا mobile-first (طراحی قالب سازگار با صفحه نمایش دستگاه های همراه همچون موبایل و تبلت) این امکان را فراهم آورده تا با افزایش اندازه ی viewport دستگاه (ناحیه ی قابل مشاهده برای کاربر) مقیاس سیستم grid (عرض صفحه) به ۱۲ ستون افزایش یابد. در واقع در این سیستم طرح بندی، عرض صفحه به ۱۲ ستون تقسیم می شود. ویرایش ۳ فریم ورک Bootstrap دارای ۴ کلاس خانه بندی (predefined grid class) از پیش تعریف شده است که به شما امکان می دهد در کم ترین زمان ویژه ی هر یک از دستگاه ها (بر حسب اندازه ی صفحه و نوع دستگاه نمایش دهنده ی محتوای سایت) grid layout های متناسب ایجاد نمایید. برای مثال می توانید با استفاده از کلاس .col-xs-* ستون هایی برای دستگاه های بسیار کوچک همچون موبایل ها طراحی و قالب بندی کنید یا از .col-sm-* برای قالب بندی ستون ویژه ی دستگاه هایی با صفحه نمایش کوچک نظیر تبلت و از کلاس .col-md-* دستگاه های با صفحه ی متوسط و در نهایت از .col-lg-* برای دستگاه های بسیار بزرگ همچون مانیتور استفاده نمایید. جدول زیر برخی از ویژگی های مهم سیستم grid (در ویرایش جدید Bootstrap) را شرح می دهد:
Bootstrap

جدول فوق یک نکته ی بسیار مهم را بیان می کند و آن این است که اعمال هر یک از کلاس های Bootstrap، همچون .col-sm-* نه تنها styling و سبک دهی را در دستگاه های کوچک تغییر می دهد، بلکه در صورت عدم وجود و امکان استفاده از کلاس.col-md-* و .col-lg-*، آن را در دستگاه هایی که اندازه ی صفحه ی نمایش آن ها بزرگتر یا برابر ۷۶۸px (یعنی . ≥۷۶۸px) نیز تغییر می دهد. به همین صورت نیز اعمال کلاس col-md-*، سبک دهی یا styling المان ها نه تنها در دستگاه های با صفحه نمایش متوسط تغییر می دهد بلکه آن را در دستگاه های با اندازه ی صفحه ی نمایش بزرگ (در صورت عدم امکان استفاده از کلاس .col-lg-*) تغییر می دهد. در واقع چنانچه یک سیستم grid را با کلاس های کوچک تر تعریف کنید، آنگاه در یک صفحه ی بزرگ مانند صفحه ی نمایش لپ تاپ، خانه های سیستم به صورت هوشمند متناسب با اندازه ی صفحه بزرگ می شوند. به عبارتی بهتر کلاس های sm و xs می توانند به عنوان md و lg عمل کنند. حال این سوال مطرح می شود که چگونه می توان با استفاده از این سیستم خانه بندی واکنش گرا/grid system responsive 12 ستونه، سطرها و ستون هایی را برای وب سایت مورد نظر طراحی و قالب بندی کرد؟ در پاسخ باید گفت که این کار بسیار آسان است. ابتدا با استفاده از کلاس.container ، یک container تعریف می کنید که به عنوان یک ظرف یا wrapper برای سطرها و ستون های صفحه ی مورد نظر شما ایفای نقش می کند. حال با استفاده از کلاس .row سطرهایی را داخل container ایجاد کنید. سپس جهت ایجاد ستون داخل هر یک از سطرها، می توانید کلاس های .col-xs-*، .col-sm-*، .col-md-* و .col-lg-* را بکار ببرید. ستون ها در حقیقت نواحی هستند که محتوا در آن ها جای می گیرد. اکنون تمامی مفاهیم تشریح شده را به طور عملی بکار می بریم.
ایجاد قالب با نمای دو ستونه (Column Layouts 2)

مثال :

مثال زیر نحوه ی ایجاد نمای دو ستونه برای دستگاه هایی که صفحه نمایش آن ها کوچک، متوسط و بزرگ است را نمایش می دهد. لازم به ذکر است که در صفحه نمایش موبایل، ستون ها به صورت پیش فرض با نمای افقی نمایش داده می شوند.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲

از آنجایی که grid system فریم ورک Bootstrap مبتنی بر ۱۲ ستون می باشد (عرض صفحه به ۱۲ ستون تقسی می شود)، جهت نگه داشتن ستون ها در یک خط (کنار هم)، تعداد کل ستون های موجود در هر سطر باید برابر ۱۲ باشد. اگر با دقت به مثال بالا توجه کنید، می بینید که تعداد ستون ها (col-sm-*) در هر سطر به ترتیب مساوی ۱۲ (۹+۳ و ۸+۴، ۶+۶) می باشد.
ایجاد قالب با نمای سه ستونه (۳ columns layout)

به همین ترتیب می توانید بر اساس اصل ذکر شده، نما و layout های متنوع و متفاوت طراحی نمایید. مثال زیر یک نمای سه ستونه برای صفحه نمایش لپ تاپ و دسکتاپ تعریف می کند. این layout یا طرح بندی در تبلت هایی که محتوا را با نمای افقی (landscape mode) نمایش داده و وضوح تصویر آن ها بیشتر یا برابر ۹۹۲ پیکسل می باشد (مانند Apple iPad) نیز قابل استفاده می باشد. اما در نمای عمودی (portrait mode) مثل حالت پیش فرض افقی می باشد.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴

<div class=”container”>
<!–Row with three equal columns—
سطری با سه ستون که دارای عرض یکسان هستند–>
<div class=”row”>
<div class=”col-md-4″><!–Column left–></div>
<div class=”col-md-4″><!–Column middle–></div>
<div class=”col-md-4″><!–Column right–></div>
</div>
<!–Row with three columns divided in 1:4:1 ratio—
سطری با سه ستون که عرض آن ها نسبت نام برده را رعایت می کند–>
<div class=”row”>
<div class=”col-md-2″><!–Column left–></div>
<div class=”col-md-8″><!–Column middle–></div>
<div class=”col-md-2″><!–Column right–></div>
</div>
<!–Row with three columns divided unevenly—
سطری با سه ستون که هر یک دارای عرضی متفاوت است–>
<div class=”row”>
<div class=”col-md-3″><!–Column left–></div>
<div class=”col-md-7″><!–Column middle–></div>
<div class=”col-md-2″><!–Column right–></div>
</div>
</div>
نکته:

کلاس .visible-md-block تنها در دستگاه هایی که عرض صفحه ی نمایش آن ها متوسط است کلاس .clearfix را اعمال می کند.
نکته:

اگر بیش از ۱۲ ستون در یک سطر وجود داشته باشد، در آن صورت ستون های اضافی، در قالب یک گروه کامل، داخل خط جدید جای می گیرند.
قالب بندی و تعریف layout با امکان قرار دادن ستون اضافی در سطر جدید (Bootstrap Layouts with Column Wrapping Feature)

اکنون قصد داریم قالب یا layout انعطاف پذیرتری تعریف کنیم که با توجه به اندازه ی viewport موقعیت ستون ها و نحوه ی قرار گیری آن در صفحه را تغییر می دهد (با کوچک تر شدن اندازه ی صفحه، ستون اضافی را در سطر بعدی جای می دهد). مثال زیر یک قالب سه ستونه در دستگاه هایی که عرض صفحه نمایش آن ها متوسط است مانند لپ تاپ، دسکتاپ و تبلت در حالت نمای افقی (landscape mode)، ایجاد می کند. اما در دستگاه های کوچک همچون موبایل در حالت نمای عمودی (portrait mode)، قالب صفحه دو ستونه شده، ستون سوم در پایین دو ستون اول قرار می گیرد.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸

همان طور که در مثال بالا مشاهده می کنید، تعداد کل ستون های کوچک (با کلاسcol-sm-*) برابر ۲۴ می باشد که دو برابر حداکثر ظرفیت سطر است. بنابراین سومین المان
، با کلاس .col-sm-12 ، که ستون های اضافی بر ظرفیت سطر را در آن قرار می دهد، در دستگاه های کوچک که عرض viewport آن ها کمتر از ۹۹۲ پیکسل است، داخل سطر جدید به صورت یک واحد به هم پیوسته و کنار هم جایگذاری می شود (۱۲ ستون اضافی، داخل دستگاه های بسیار کوچک همچون موبایل، در سطر بعدی و به صورت یک واحد به هم پیوسته نمایش داده می شوند).

تعریف قالب های (layout) چند ستونه با سیستم خانه بندی/grid system Bootstrap 3

با قابلیت نوین mobile first grid system فریم ورک Bootstrap 3 (قابلیت تعریف قالب های سازگار با موبایل به وسیله ی سیستم خانه بندی جدید)، شما می توانید به راحتی نحوه ی نمایش قالب وب سایت خود بر روی دستگاه های مختلف که از نظر اندازه صفحه ی نمایش با هم متفاوت هستند را مدیریت نمایید. تصویر زیر را ببینید:
Bootstrap

همان طور که مشاهده می کنید داخل هر یک از دستگاه های فوق ۱۲ کادر محتوا (content box) وجود دارد، اما مکان و نحوه ی قرارگیری آن ها در صفحه نمایش متناسب با اندازه ی صفحه متفاوت است. برای مثال در دستگاه های موبایل، ستون ها در ۱۲ سطر مجزا قرار می گیرند (هر ستون در سطری مجزا). در تبلت دو ستون در یک سطر قرار می گیرد به طوری که ۱۲ ستون در ۶ سطر مجزا نمایش داده می شود. در دستگاه هایی که عرض صفحه نمایش متوسط است، مانند دسکتاپ، ستون ها در چهار سطر نمایش داده می شود به طوری که در هر سطر سه ستون قرار می گیرد. و اما در دستگاه های بزرگ، هر سطر ۴ ستون را دربر می گیرد (سه سطر، در هر سطر ۴ ستون). حال این سوال پیش می آید که چطور می توان با استفاده از سیستم گرید mobile-first این فریم ورک، قالب یا صفحات واکنش گرا/responsive طراحی کرد. ابتدا طراحی را برای دستگاه های متوسط شروع می کنیم. از آنجایی که در دستگاه های متوسط هر سه ستون در سطری مجزا نمایش داده می شود،۳x4 grid layout، کد HTML لازم برای ایجاد این ساختار به ترتیب زیر می باشد:

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸

اگر خروجی مثال بالا را در لپ تاپ یا دسکتاپ که عرض viewport آن ها بزرگتر یا برابر ۹۹۲ پیکسل و کم تر از ۱۲۰۰ پیکسل باشد، مشاهده نمایید، متوجه می شوید که قالب صفحه در ۴ سطر با سه ستون مساوی نمایش داده می شود (۳x4 grid layout). اما یک مشکل در خصوص ترازبندی (alignment) وجود دارد. در مثال بالا اگر طول (height) هر یک از ستون ها بیشتر از دیگری باشد، در آن صورت المان ها به درستی clear نمی شوند (اطرف آن به درستی خالی نمی شود) و قالب صفحه شکسته می شود (ممکن است خصوصیات تگ قبلی بر روی بعدی تاثیر بگذارد و مشکلاتی را برای طرح کلی صفحه ایجاد کند). برای حل این مشکل می بایست ترکیبی از کلاس .clearfix و کلاس های کاربردی که قالب صفحه را واکنش گرا می کنند (responsive utility classes) در کد خود استفاده نمایید.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰

سیستم grid در حالت پیش فرض عرض صفحه را به ۱۲ ستون تقسیم می کند. ما در قالب خود داخل هر سطر سه ستون را نمایش می دهیم (تعدادcol-md-* برابر ۱۲ می باشد)، به همین خاطر پس از هر سه ستون کلاس class=”clearfix” را اعمال کردیم. در سناریویی که تعداد ستون ها متفاوت است، کلاس .clearfix را تنها پس از آن ستونی که تعداد کل ستون ها را به ۱۲ می رساند، اعمال می کنیم.
نکته:

کلاس .visible-md-block تنها در دستگاه هایی که عرض صفحه ی نمایش آن ها متوسط است کلاس .clearfix را اعمال می کند.

حال زمان آن فرا رسیده که layout یا قالب خود را برای دیگر دستگاه ها تنظیم کنیم. ابتدا آن را برای دستگاه تبلت سفارشی تنظیم می کنیم. از آنجایی که در صفحه نمایش تبلت، قالب مورد نظر به صورت ۲x6 (2 ستون در ۶ سطر) نمایش داده می شود، کلاس .col-sm-6 را به تعریف هر ستون اضافه می کنیم.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱

حال از آنجایی که مجموع هر دو col-sm-* برابر ۱۲ می باشد، پس از هر دو col-sm-*، float ها را با اعمال کلاس class=”clearfix visible-md-block”، clear نمایید (اطراف المان را خالی کنید). پس از clear نمودن float (خالی نمودن اطراف) المان ها برای دستگاه های کوچک، کد نهایی به صورت زیر خواهد بود.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵

نکته:

برای راحتی کار خود بهتر است دستگاه مورد نظر (که می خواهید قالب را برای آن طراحی کنید) را انتخاب کرده، قالب خود را ابتدا برای آن طراحی نمایید و سپس جهت سازگاری قالب با دیگر دستگاه ها (responsive کردن آن)، کلاس های لازم را اضافه نمایید.

به همین نحو، می توانید قالب را برای دستگاه های دیگر مانند دستگاه های بزرگ تنظیم نمایید. کد نهایی پس از اعمال تمامی تغییرات به صورت زیر خواهد بود:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶

<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 11</p></div>
<div class=”col-sm-6 col-md-4 col-lg-3″><p>Box 12</p></div>
</div>
</div>
نکته:

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

می توانید ستون های گرید را جهت ترازبندی، با استفاده از کلاس .col-md-offset-* یا .col-sm-offset-* به سمت راست حرکت دهید. کلاس های نام برده ستون های گرید را با افزایش مقدار margin left، بر حسب تعداد ستونی که شما مشخص می کنید، نسبت به موقعیت اصلی به سمت راست حرکت می دهد. برای مثال، کلاس .col-sm-offset-4 در تعریف ستون .col-sm-8، آن را به اندازه ی عرض ۴ ستون نسبت به مکان اصلی به سمت راست حرکت می دهد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹

</div>
<div class=”row”>
<div class=”col-sm-8 col-sm-offset-4″><!–Column with 4 columns offset–></div>
</div>
</div>
تودرتو کردن ستون های grid (قرار دادن محتوای یک سطر در سطر یا ستون دیگر)

در سیستم grid این اجازه به شما داده می شود تا محتوای سطرها و ستون ها را داخل ستون دیگری قرار دهید. فرمول تعریف قالب و جایگذاری ستون ها در سطر تغییر نخواهد کرد. به عبارت دیگر تعداد کل ستون ها در هر سطر نباید از ۱۲ تجاوز کند.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴

</div>
<div class=”row”>

</div>
</div>
</div>
</div>
bootstrapکلاس هایی که قالب را responsive و واکنش گرا می کنند (Bootstrap Responsive Utilities Classes)

می توانید با استفاده از کلاس های زیر قابلیت نمایش (visibility) المان ها را در دستگاه هایی که اندازه ی صفحه ی آن ها در بازه ی خاصی قرار دارد، فعال نمایید. از ورژن v3.2.0 به بعد، کلاس های .visible-*-* برای هر breakpoint با سه حالت ارائه می شود. در واقع در bootstrap به ازای هر یک از مقادیر خاصیت display در CSS (inline، block و inline-block)، یک کلاس وجود دارد و به صورت جداگانه قابل استفاده می باشد (breakpoint: این امکان را به چیدمان می دهد تا در نقاط معینی تغییر کند، برای مثال در دسکتاپ سه ستون نمایش داده شود و در موبایل تنها یک ستون):
شرح کاربرد
کلاس
المان را تنها در دستگاه های بسیار کوچک که عرض صفحه ی آن ها کمتر از ۷۶۸px است، به نمایش در می آورد. در دستگاه های دیگر آن را از کاربر پنهان می کند.
.visible-xs-*
المان را تنها در دستگاه هایی که عرض صفحه نمایش آن بزرگتر یا برابر ۷۶۸px (یعنی ≥۷۶۸px) اما کمتر از ۹۹۲px نمایش می دهد.
.visible-sm-*
المان را تنها در دستگاه هایی که عرض صفحه نمایش آن ها بزرگتر یا برابر ۹۹۲px اما کمتر از ۱۲۰۰px به نمایش در می آورد.
.visible-md-*
المان مورد نظر را تنها در دستگاه هایی که عرض صفحه نمایش آن ها بزرگتر یا برابر ۱۲۰۰px ( ≥۱۲۰۰px) به نمایش می گذارد.
.visible-lg-*
نکته:

می توانید ترکیبی از این کلاس ها را بکار ببرید تا المان مورد نظر در انواع دستگاه ها (با اندازه های مختلف) نمایش داده شود. برای مثال، می توانید کلاس .visible-xs-* و .visible-md-* را در تعریف المان دلخواه بکار ببرید تا در دستگاه های بسیار کوچک و بزرگ نمایش داده شود.

مثال :
?
۱
۲
۳
۴

<p class=”visible-xs-block”>This paragraph is visible only on extra small devices.</p>
<p class=”visible-sm-block”>This paragraph is visible only on small devices.</p>
<p class=”visible-md-block”>This paragraph is visible only on medium devices.</p>
<p class=”visible-lg-block”>This paragraph is visible only on large devices.</p>

به همین نحو می توانید با استفاده از کلاس های hidden فریم ورک Bootstrap، المان های مورد نظر را در دستگاه های مختلف (با توجه به اندازه صفحه نمایش) از کاربر پنهان نمایید.
شرح کاربرد
کلاس
المان را تنها در دستگاه های بسیار کوچک که عرض صفحه نمایش آن ها کمتر از ۷۶۸px است از کاربر پنهان می کند.
.hidden-xs
المان را تنها در دستگاه های کوچک که عرض آن ها بزرگتر یا مساوی ۷۶۸px (. ≥۷۶۸px) است از کاربر پنهان می کند.
.hidden-sm
المان را تنها در دستگاه هایی که عرض صفحه نمایش آن ها بزرگتر یا برابر ۹۹۲px اما کمتر از
.hidden-md
المان را تنها در دستگاه های بزرگ که عرض صفحه نمایش آن ها بزرگتر یا برابر ۱۲۰۰px (≥۱۲۰۰px) پنهان می کند.
.hidden-lg
نکته:

می توانید ترکیبی از این کلاس ها را در تعریف المان بکار برده تا المان مورد نظر در تمامی دستگاه ها (با اندازه های مختلف) از نظر پنهان شود. برای مثال می توانید کلاس .hidden-xs و .hidden-md را در تعریف المان مورد نظر بکار برده و آن را در دستگاه های بسیار کوچک و متوسط از کاربر پنهان نمایید.

مثال :
?
۱
۲
۳
۴

<p class=”hidden-xs”>This paragraph is hidden only on extra small devices.</p>
<p class=”hidden-sm”>This paragraph is hidden only on small devices.</p>
<p class=”hidden-md”>This paragraph is hidden only on medium devices.</p>
<p class=”hidden-lg”>This paragraph is hidden only on large devices.</p>

می توانید کلاس های زیر را برای نمایش دادن/پنهان کردن المان ها در حالت print صفحه، بکار ببرید:
شرح کاربرد
کلاس
المان هایی که block تعریف شده اند را به هنگام پرینت صفحه پنهان می کند.
.visible-print-block
المان هایی که inline تعریف شده اند را به هنگام چاپ صفحه پنهان می کند.
.visible-print-inline
المان هایی که به صورت inline-block تعریف شده اند را به هنگام پرینت صفحه پنهان می کند.
.visible-print-inline-block
المان ها را به هنگام پرینت صفحه پنهان می کند.
.hidden-print

Grid system یا سیستم جدول بندی Bootstrap چیست و چه کاربردی دارد؟

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

ارسال دیدگاه

دسته ها

جستجو

رجیران

نمايندگی

سرورها

طراحی سایت

هاست

ثبت دامنه