آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

تغییرت پایدار

انتقال از بتا 3 به نسخه پایدار v4.0 بوت استرپ، تغییرات شکستن وجود ندارد، اما برخی از تغییرات قابل توجه وجود دارد.

چاپ

  • خدمات چاپی شکسته شده ثابت که قبلا استفاده می کرد از یک کلاس  *-d-print. که به طور غیر منتظره هر کدام دیگری را از بین می برد توسط کلاس *-d..اکنون آن ها مطابق با دیگر خدمات بوت استرپ هیتند و فقط به رسانه ی (media print@) اعمال می شوند.

  • ابزارهای نمایش نمایش چاپ در دسترس را در اختیار کاربردهای دیگر قرار می دهد. بتا 3 و بالاتر فقطblock ، inline-block، inline و هیچ کدام را ندارند. V4 پایدار اضافه انعطاف پذیر، خط در انعطاف پذیر، جدول، جدول ردیف و جدول سلول را اضافه می کند.
  • تفسیر پیش نمایش چاپ در مرورگرها با استفاده از سبک های چاپ جدید که نشان دهنده  pagesize@ است.

 

بتا 3 تغییر می کند

 در حالی که بتا 2 تغییرات زیادی را در طول مرحله بتا مشاهده کرد، اما ما هنوز تعداد کمی از این موارد را در نسخه بتا 3 مورد توجه قرار داده ایم. این تغییرات اعمال می شود اگر شما به بتا 3 از بتا 2 یا هر نسخه قدیمی تر از بوت استرپ به روزرسانی می کنید.

 

متفرقه 

  • متغیر  thumbnail-transition$ انتقال نشده حذف شده است. ما چیزی را انتقال ندادیم، پس فقط کد اضافی بود.
  • بسته npm دیگر شامل فایل های دیگری از فایل های source و dist نیست؛ اگر بر روی آنها متکی بودید و اسکریپت های خود را از طریق پوشه node_modules اجرا می کردید، باید گردش کار خود را تطبیق دهید.

 

فرم ها 

  • جعبه ها و رادیوهای سفارشی و پیش فرض بازنویسی شده اند. در حال حاضر، هر دو ساختار متناسب با HTML را بازنویسی کرده اند جعبه ها و رادیوهای سفارشی و پیش فرض. در حال حاضر، هر دو دارای سازگار با HTML). این به ما اجازه می دهد سبک بر اساس وضعیت ورودی را ساده کنیم، ساده سازی پشتیبانی از ویژگی های غیرفعال و پشتیبانی بهتر از اعتبار فرم بوت استرپ است.
  • به روز رسانی انتخاب برای گروه های دکمه مبتنی بر ورودی. به جای [data-toggle = "buttons"] {} برای سبک و رفتار، ما از ویژگی داده فقط برای رفتار JS استفاده می کنیم و به یک کلاس new .tw-group-toggle برای تکیه استفاده می کنیم.
  •  
  • ورودی های فایل سفارشی تغییری را به متغیر $ custom-file-text Sass تغییر دادند. این دیگر یک نقشه Sass توشیبا نیست و در حال حاضر فقط یک رشته را فعال می کند - دکمه مرور را همانطور که در حال حاضر تنها شبه عنصر تولید شده از Sass ما است. متن انتخاب فایل در حال حاضر از متن .custom-file-label می آید.

 

گروه های درونی 

  • افزونه های ورودی در حال حاضر مربوط به قرار دادن آنها نسبت به ورودی هستند. ما وارد کنید. input-group-addon و ininput-group-btn برای دو کلاس جدید، ininput-group-prepend و ininput-group-addend. شما باید به صراحت با استفاده از یک append یا prepend در حال حاضر، ساده سازی بسیاری از CSS ما. درون یک افزونه یا پیشوند، دکمه های خود را همانطور که در هر جای دیگری وجود دارد قرار دهید، اما متن را در متن input-group-text قرار دهید.
  • سبک اعتبار سنجی در حال حاضر پشتیبانی می شود، همچنین ورودی های متعدد است
  • کلاسهای اندازه گیری باید بر روی parent.input-group. باشد و نه عناصر فرم فردی.

 

بتا 2 تغییر می کند

در حالی که در بتا، ما قصد داریم هیچ تغییری در شکست نداشته باشیم. با این حال، همه چیز همیشه به همان اندازه برنامه ریزی نشده است. در زیر تغییرات شکستن در هنگام حرکت از بتا 1 تا بتا 2 ضروری است.

 

شکستن 

  • متغیر badge-color$ حذف و استفاده از آن در .badge. ما از یک تابع کنتراست رنگی برای انتخاب یک رنگ بر اساس رنگ پس زمینه استفاده می کنیم، بنابراین متغیر غیر ضروری است.
  • تابع grayed () را به صورت()gray تغییر نام داد برای جلوگیری از شکست درگیری با فیلتر سیاهچاله بومی CSS.
  • تغییر نام table-inverse، .head-inverse. وthead-default. به.*-dark ، .*-light مطابق با طرح های رنگی مورد استفاده  قرار می گیرد در جای دیگر.
  • جداول پاسخگو اکنون کلاس هایی برای هر نقطه نقطه شبکه تولید می کنند. این از Beta 1 شکایت می کند که پاسخگویی با table-responsive. که استفاده می کنید بیشتر شبیه به table-responsive-md. است. در حال حاضر شما ممکن است در صورت لزوم از table-responsive. یا {table-responsive- {sm، md، lg، xl. استفاده کنید.
  • پشتیبانی از Bower کاهش یافته است به عنوان مدیر بسته برای جایگزین ها استفاده نشده است.
  • بوت استرپ هنوز نیاز به جی کوئری 1.9.1 یا بالاتر دارد، اما شما توصیه می شود از نسخه 3.x استفاده کنید، زیرا مرورگرهای پشتیبانی شده از v3.x پشتیبانی هایی از Bootstrap و v3.x است که دارای برخی از رفع امنیتی است.
  • کلاس استفاده نشده form-control-label. حذف شده است. اگر از این کلاس استفاده کردید، این col-form-label. کپی شد که به طور عمودی <label> با ورودی مربوط به آن در قالب طرح افقی صورت می گرفت.

 

 

نکات برجسته 

  • معرفی pointer-events اشاره گر رویدادهای در Modals..modal-dialog از وقایع با رویدادهای اشاره گر عبور می کند: برای دستیابی به سفارشی کردن روی هیچ رویدادی وجود ندارد، و سپس آن را برایmodal-content. با pointer-events: auto، مقابله می کند:.

 

خلاصه 

در اینجا اقلام بلیط بزرگ شما می خواهید آگاه باشید از حرکت از V3 به V4.

 

پشتیبانی مرورگر

  • کاهش IE8، IE9 و iOS 6 پشتیبانی. v4 در حال حاضر تنها IE10 و iOS 7 است. برای سایتهای مورد نیاز هر یک از آنها از v3 استفاده کنید.
  • پشتیبانی رسمی برای آندروید v5.0 Browser Lollipop و WebView اضافه شده است. نسخه های پیشین مرورگر اندرویدی و WebView هنوز غیر رسمی پشتیبانی می شوند.

 

تغییرات جهانی 

  • Flexbox به طور پیش فرض فعال است. به طور کلی این به معنی حرکت دور از شناور و بیشتر در اجزای ما است.
  • برای فایل های CSS منبع ما از Less to Sass تغییر یافته است.
  • پیکسل ها از px به rem به عنوان واحد اصلی CSS ما تغییر کرده اند، هر چند که پیکسل ها همچنان برای نمایش اطلاعات رسانه ای و رفتار شبکه ای استفاده می شوند، زیرا نمایشگرهای دستگاه از نوع اندازه تحت تاثیر قرار نمی گیرند.
  • فونت بزرگ جهانی از 14px به 16px افزایش یافته است.
  • اصلاح سطوح شبکه برای اضافه کردن گزینه پنجم و حذف -xs infix از آن کلاس. مثال: .col-6.col-sm-4.col-md-3.
  • تم اختیاری جداگانه را با گزینه های قابل تنظیم از طریق متغیرهای SCSS جایگزین کرد
  • ساخت سیستم به منظور استفاده از یک سری از اسکریپت npm به جای Grunt. package.json را برای تمام اسکریپت ها مشاهده کنید یا پروژه های مورد نیاز برای توسعه محلی را مشاهده کنید.
  • استفاده بی پاسخ از بوت استرپ دیگر پشتیبانی نمی شود.
  • Customizer آنلاین را به نفع مستندات نصب گسترده تر و ساخت های سفارشی کاهش داد.

 

سیستم شبکه ای 

به flexbox منتقل شد

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

به روز رسانی نام کلاس شبکه و یک ردیف شبکه جدید.

  • سطوح جدید شبکه SM زیر 768 پیکسل برای کنترل بیشتر دانه افزوده شده است. ما اکنون xs، sm، md، lg و xl داریم. این همچنین به این معنی است که هر ردیف تا سطح یک سطح قرار گرفته است
  • کلاس های xs شبکه اصلاح شده اند که نیازی نیست که infix به دقت نشان دهند که آنها شروع به استفاده از سبک ها در min-width: 0 و نه یک مقدار پیکسل مجموعه. به جای .col-xs-6، اکنون کولر 6 است. تمام سطوح شبکه دیگر نیازمند infix است

به روز رسانی اندازه شبکه ها، مخلوط ها و متغیرها.

  • خطوط شبکه در حال حاضر نقشه Sass دارند تا بتوانید عرض هر قطره قطره ای را در هر نقطه نقطه مشخص کنید.
  • به روز شده در مخلوط شبکه برای استفاده از مخلوط آمادگی آماده سازی و آماده سازی برای تنظیم فلکس و حداکثر عرض برای اندازه جداول ستون.
  • سیستم های شبکه تغییر سیستم های پرس و جو و پهنای باند برای تغییر سطح شبکه جدید را تغییر داده و اطمینان می دهد که ستون ها به طور مساوی به 12 برابر حداکثر عرض خود تقسیم می شوند.
  • پرس و جو رسانه ها نیز تغییر کرده است. به جای تکرار اعلامیه های درخواست رسانه ای ما با هر بار یک مقدار، ما هم اکنون داریم @include media-breakpoint-up/down/only حالا، به جای نوشتن @media (min-width: @screen-sm-min) { ... } میتوانی نوشت @include media-breakpoint-up(sm) { ... }

 

اجزا

  • پانل ها، ریز عکسها، و چاه ها را برای کامپوننت جدید همه جانبه، کارت ها حذف کرد.
  • فونت آیکون Glyphicons را از بین برد. اگر به آیکون نیاز دارید، برخی از گزینه ها عبارتند از:

1-نسخه بالاتری از Glyphicons

2-اكتیكون ها

3-فونت بسیار معروف

4-صفحه گسترده را برای لیستی از گزینه ها مشاهده کنید. پیشنهادات اضافی دارید؟ لطفا موضوع یا PR را باز کنید

  • افزونه Affix jQuery را کاهش داد.

1-ما توصیه می کنیم با استفاده از موقعیت: به جای آن چسبنده. لطفا HTML5 لطفا برای جزئیات و توصیه های polyfill خاص را ببینید. یک پیشنهاد این است که از قوانینsupports برای اجرای آن استفاده کنید

2-اگر از Affix برای اعمال سبک های اضافی غیر موقعیتی استفاده می کنید، polyfills ممکن است مورد استفاده شما را پشتیبانی نمی کند. یک گزینه برای چنین استفاده هایی، کتابخانه شخص ثالث ScrollPos-Styler است.

  • جزء صفحه را به عنوان کوچکترین دکمه سفارشی حذف کرد.
  • تقریبا همه ی اجزاء را مجددا استفاده می کنید تا از انتخابگرهای طبقه ی غیرواقعی بیشتر به جای انتخاب فرزندان خاص استفاده کنید.

 

توسط اجزا

این لیست تغییرات کلیدی را بین مولفه های v3.x.x و v4.0.0 برجسته می کند.

 

راه اندازی مجدد 

New to Bootstrap 4 Reboot است، یک شیوه جدید است که بر روی Normalize با سبک های تنظیم مجدد خود تا حدودی متکی است. انتخابگرهایی که در این فایل ظاهر می شوند فقط از عناصر استفاده می کنند - هیچ کلاس در اینجا وجود ندارد. این سبک های بازنشانی ما را از سبک های جزء ما برای یک رویکرد مدولار جدا می کند. برخی از مهمترین بازنشانیهای این شامل جعبه اندازه گیری هستند: تغییر کادر جعبه، انتقال از واحدهای ام به رم در بسیاری از عناصر، سبک پیوند، و بازنگری بسیاری از عناصر فرم.

 

Typography

  • تمامی فایل های متنی را به فایل _utilities.scss منتقل کرد.
  • به عنوان مثال، کنار صفحه، سربرگ کنار، از مرز، تمام سبک های آن را می توان از طریق آب و برق استفاده کرد.
  • dl-horizon. کاهش یافته است در عوض، با استفاده از .row در <dl> و از کلاس های ستون شبکه (یا مخلوط ها) در <dt> و <dd> کودکان استفاده کنید.
  • سفارشی <blockquote> یک ظاهر طراحی شده به class-.blockquote منتقل شده است و اصلاح کننده معکوس .blockquote-reverse.
  • ​list-inline. اکنون نیاز به فهرست موارد فرزند خود را دارد که کلاس جدیدی در فهرست-inline-item به آنها اعمال شده است.

 

عکس ها 

  • تغییر نام  .img-responsive به.img-fluid.
  • تغییر نام .img-rounded به .rounded
  • تغییر نام  .img-circle به .rounded-circle

 

جدول ها

  • تقریبا تمام نمونه های انتخابگر حذف شده اند، به این معنی که جداول توپی در حال حاضر به طور خودکار از پدر و مادر خود به ارث می برند. این به سادگی انتخابگرهای ما و سفارشی سازی بالقوه است.
  • جداول پاسخ دهنده دیگر نیاز به یک عنصر پیچیده. در عوض، فقط در سمت راست <tab> قرار دهید.
  • تغيير نام .table-condensed به .table-sm برای ثبات.
  • گزینه جدید table-inverse. اضافه شده است.
  • اضافه شدن .thead-default  .thead-inverse. به جداول

 

فرم ها 

  • عنصر متحرک به فایل _reboot.scss بازنشانی می شود.
  • تغییر نام کنترلی کنترل به برچسب .col-form-label.
  • تغییر نام .input-lg و .input-sm به .form-control-lg و .form-control-sm به ترتیب.
  • کلاس های .form-group- * به خاطر سادگی افتادن. حالا از کلاس classes .form-control- * استفاده کنید.
  • dropped.help-block و جایگزین آن با .form-text برای متن راهنما در سطح بلوک. برای متن کمک درون خطی و سایر گزینه های انعطاف پذیر، از کلاس های ابزار مانند متن استفاده می شود.
  • اصلاح افقی بازبینی شده:

1-نیاز به کلاس افق افقی را افشا کرد.

2-.form-group. دیگر سبک را از طریق .rough از طریق mixin اعمال نمی کند، بنابراین برای طرح بندی صفحات افقی مورد نیاز است.
3-کلاس new -col-form-label جدید به برچسب های عمودی مرکزی باform-control. اضافه شده است.

4-form-row. برای طرح های فرم جمع و جور با کلاس های شبکه اضافه شده است

  • اشکال سفارشی پشتیبانی شده است
  • تغییر نام قالب .form-control-static به .form-control-plaintext.

 

دکمه 

  • کلاس .btn-xs به طور کامل به عنوان .btn-sm کاهش یافته است نسبتا کوچکتر از v3 است.
  • به طور پیش فرض به .btn-secondary تغییر نام داد.
  • ویژگی دکمه stateous plugin jQuery button.js کاهش یافته است. این شامل روش $ (). دکمه (رشته) و $ (). دکمه ('reset') است. ما توصیه می کنیم به جای استفاده از کمی کوچک از جاوااسکریپت جاوا، که به نفع رفتار دقیقا همان چیزی است که شما آن را می خواهید.
  • تغییر دکمه های [غیرفعال] به: غیرفعال به عنوان IE9 پشتیبانی: غیر فعال شده است. با این حال fieldset [غیرفعال] هنوز لازم است، زیرا هنوز در زمینه IE11 هنوز مشخص نیست

 

دکمه گروه 

  • جزء بازنویسی شده با flexbox.
  • btn-group حذف شده است. به عنوان جایگزینی شما می توانید از دسته <div class = "btn-group d-flex" role = "group"> </ div> به عنوان یک پوشه در اطراف عناصر با .w-100 استفاده کنید.
  • فاصله صریح بین گروه های دکمه در نوار ابزار دکمه حذف شد. از ابزارهای حاشیه استفاده کن.
  • مستندات بهبود یافته برای استفاده با سایر اجزای سازنده.

 

رها کردن 

  • از انتخاب پدر و مادر به کلاس های مجزا برای همه اجزاء، اصلاح کنندگان و غیره
  • سبک های کشویی ساده شده دیگر با فلش های رو به بالا و یا پایین به سمت منو کشویی متصل نیستند.
  • با استفاده ازdiv> s> یا ul> s> اکنون می توانید افتتاح شود.
  • سبک های کشویی بازسازی شده و نشانه گذاری برای ارائه پشتیبانی آسان و آسان برای ساخته شده در مورد اقلام کشویی مبتنی بر <a> و <دکمه>.
  • آیتم های کشویی حالا نیاز به .dropdown-item
  • بسته های کشویی دیگر نیازی به یک <span class = "caret"> </ span>؛ این در حال حاضر به صورت خودکار از طریق CSS :: پس از dropdown-toggle. ارائه می شود.

 

لیست گروه ها 

  • جزء بازنویسی شده با flexbox.
  • لیست a.list-group-item با یک کلاس صریح، .list-group-item-action-اقدام، برای نسخه های یکنواخت لینک و نسخه های دکمه ای از اقلام گروه لیست جایگزین شده است.
  • list-group-flush. برای استفاده با کارت اضافه شده است.

 

مدال 

  • جزء بازنویسی شده با flexbox.
  • با توجه به حرکت به flexbox، هماهنگ کردن آیکون های رد شده در هدر احتمالا شکسته می شود، چون دیگر از شناور استفاده نمی کنیم. محتوای شناور به نظر می رسد برای اولین بار، اما با flexbox که دیگر مورد نیست. آیکون ها را از بین ببرید تا بعد از علامت های مدال برای رفع بمانید
  • گزینه راه دور و رویداد مربوط loaded.bs.modal حذف شدند. ما توصیه می کنیم به جای استفاده از قالب کلاینت یا یک چارچوب مربوط به داده، یا تماس با jQuery را انجام دهید. خودتان را بارگیری کنید.

 

ناو 

  • جزء بازنویسی شده با flexbox.
  • تقریبا همه ی انتخابگرها را برای یک ظاهر ساده تر از کلاس های غیر لاتین فروشت.
  • به جای انتخابگرهای خاص HTML مثل .nav> li> a، از کلاس های جداگانه برای .navs، .nav-items و .nav-links استفاده می کنیم. این باعث می شود که HTML شما انعطاف پذیرتر باشد در حالی که باعث افزایش قابلیت گسترش می شود.

 

صفحه بندی 

  • جزء بازنویسی شده با flexbox.
  • کلاسهای صریحا در مورد نسلهای .paginations مورد نیاز است
  • pager. را به طور کامل از بین برد. این همان چیزی بود که کمی بیشتر از دکمه های طراحی شده سفارشی بود.

 

پودر های سوخاری 

یک کلاس صریح، .breadcrumb-item در حال حاضر بر روی فرزندان .readbars

 

برچسب ها و مدال ها 

  • تغییر نام .label به .badge از اشکال <label> بی احترامی کنید
  • قطعه .badge را کاهش داد زیرا تقریبا با برچسب مشابه بود. با استفاده از اصلاح کننده ببند-قرص همراه با جزء برچسب به جاي آن نگاه دقيق.
  • مدالها دیگر به صورت خودکار در لیست گروه ها و سایر اجزاء شناور نمی شوند. کلاس های سودمند برای آن لازم است.
  • badge-default. شده کاهش یافته است و badge-secondary. اضافه شده است تا با کلاس های اصلاح کننده جزء مورد استفاده قرار گیرد.

 

پنل ها،ریز عکس ها، چاه ها

به طور کامل برای جزء کارت جدید قطره.

 

پنل 

  • panel. به. کارت، در حال حاضر با flexbox ساخته شده است.
  • .panel-default حذف شده و بدون جایگزینی
  • panel-group. حذف شده و جایگزینی نیست. کارت گروه یک جایگزین نیست، متفاوت است.
  • panel-body. به card-body.
  • .panel-footer به .card-footer
  • .panel-primary، .panel-success، .panel-info، .panel-warning، و .panel-danger برای سرویسهای .bg-، .text-، and .border، که از نقشه  S-map $ما theme-colors$ ساخته شده اند، کاهش یافته است. .

 

 

پیش رفتن 

  • کلاسهای متقابلprogress-bar- * تعویض شده با .bg- * utilities. به عنوان مثال class = "progress-bar progress-bar-danger" class = "progress-bar bg-danger" تبدیل می شود.
  • جایگزین فعال برای میله های پیشرفته متحرک با .progress-bar-animated.

 

چرخ وفلک 

  • تمام اجزای را برای ساده سازی طراحی و یک ظاهر طراحی شده اصلاح کنید. ما سبک های کمتری برای شما داریم که برای لغو، شاخص های جدید و آیکون های جدید استفاده می کنیم.
  • تمام CSS بدون توزیع شده و تغییر نام داده شده است، حصول اطمینان از اینکه هر کلاس با prefixed با .carousel-.
  • برای آیتم های چرخ فلک،.next.prev.left وright تا هم اکنون، carousel-item-next، carousel-item-prev، carousel-item-left، و carousel-item-right.
  • .item نیز در حال حاضر carousel. مورد
  • تمام ظاهر طراحی پاسخگو را حذف کرد، به خدمات و سبک های سفارشی که نیاز داشتند، منتقل شد.
  • حذف تصاویر برای تصاویر در مورد چرخ فلک، تعویق به خدمات.
  • به عنوان مثال، برای نشان دادن و سبک جدید، به کار برده شده است.

 

جدول ها 

  • پشتیبانی از جداول ناسازگار مدل شده حذف شده است. تمام سبک های جدول در حال حاضر در v4 برای گزینه های ساده تر به ارث برده اند.
  • اضافه شده نوع متغیر جدول معکوس

 

ابزار ها 

  • نمایش، پنهان و موارد دیگر:

1-صفحه نمایش ریسپانسیو است.

2-بخش عمده ای از ابزارهای .hidden- * برای ابزارهای نمایش جدید را کاهش داد. به عنوان مثال، به جای .hidden-sm-up، از dd sm-none استفاده کنید. برای استفاده از طرح نامگذاری ابزارهای صفحه نمایش، خدمات آب و فاضلاب چاپ شده را تغییر نام داد. اطلاعات بیشتر در بخش خدمات آبرسانی این صفحه.

  • نوع:تنوع پاسخی به کلاسهای ترازبندی متن ما اضافه شده است .text- {sm، md، lg، xl} - {left، center، right}.
  • تراز و فاصله:

1-حاوی حاشیه پاسخگو و پیمایش جدید برای همه طرفها، به علاوه ستون های عمودی و افقی اضافه شده است.

2-بارگیری boatload از ابزار flexbox.

3-قطعه کد مرکزی برای کلاس جدید .mx-auto.

  • Clearfix به روز شده برای کاهش پشتیبانی برای نسخه های قدیمی تر مرورگر.

مخلوطین پیشوند فروشنده 

مخلوط های پیشوند بوت استرپ 3 که در v3.2.0 منسوخ شده اند در Bootstrap 4 حذف شده اند. از آنجا که ما از Autoprefixer استفاده می کنیم، دیگر لازم نیست.

مخلوط های زیر را حذف کردید: animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

 

مستندات 

  • ما هنوز از Jekyll استفاده میکنیم، اما پلاگینهای موجود در مخلوط داریم:

1-bugify.rb استفاده شده است به طور موثر لیست ورودی در صفحه اشکالات مرورگر خود را.

2-example.rb یک چنگال سفارشی از افزونه preview highlight.rb است که اجازه می دهد برای مثال ساده تر شدن کار با کد.

3-callout.rb یک چنگال سفارشی مشابه آن است، اما برای اسناد خاص ما طراحی شده است

4-markdown-block.rb برای استفاده از تکه های Markdown در عناصر HTML مانند جداول استفاده می شود.

5-jekyll-toc برای تولید جدول ما از محتویات استفاده می شود.

  • همه مطالب اسناد در Markdown (به جای HTML) برای ویرایش آسان تر بازنویسی شده است.
  • صفحات برای محتوای ساده تر و سلسله مراتب در دسترس تر سازماندهی شده اند.
  • ما از CSS منظم به SCSS نقل مکان کردیم تا از مزایای متغیرهای Bootstrap، mixins و موارد دیگر استفاده کنیم.

 

ابزار پاسخگو

همه متغیرهای روی صفحه در v4.0.0 حذف شده اند. با استفاده از media-breakpoint-up ()، media-breakpoint-down ()، یا media-breakpoint-only () مخزن Sass یا نقطه SAS به نقطه نقاط شبکه، به جای آن تبدیل می شوند.

کلاس های کاربردی پاسخگو ما به طور گسترده ای به نفع برنامه های نمایش صحیح حذف شده اند.

کلاسهای .hidden و .show حذف شده اند زیرا با $ (...). hide () و $ (...). show () جی کوئری متضاد هستند. در عوض، می توانید ویژگی [hidden] را تغییر دهید یا از سبک های inline مانند style = "display: none؛"  و style = "display: block؛" استفاده کنید.

تمام کلاسهای hidden class حذف شده اند، برای سرویس های چاپی که تغییر نام داده اند، صرفه جویی می شود.

  • حذف شده از v3:  .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline.visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • از v4 الف حذف شد:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • ابزارهای چاپ دیگر با  .hidden- یا .visible-مشاهده نیستند، اما با .d-print-.
  • 1-نام های قدیمی:.visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print
  • 2-کلاس های جدید:.d-print-block.d-print-inline.d-print-inline-block.d-print-

به جای استفاده از کلاسهای صریح .visible- *، عنصر قابل مشاهده را فقط با مخفی کردن آن در آن اندازه صفحه نمایش می دهد. شما می توانید یکی از .d - * - هیچ کلاس با یک کلاس .d - * - بلوک ترکیب کنید تا یک عنصر را فقط در یک بازه مشخص از اندازه صفحه نمایش نشان دهید

توجه داشته باشید که تغییرات در نقاط پایانی شبکه در v4 به این معنی است که برای رسیدن به همان نتایج باید یک نقطه نقطه توقف بزرگتری داشته باشید. کلاسهای ابزارهای جدید پاسخگو سعی در جایگزینی موارد کمتر رایج که در آن دید دیداری عنصر را نمی توان به عنوان یک دامنه مجاور از اندازه های نمای دید نمایش داد. در عوض نیاز به استفاده از CSS سفارشی در چنین مواردی دارید.