مردان وردپرس آموزش بوت استرپ آموزش Bootstrap بخش چهارم- تقسیم بندی در دستگاهای متوسط و بزرگ

آموزش Bootstrap بخش چهارم- تقسیم بندی در دستگاهای متوسط و بزرگ

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

دستگاه های medium

در بخش قبل، مثالی از تقسیم بندی در bootstrap را برای دستگاه های کوچک ارائه دادیم. از دو div (ستون) استفاده کردیم، که اندازه ۲۵% و ۷۵% را به آنها دادیم. که در زیر مشاهده می کنید:

اما در دستگاه های متوسط یا medium، تقسیم بندی صفحه بصورت ۵۰% ۵۰% مناسب تر به نظر می آید.

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

برای دستگاه های medium، از کلاس های col-md-* استفاده خواهیم کرد.

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

اکنون بوت‌استرپ می خواهد بگوید که برای سایزهای کوچک از کلاس -sm- و برای سایز متوسط از کلاس -md- استفاده کنید.

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

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

فقط برای دستگاه های medium:

در مثال زیر می خواهیم فقط از کلاس col-md-* و بدون استفاده از کلاس col-sm-* استفاده کنیم. به این مفهوم که دستگاه های متوسط و بزرگ بصورت ۵۰% ۵۰% خواهند بود. زیرا مقیاس کلاس ها بالا رفته است. اگرچه، برای دستگاه های کوچک، بصورت عمودی و پشت سرهم قرار خواهند گرفت.

دستگاه های بزرگ: (large)

در قسمت بالا، در مورد دستگاه های کوچک و متوسط صحبت کردیم. اما در دستگاه های بزرگ، تقسیم بندی بهتر است بصورت ۳۳% ۶۶% باشد.

نکته :  دستگاه های large، دستگاه هایی با صفحات نمایشی با عرض ۱۲۰۰px و به بالا تعریف می شوند.

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

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

پس همانطور که ملاحظه می کنید col-lg-4 و col-lg-8 برای صفحات با سایز بزرگ اضافه شد. به این مفهوم که در صفحات نمایش بزرگ، صفحه به دو بخش با تعداد ستون های ۴تایی و ۸تایی تقسیم شود.

در زیر مثال کامل آن را مشاهده می کنید. که نتیجه ای که در بر خواهد داشت یک تقسیم بندی ۲۵% ۷۵% در دستگاه های کوچک، به صورت  50% 50% در دستکاه های متوسط و بصورت  33% و ۶۶% در دستگاه های بزرگ می باشد.

فقط برای دستگاه های بزرگ: (large devices)

در مثال زیر، ما می خواهیم تنها کلاس col-lg-6 را بدون استفاده از کلاس های col-md-* و col-sm-* بکار ببریم. به این منظور که در صفحات نمایش بزرگ، تقسیم بندی صفحه بصورت ۵۰% ۵۰% باشد.

بنابراین همانطور که دریافته اید، در دستگاه های medim و small ستونها بصورت پشت سرهم و عمودی خواهند بود.

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

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

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

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

Time limit is exhausted. Please reload CAPTCHA.