تعداد بازدید: 530

Bootstrap 4

فریم ورک Bootstrap 4 با استفاده از تکنولوژی flexbox پیاده سازی شده که مهم ترین تغییر این فریم ورک می باشد. استفاده ازSass به همراه Bootstrap 4 کارایی و customize آن را ساده می کند. و همچنین امکانات اضافه تری نیز در اختیار خواهید داشت.

نصب و پیکره بندی

برای نصب می توانید از npm استفاده کنید ( Stable Version )

همان طور که از نام آن پیداست فایل فراخوانی را در ساختار پروژه خود بگذارید (assets/scss/vendor/bootstrap.scss) و بوتسترپ نیز پس از نصب در مسیر (node_modules\bootstrap\scss) قرار دارد.

شما پاشنه فریم ورک را از مسیر node_modules خود می کشید و در مسیر فایل های scss پیاده سازی می کنید و در نهایت در مسیر css کامپایل می کنید.

هر یک از ماژول هایی که نیاز داشتید را جهت کامپایل استفاده می کنید و مابقی را کامنت کنید. ماژول های اصلی به سه دسته تقسیم بندی می شوند :

  • Core Variables and mixins : که شامل فایل های functions , variables , mixins می شوند.
  • Reset and dependencies
  • Components

Bootstrap Variables

متغیر هایی در Bootstrap وجود دارد که نحوه رفتار و عملکرد آن را تعیین می کند. همچنین شما با باز نویسی و باز تعریف مجدد متغیر ها می توانید نحوه رفتار Bootstrap را تغییر دهید.

مثلا فرض کنید با تغییر رنگ های پیش فرض می توانید رنگ دکمه های primary , success , danger , warning را تغییر دهید و همچنین ساختار Breakpoint های پیش فرض را تغییر دهید . مثلا در سایز کم تر یا بیشتری Breakpoint ها اتفاق بیفتد.

چون در زمان تعریف متغیر در Bootstrap از !default استفاده شده است لکن شما هر کجا که آن را مجدد تعریف کنید مقدار شما در نظر گرفته می شود. متغیر های به دسته بندی های زیر تقسیم بندی می شوند :

  • Color system : شما می توانید از متغیر رنگ های Bootstrap در کد های خود استفاده کنید.
  • Options : یک سری آپشن ها رو می تونید به صورت global از سیستم حذف کنید . مثلا border-radius , box-shadow , …
  • Grid containers : تنظیمات مربوط به سیستم grid که شامل سایز breakpoint ها می شود.
  • Components : تنظیمات Components ها مثل alert , table , buttons forms , …

متغیر های خود که در مسیر abstract/_variables می باشد را ابتدا import کنید.

Bootstrap mixins

mixin های زیادی در Bootstrap 4 تعریف شده که برخی از مهم ترین آن ها را بررسی می کنیم :

media-breakpoint-up : این mixin برای پیاده سازی responsive بر اساس برچسب گرید های Bootstrap مثل md , sm , xs می باشد.

زمانی که می گوییم up sm یعنی بزرگتر از sm که می شود همان md , lg . معادل معنایی آن min-width است.

media-breakpoint-down : معادل معنایی max-width می باشد. زمانی که می گوییم down md منظورمان sm , xs می باشد.

media-breakpoint-between : برای پیاده سازی استایل ها در بین media break point ها می باشد. مثلا بین lg و xs که می شود md , sm.

Bootstrap grid

ساختار grid بوتسترپ بر پایه flexbox قابلیت تنظیم در عرض و ارتفاع را داراست. برای تنظیم جایگاه عرض و ارتفاع grid ها می توان از کلاس های آن که بسیار شبیه به CSS Flex Property می باشد استفاده کنید.

xs 0
sm 544px
md 768px
lg 992px
xl 1200px

اندازه هایی که در جدول بالا مشاهده می کنید قابل پیکره بندی در قسمت Variables می باشد. همچنین ما کلاس .col را داریم که بر اساس آن می توان ستون های یک اندازه بر اساس فضای خالی داشت (به صورت هوشمند یک اندازه):

col
col
col
col
col-8
col-4

justify-content-* : برعکس بوتسترپ 3 ما در یک ردیف می توانیم از کمتر از 12 ستون استفاده کنیم. بر همین اساس می توان ستون را وسط (justify-content-center) و یا چپ و یا راست چین (justify-content-start , justify-content-end) کرد.

در ترکیب grid و Property ها ما اگر مقدار grid را نگذاریم همان پیش فرض که در بوتسترپ نسخه 3 برابر با xs بود می باشد. پس ما دیگر col-xs-* نداریم . برای این مورد می توان از همان .col-* استفاده کرد.

مثال بالا در سایه medium و large چپ چین است و در سایر سایز ها (small , extra small) وسط چین.

align-items-* : برای این که یک ستون را به صورت ارتفاعی وسط چین کرد (align-items-center) یا بالا و پایین (align-items-start , align-items-end) برد. با توجه به ارتفاع بزرگترین ستون سایرین می توانند رفتار های متفاوتی داشته باشند.

One of three columns
One of three columns
One of three columns

کلاس .row از ویژگی flexbox استفاده می کند. اگر یک المان دیگر را خواستید که به آن ویژگی flexbox را اضافه کنید کلاس d-flex را به آن اضافه کنید این قابلیت می تواند در رسپانسیو های مختلف فعال باشد (md , sm , xs , lg).

با استفاده از کلاس no-gutter می توانید ستون هایی به هم چسبیده ایجاد کنید.

کلاس order-* برای تعیین ترتیب می باشد که به وسیله گرید ها () به صورت ترکیبی می توان تعیین کرد که در حالت های مختلف کدام المان اول و کدام المان دوم بیاید. مثال پر کاربرد این موضوع ساید بار هایی که در سمت راست می باشند می توان پس از شکسته شدن تغییر جهت بدهند و به پایین بیایند.

با استفاده از flex-grow-1 می توانید رشد یک المان را نسبت به برادرانش ماکزیمم کنید. همچنین با کلاس های flex-wrap , flex-nowrap , … می توانید ویژگی flex-wrap را تعیین کنید.

نکته : margin-top : auto و margin-bottom: auto نیز در flexbox خاصیت عرضی را دارند. یعنی میتوان با استفاده از margin نیز یک المان را در ارتفاع وسط چین کرد.

Bootstrap Component

در ورژن 4 نیز Component های مختلفی داریم که مهم ترین آن ها را لیست می کنیم :

  • Card : بسیار کاربردی برای ساخت المان های ستون های مثلا در لیست افراد یا پورتفولیو. این ابزارک قابلیت نوشتن روی عکس را هم دارد.
  • Buttons : دکمه ها که رنگ های آن ها قابلیت پیکره بندی در قسمت Variables دارند.
  • Forms : فرم ها با فیلد های متفاوت مثل لیست های کشویی متفاوت و یا دکمه افزودن فایل
  • Popover : برای ساخت تولتیپ های کوتاه  در اطراف دکمه ها.

مطالب مشابه

sass scss logo

آموزش Sass و کاربردها

sass یک ابزار قدرتمند برای تولید کدهای css می باشد (CSS Extension Language) می باشد. sass یک زبان پیش پردازنده...

FlexBox CSS Property

به صورت پیش فرض ساختار المان های Block به صورت تمامی عرض می باشد. با استفاده از float می توان نحوه چینش آن ها را تغییر...

اشتراک گذاری :

مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای Bootstrap 4

پاسخی بگذارید

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