آموزش ساخت قالب با استفاده از گرید سیستم Bootstrap 3

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

در نسخه ی 3 از بوت استرپ به طور پیش فرض حالت شناور با طراحی ریسپانسیو برای قالب در نظر گرفته شده است که با توجه به افزایش اندازه ی صفحه ی مرورگر یا دستگاه تا 12 ستون افزایش می یابد.

Example-of-Twitter-Bootstrap-3-Grid-System-e1412128600579-759x450

توویتر بوت استرپ 3 شامل کلاسهای گرید از پیش تعریف شده ای برای ساختن سریع قالب برای انواع گجت ها مانند تلفن همراه ,تبلت ها, لپ تاپ و … می باشد. به عنوان مثال شما می توانید از کلاس .col-xs- برای ایجاد ستون ها برای ابزارهای بسیار کوچک مانند تلفن های همراه, به طور مشابه .col-sm- برای ابزاری با اندازه صفحه نمایش کوچک مانند تبلت ها, .col-md- برای صفحه نمایش با اندازه متوسط مانند کامپیوترهای رومیزی و .col-lg- برای صفحه نمایش های بزرگتر.

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

خصوصیات
بوت استرپ ۳
ابزار بسیار کوچک
(PHONES (<768PX
ابزار کوچک
(TABLETS (≥۷۶۸PX
ابزار متوسط
(DESKTOPS (≥۹۹۲PX
ابزار بزرگ
(DESKTOPS (≥۱۲۰۰PX
حداکثر اندازه container(None (auto750px970px1170px
کلاس پیشوند.col-xs-.col-sm-.col-md-.col-lg-
حداکثر اندازه ستونAuto~62px~81px~97px
فاصله ی میان ستون ها۱۵px برای هر طرف یک ستون (i.e. 30px)

نکته ی مهمی از جدول بالا که باید به آن اشاره کرد وقتی مثلا کلاس .col-sm- را به عنصری نسبت میدهیم استایل دهی آن بر عنصر, نه تنها در ابزار کوچک مانند تبلت ها تاثیر میگذارد بلکه در ابزار با صفحه نمایش بزرگتر از 768px, در صورتی که کلاس های .col-md- و .col-lg- تعریف نشده باشند نیز اعمال خواهد شد.

همین طور استایل دهی کلاس .col-md- برای ابزار متوسط, و در صورتی که .col-lg- تعریف نشده باشد بر ابزار بزرگ نیز اعمال خواهد شد.

چگونه با استفاده از توییتر بوت استرپ گرید سیستم, قالب بسازیم؟

با گرید سیستم جدید بوت استرپ 3 شما به راحتی میتوانید نحوه ی نمایش قالب سایتتان را در ابزار های با اندازه ی صفحه نمایش متفاوت مانند گوشی, تبلت و دسکتاپ را کنترل کنید.

بیایید با یک مثال این را نشان دهیم.

grid-system-illustration-300x83

در تصویر بالا جمعا 12 جعبه در همه ی گجت ها وجود دارد اما نحوه ی قرار گیری گیری آنها با توجه به اندازه ی صفحه تغییر کرده است. مانند گوشی همراه که در آن قالب گرید 1 ستونه ارائه شده است که در یک ستون 12 ردیف در بالای هم قرار گرفته اند, در حالی که در تبلت قالب گرید 2 ستونه ارائه شده است که 2 ستون و 6 ردیف دارد.به طور مشابه در لپتاپ با صفحه نمایش متوسط قالب گرید 3 ستونه با 4 ردیف و نهایتا صفحه نمایش بزرگ دسکتاپ قالب گرید 4 ستونه با سه ردیف ارائه شده است.

حالا سوال این هست که چگونه باید چنین قالب ریسپانسیو را با استفاده از توویتر بوت استرپ ایجاد کنیم؟

خب با صفحه ی نمایش انداره متوسط (لپ تاپ) یا به عبارتی قالب گرید 3×4 شروع می کنیم :

اگر نمایش این کد مثال را در لپ تاپ یا دسکتاپ با اندازه ی صفحه نمایش بزرگتر مساویه 992px یا کوچکتر از 1200px مشاهده کنید خواهید دید که چهار ردیف هر کدام با سه ستون مساوی به عنوان قالب گرید 3×4 ارائه شده است.

اما صبر کنید, در مثال بالا یک مسئله مهم برای هم ترازی ردیف ها وجود دارد و آن این که اگر طول یکی از ستون ها بیشتر از دیگری باشد قالب به هم می ریزد. برای حل این مسئله از ترکیبه .clearfix و کلاسهای سودمند ریسپانسیو استفاده خواهیم کرد.

از انجا که گرید سیستمه پیشفرض 12 ستون دارد, و در قالب ما جمع هر سه ستون (col-md-4) عدد 12 می شود به همین خاطر پس از هر سه ستون از clearfix استفاده کردیم, به عبارت دیگر اگر اندازه ی ستون ها متفاوت باشد باید clearfix را پس از ستونی که جمع گرید 12 ستونه را کامل می کند قرار داد. برای درک بهتر :

کلاس سودمند ریسپانسیو .visible-md-block باعث خواهد شد کلاسه .clearfix تنها در ابزار متوسط تاثیر گذار باشد و در ابزار با اندازه ی صفحه نمایش دیگر hidden خواهد شد.

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

حالا نوبت آن است که قالب سایتمان را برای گجت های دیگر به حالت واکنش گرا در آوریم, ابتدا تبلت.

چون قالب ما برای تبلت به صورت دو ستون و شش ردیف (گرید 2×6) ارائه خواهد شد, کلاسه .col-sm-6 را برای هر یک از ستون هایمان اعمال می کنیم که جمع دو ستونمان(col-sm-6) برابر 12 شود و به همین دلیل clearfix را پس از هر دو ستون قرار می دهیم.

به همین شکل می توانیم آن را برای گجت های دیگر نیز واکنش گرا کنیم مانند دسکتاپ با گرید 4×3

نکته : با توجه به چینش قالبه این مثال نیازی برای تعریف گرید ابزار بسیار کوچک وجود ندارد و به طور پیش فرض قالب گرید 1 ستونه در 12 ردیف نمایش داده خواهد شد.

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

شما می توانید از کلاسهای سودمند ریسپانسیو زیر برای تعیین نمایش عناصر, با توجه با اندازه ی صفحه نمایش در محدوده های خاص هم استفاده کنید.

از ورژن 3٫2٫0 کلاس visible بافرمت .visible-*-* قابل استفاده است که به جای مقدار دوم می توانید از مقادیر خصوصیت display سی اس اس استفاده کنید: inlineblock و inline-block.

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

کلاسهای زیر نیز برای پنهان کردن عناصر قابل استفاده است :

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

شبیه سایر کلاسهای باقاعده ریسپانسیو, می توانید از کلاسهای جدول زیر نیز برای نمایش یا عدم نمایش عناصر مشخص به منظور چاپ استفاده کنید.

کلاستوضیح
.visible-print-blockعناصر با مقدار block را در ارائه نمایش برای مرورگر پنهان می کند ولی هنگام پرینت از صفحه نمایان خواهد شد.
.visible-print-inlineعناصر با مقدار inline را در ارائه نمایش برای مرورگر پنهان می کند ولی هنگام پرینت از صفحه نمایان خواهد شد.
.visible-print-inline-blockعناصر با مقدار inline-block را در ارائه نمایش برای مرورگر پنهان می کند ولی هنگام پرینت از صفحه نمایان خواهد شد.
.hidden-printعناصر برای نمایش در مرورگر نمایان و هنگام پرینت از صفحه پنهان خواهد شد.

در پایان باید اشاره ای هم به نحوه ی اضافه کردن کتابخانه ی بوت استرپ برای استفاده در طراحی قالبمان بکنیم که در کد زیر این موضوع به همراه کد مثال مان به طور کامل نشان داده شده است.

امیدواریم این آموزش مورد استفاده ی شما دوستان عزیز قرار گرفته باشد.
9
اشتراک گذاری
سامان
سامان

فارغ التحصیل کارشناسی نرم افزار، علاقه مند به برنامه نویسی، طراحی وب، تکنولوژی های نوین، یادگیری و فیلم

پاسخ دهید