گرید

آموزش بوت استرپ ، سیستم گرید بندی ( Grid )

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

ادامه مطالب
آموزش Bootstrap بخش پنجم- مثالی از ستون های تودرتو در بوت استرپ

با سلام به کابران محترم سایت مردان وردپرس. در ادامه مباحث قبلی ازسری مقالات آموزش بوت استرپ، می خواهیم مثالی از چیدمان ستونها بصورت تودرتو یا Nested را داشته باشیم. در این مثال ما دو ستون داریم که کلاس بندی آن ها از تبلت ها شروع شده و تا صفحات نمایش بزرگ تر مقیاس گذاری می شوند و دو ستون مساوی درون ستون بزرگ تر وجود دارد. درون موبایل ها این دو ستون و ستون های داخلی، همگی بصورت پشت سر هم یا stack قرار خواهند گرفت. [crayon-5adaeb8bf3cb5481411860/]   همانطور که در مثال می بینید، پس از کلاس col-sm-8، با گذاشتن کلاس row باعث شکست به خط بعدی شده، و با احتساب آن ستون، ...

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

با سلام خدمت کاربران محترم سایت مردان وردپرس. در این مقاله سعی برآن داریم تا با نحوه تقسیم بندی صفحه با فریمورک بوت استرپ، در دستگاه های متوسط و بزرگ آشنا شویم. دستگاه های medium در بخش قبل، مثالی از تقسیم بندی در bootstrap را برای دستگاه های کوچک ارائه دادیم. از دو div (ستون) استفاده کردیم، که اندازه 25% و 75% را به آنها دادیم. که در زیر مشاهده می کنید: [crayon-5adaeb8bf41af084946809/] اما در دستگاه های متوسط یا medium، تقسیم بندی صفحه بصورت 50% 50% مناسب تر به نظر می آید. نکته: دستگاه های medium، دستگاه هایی با صفحات نمایشی با عرض 992px تا 1199px تعریف ...

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

با سلام به کاربران محترم سایت مردان وردپرس. در این سری از مقالات آموزش بوت استرپ، ما می خواهیم یک سیستم پایه و اصولی در تقسیم بندی بوت استرپ را بیان کنیم که در موبایل ها و تبلت ها یا درواقع در دستگاه های کوچک، بصورت پشت سرهم قرار گیرند، اما در دستگاه های بزرگ و متوسط بصورت افقی خواهند بود. مثال زیر یک چیدمان ساده از دو ستون را بصورت stacked-to-horizontal نمایش می دهد. که نتیجه آن در تمام صفحه ها بصورت 50% 50% خواهد بود. ( به استثنای صفحات نمایش خیلی کوچک که بصورت خودکار به صورت 100%  و پشت سرهم خواهد بود.)                

ادامه مطالب