جلسه ۳۵ : چیدمان افقی grid در Bootstrap 3

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

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

چیدمان افقی سیستم grid در Bootstrap 3

در حال حاضر،ما یک سیستم grid پایه ایجاد می کنیم. که از قبل روی دستگاه های بزرگتر افقی قرار می گیرد. و در دستگاه های کوچک نیز، در صورت نیاز، در یک ستون عمودی قرار می گیرد.

در ادامه ی مباحث، به نمونه ای از چیدمان افقی عناصر می پردازیم:

ما در این چیدمان از دو عنصر با عرض ۵۰% درصد برای هر کدام استفاده می کنیم.

چیدمان افقی سیستم grid در Bootstrap 3

چیدمان فوق، در دستگاههای کوچک در صورت لزوم عرض هر کدام از دو عنصر ۱۰۰% شده و در یک ستون عمودی روی هم قرار می گیرند.

مثال:

نکته:

عدد موجود در کلاس های .col-sm-* در واقع عرض ستون ها را بر اساس طرح ۱۲ ستونی grid در نظر می گیرد.

نکته: مجموع اعداد کلاسهای .col-sm-* در هر سطر نباید از ۱۲ بیشتر شود.

نکته ۲:

شما می توانید طراحی هر عرض ثابتی(fixed-width) را به عرض کامل ( full-width ) با تغییر کلاس .container به .container-fluid تبدیل کنید:

کلام آخر

چیدمان افقی عناصر grid در bootstrap برای صفحه نمایش های متوسط و بزرگ مناسب است.

این چیدمان در نمایشگرهای کوچکتر بصورت خودکار در یک ستون عمودی قرار خواهد گرفت.

امیدواریم که از مباحث چیدمان افقی سیستم grid در Bootstrap 3 بخوبی استفاده کرده باشید.