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

Bootstrap 4

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

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

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

npm install bootstrap

همان طور که از نام آن پیداست فایل فراخوانی را در ساختار پروژه خود بگذارید (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 می باشد.

@include media-breakpoint-up(sm) {
  // Styles
}
/* Compiled:
 * @media (min-width: 544px) {}
 */

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

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

@include media-breakpoint-down(sm) {
  // Styles
}
/* Compiled:
 * @media (min-width: 544px) and (max-width: 768px) {}
 */

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

@include media-breakpoint-between(sm, md) {
    // your code
}
/*
 * @media (min-width: 576px) and (max-width: 991px) {}
 */

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-* استفاده کرد.

<div class="text-md-left text-center" >
   <h3>Hello World</h3>
</div>

مثال بالا در سایه 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-* برای تعیین ترتیب می باشد که به وسیله گرید ها () به صورت ترکیبی می توان تعیین کرد که در حالت های مختلف کدام المان اول و کدام المان دوم بیاید. مثال پر کاربرد این موضوع ساید بار هایی که در سمت راست می باشند می توان پس از شکسته شدن تغییر جهت بدهند و به پایین بیایند.

<div class="row">
   <div class="col-md-4 sidebar order-md-0 order-1"></div>
   <div class="col-md-8 main-content order-md-1 order-0"></div>
</row>

با استفاده از 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 : برای ساخت تولتیپ های کوتاه  در اطراف دکمه ها.

مطالب مشابه

ویرایشگر براکت brackets - توضیحات

ویرایشگر براکت Brackets

براکت ویرایشگری با امکانات گرافیکی بسیار قدرتمند که توسط برنامه نویسان زیادی با استفاده از زبان جاوااسکریپت نوشته شده...

FlexBox CSS Property

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

sass scss logo

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

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

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

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

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

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

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