مردان وردپرس آموزش بوت استرپ آموزش Bootstrap بخش سوم – تقسیم بندی در بوت استرپ

آموزش Bootstrap بخش سوم – تقسیم بندی در بوت استرپ

تقسیم بندی در بوت استرپ

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

مثال زیر یک چیدمان ساده از دو ستون را بصورت stacked-to-horizontal نمایش می دهد. که نتیجه آن در تمام صفحه ها بصورت ۵۰% ۵۰% خواهد بود. ( به استثنای صفحات نمایش خیلی کوچک که بصورت خودکار به صورت ۱۰۰%  و پشت سرهم خواهد بود.)

               

کدهای این مثال را در زیر می بینیم:

به این نکات توجه داشته باشید که:

عدد موجود در کلاس col-sm-* نشان دهنده تعداد ستون هایی است که div باید شامل شود. بنابراین col-sm-1 اندازه یک ستون، col-sm-4 به اندازه چهار ستون و col-sm-6 به اندازه شش ستون می باشد. برای روشن شدن مطلب، اگر ما col-sm-6 را که برای تبلت ها می باشد را داشته باشیم، یعنی آن بخش از صفحه ما به دو قسمت تقسیم خواهد شد که هر قسمت به پهنای ۶ ستون خواهد بود.

نکته ای که وجود دارد این است که، مطمئن شوید که جمع ستونها همیشه تا ۱۲ باشد.

کلاس container-fluid:

شما می توانید هر طرح یا چیدمان را با عرض ثابت (fixed-width) به یک طرح یا چیدمان بصورت تمام عرض (full-width) تبدیل کنید. برای این کار، بجای استفاده از کلاس container از کلاس container-fluid استفاده کنید.

در زیر مثالی از کلاس container-fluid را مشاهده می نمایید:

 

تقسیم بندی در دستگاه های کوچک (Tabletها):

فرض کنید یک چیدمان ساده با دو ستون داریم. ما می خواهیم که این ستون ها برای دستگاه های کوچک بصورت ۲۵% ۷۵% به دو قسمت تقسیم شوند.

نکته: دستگاه های کوچک، دستگاه هایی با صفحات نمایشی با عرض ۷۶۸px تا ۹۹۱px تعریف می شوند.

برای دستگاه های کوچک، از کلاس col-sm-* استفاده می کنیم.

برای دو ستون مان، کلاس های زیر را اضافه می کنیم.

پس، بوت استرپ قصد گفتن این مطلب رو دارد که برای سایز کوچک  یا  tabletها،  از کلاس -sm- استفاده شود.

نتیجه ای که از مثال زیر برای ما حاصل می شود، صفحه ای بصورت ۲۵% ۷۵% در دستگاه های کوچک ( و دستگاه های متوسط و بزرگ ) خواهد بود. در دستگاه های بسیار کوچک، بصورت خودکار در حالت ۱۰۰% (پشت سرهم) قرار خواهند گرفت.

              

همانطور که قبلا نیز اشاره کردم، مطمئن شوید که جمع ستون ها برابر ۱۲ باشند.

نکته: برای یک تقسیم بندی بصورت ۳۳.۳% و ۶۶.۶%، شما باید از col-sm-4 و col-sm-8 استفاده کنید:

            

امیدوارم مورد استفاده قرار بگیرد. در بخش بعد، تقسیم بندی در دستگاه های متوسط و بزرگ را بیان خواهیم نمود.

تاریخ آخرین بروزرسانی : ۲۵ بهمن ۱۳۹۵
منبع :‌ مردان وردپرس
Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.