خانه / بوت_استرپ_Bootstrap / Twitter Bootstrap Grid System

Twitter Bootstrap Grid System

Twitter Bootstrap Grid System

 Twitter Bootstrap Grid System
Twitter Bootstrap Grid System

 

سیستم گرید تویتر بوت استرپ راحت ترین و سریعترین راه برای ایجاد Layout می باشد.

 

چگونه با سیستم گرید تویتر بوت استرپ Layout ایجاد کنیم:

این برنامه آسانترین و سریعترین راه را برای ایجاد Layout در صفحات وب ارائه می دهد. برخلاف سیستم گرید قبلی که به طور پیش فرض ثابت می باشد، ورژن جدید آن، به عنوان مثال تویتر بوت استرپ ،۱ اولین سیستم گرید جاری را به همراه پاسخگو معرفی می کند که به طور متناسب با افزایش دستگاه، تعداد ستون ها را تا ۱۱ افزایش می دهد. تویتر بوت استرپ ۱ دارای گروه های گرید از پیش تعریف شده می باشد تا هرچه سریعتر Layout های گرید برای انواع مختلف دستگاه ها بسازد، دستگاه هایی مانند تلفن همراه، تبلت، دسکتاپ و غیره.

 

مثال کد بوت استرپ :

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

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

 

جدول ریسپانسیو بوت استرپ :

 

چگونه با سیستم گرید تویتر بوت استرپ Layout ایجاد کنیم
چگونه با سیستم گرید تویتر بوت استرپ Layout ایجاد کنیم

 

 

جدول بالا یک نکته ی مهم را توضیح می دهد ، به کار بردن هرکدام از گروه های – col-sm برای یک عنصر نه تنها بر روی طراحی آن در دستگاه های کوچک مانند تبلت ها تاثیر خواهد گذاشت بلکه در دستگاه های بزرگتر نیز اگر گروه col-lg وجود نداشته باشد، تاثیر خواهد داشت.

 

 

 

در ادامه با آموزش چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳ با ما همراه باشید…..

 

هر روز با آموزش های متفاوت و جالب و جذاب با ما همراه باشید …… در صورت رضایت از مطالب ما به اشتراک بگذارید تا دنیای هوشمندتری داشته باشیم…….

 

 

همچنین بررسی کنید

twitter-bootstrap

چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳

چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ ۳   با این گرید سیستم …

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوسرویس و تعمیر کولر گازی