تغییرات جدید در گرید بوت استرپ 4 (Bootstrap 4 Grid)

چهارشنبه ۰۶ تیر ۹۷ توسط محمدسینا مرادی

در بوت استرپ 4 تغییرات و ویژگی های جدیدی در سیستم گرید (Grid) ایجاد شده است که همه ما با آنها از بوت استرپ 3 آشنایی داریم.گرید جدید حالا از flexbox قدرت گرفته است ، بسیاری از کلاس های utility تغییر نام داده اند و یک breakpoint XL جدید نیز اضافه شده است.برای مشاهده دمو نتایج این مقاله به این لینک مراجعه کنید.

1.گرید اصلی

در حال حاضر هر کسی می داند که گرید بوت استرپ چگونه کار می کند.ردیف ها از 12 قسمت مساوی و ستون هایی که داخل آنها هستند تشکیل شده اند. مثال پایین برای بوت استرپ ورژن قدیمی است.

<div class="row">
   <div class="col-xs-2">.col-xs-2</div>
   <div class="col-xs-4">.col-xs-4</div>
   <div class="col-xs-6">.col-xs-6</div>
</div>

ساختار هیچ تغییری نکرده است گرید هنوز هم دارای ردیف و 12 ستون است. با این حال تغییرات کوچکی در container به وجود آمده است.برای مثال Breakpoint از <-col-xs.> ساده تر شده است و به <-col.> تغییر یافته است.مثال پایین برای بوت استرپ ورژن جدید است.

<div class="row">
   <div class="col-2">.col-2</div>
   <div class="col-4">.col-4</div>
   <div class="col-6">.col-6</div>
</div>

برای اینکه تغییرات را بهتر درک کنید ما یک تصویر را آماده کرده ایم که هر دو ورژن بوت استرپ در آن آمده است.به تصویر زیر توجه نمایید:

2.لایه خودکار

یکی از ویژگی های جدید در گرید بوت استرپ 4 حالت auto-layout است. این ویژگی به توسعه دهندگان این امکان را می دهد از سایز ستون ها خارج و آنها را به صورت خودکار در فاصله های ردیف پخش کنند.

<div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>

ستون فضای خالی را به اشتراک می گذارد و همواره همه ردیف را پر می کند.اگر ما بخواهیم که ستون را کوچک تر یا بزرگ تر کنیم می توانیم به آسانی آن را با کلاس <col-size.> انجام دهیم.

3.Column wrapping

زمانی که مجموع ستون ها بیشتر از 12 می شود ، اولین ستون اضافی به خط بعدی اتقال می یابد.این موضوع با اسم Column wrapping شناخته می شود. همانطوری که در بوت استرپ غیر flexbox کار می کرد همچنان همانند آن کار می کند.

<div class="row">
   <div class="col-6">.col-6</div>
   <div class="col-6">.col-6</div>
   <div class="col-3">.col-3, This column will move to the next line.</div>
</div>

تنها چیزی که باید حتما به آن توجه داشته باشید این است که هنگام استفاده از لایه خودکار (auto-layout) ، یک ستون بی عیب و نقص که فقط چند فضا را در بر می گیرد می تواند کل ردیف را پس از wrapping ، از بین ببرد.

4.گرید واکنشگرا یا رسپانسیو

همانطور که در مقدمه ذکر شد ، Bootstrap 4 دارای یک ردیف شبکه جدید XL در بالای صفحه های قدیمی است. در حال حاضر نمایش داده های رسانه ای شبکه ، شامل موارد زیر است:

  • فوق العاده کوچک (xs) - کمتر از 576 پیکسل
  • کوچک (sm) - میان 576 و 768 پیکسل
  • متوسط (md) - میان 768 و 992 پیکسل
  • بزرگ (lg) - میان 992 و 1200 پیکسل
  • فوق العاده بزرگ (xl) - بیشتر از 1200 پیکسل

به غیر از این ها ، هیچ تغییری در نحوه رسپانسیو بودن آن صورت نگرفته است.

5.ارتفاع ستون

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

در طرح بندی flexbox تمام سلول ها در یک ردیف به همان اندازه ستون با بیشترین محتوا قرار دارند. همانند تصویر زیر:

6.چینش افقی

در بوت استرپ قدیمی ، موقعیت ستون ها به صورت افقی از طریق سیستم Offset انجام می شد. Offset ها مانند ستون های خالی کار می کنند و به ما اجازه می دهند المنت ها را به سمت راست حرکت دهیم (به عنوان مثال <col-xs-offset-3.> ستون را به فاصله 3 به سمت راست حرکت می دهد). این می تواند کمی مزاحم ما باشد زیرا ما نیاز داریم مقادیر را به صورت دستی وارد و تنظیم کنیم.

<div class="row">
    <div class="col-xs-6 col-xs-offset-3">This column is now centered.</div>
</div>

باید از ویژگی <justify-content> متشکر باشیم ، موقعیت افقی در flex-strap برای اضافه کردن کلاس های صحیح بسیار آسان است.

<div class="row justify-content-center">
    <div class="col-6">All columns in that row will be automatically centered.</div>
</div>

همچنان اگر می خواهید از Offset ها استفاده نمایید هنوز هم می توانید این کار را انجام دهید! فقط باید این نکته را بدانید که کلاس ها به <*-offset-xs.> محدود شده اند.

7.چینش عمودی

هیچ گزینه ای برای تراز بندی یا چینش عمودی در گرید بوت استرپ 3 وجود ندارد. تنها راه انجام هر گونه موقعیت عمودی، استفاده از CSS سفارشی است و اغلب نیز کد هایمان کثیف می شد.

Flexbox در دست دیگر ، در ترازبندی و چینش لایه ها عالی عمل کرده است و یک راه را به ما برای چینش عمودی نمی دهد بلکه دو راه را در اختیار ما قرار داده است که واقعا این عالی است.

عمودی کردن تمام ردیف ها:

<div class="row align-items-center">
    <div class="col">Middle</div>
</div>  
<div class="row align-items-end">
    <div class="col">Bottom</div>
</div>
<div class="row align-items-start">
    <div class="col">Top</div>
</div>

عمودی کردن ستون های تکی در داخل ردیف:

<div class="row">
    <div class="col align-self-start">Top</div>
    <div class="col align-self-center">Middle</div>
    <div class="col align-self-end">Bottom</div>
</div>

 

8.تنظیم کردن (Ordering) مجدد ستون ها

با سیستم گرید قدیمی ، اگر ما می خواستیم در اطراف ستون ها جابجایی انجام دهیم ، لازم بود از <push> و <pull> استفاده کنیم، در حالی که دستی مقدار مناسب مکان ها را برای حرکت به چپ و راست تنظیم می کردیم.

<div class="row">
    <div class="col-xs-4 col-xs-push-8"> This column will move 8 spaces to the right. </div>
    <div class="col-xs-8 col-xs-pull-4"> This column will move 4 spaces to the left.</div>
</div>

هر کسی که از قبل از flexbox استفاده کرده باشد می داند که آن دارای یک ویژگی <order> ذاتی است. راه هایی که توسعه دهندگان بوت استرپ می توانند آن را اجرا کنند از طریق سه کلاس ordering به شرح زیر می باشد:

  • <flex-first.> - اولین بار نمایش داده شد
  • <flex-last.> - آخرین بار نمایش داده شد
  • <flex-unordered.> - میان اولین بار و آخرین بار نمایش داده شد

محاسبات دستی لازم نیست. اگر شما نیاز به سفارش بیش از 3 ستون (که به ندرت اتفاق می افتد) دارید می توانید از  push&pull و یا از ویژگی <order> از طریق CSS استفاده کنید.

نتیجه 

اگر نگاهی دیگر به مقاله بیندازیم ، کاملا روشن است که flexbox به ما چهره های عالی ای درباره سیستم گرید به ما می دهد که بسیار پیشرفته تر و متنوع تر است.

تنها نکته ای که باید آن را ذکر کنم عدم پشتیبانی از IE9 و مرورگر های قدیمی است اما همه کلاینت های مدرن سازگاری کامل با flexbox دارند.

این مقاله می تواند شما را در درک سیستم جدید گرید بوت استرپ 4 راهنمایی و پشتیبانی کند.

 

امیدوارم در کدزنی موفق و پیروز باشید (+:


کلیدواژه: تغییرات جدید در گرید بوت استرپ 4 bootstrap 4 grid

منابع: tutorialzine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.
مولف:
محمدسینا مرادی
عضو تیم تولید محتوای آرکادمی
مشاهده‌ی پروفایل
آمار و مشخصات:
event
دوشنبه ۲۶ شهریور ۹۷
public
arcademy.ir/+a259
favorite
۰ پسند
comment
۰ دیدگاه
group
۵۷۵ بازدیدکننده
visibility
۹۸۹ بازدید
رده های این مقاله: