بوت استرپ ۵ هیجان انگیز تر از همیشه با حذف وابستگی های جی کوئری

اولین آلفا Bootstrap 5 وارد بازار شد! ما چندین ماه سخت تلاش کردیم تا کارهایی را که در V4 شروع کردیم اصلاح کنیم ، و گرچه از پیشرفت خود احساس خوبی داریم ، هنوز کارهای دیگری نیز باید انجام شود.
ما بر روی مهاجرت از v4 به v5 به نزدیکتر شدن متمرکز شده ایم ، اما همچنین ترسی از ترسیدن از آنچه کهنه یا دیگر مناسب نیست ترسیده ایم. به همین ترتیب ، ما بسیار خوشحالیم که بگوییم با V5 ، Bootstrap دیگر به جی کوئری بستگی ندارد و ما پشتیبانی از Internet Explorer را کاهش داده ایم. ما تمرکز خود را بر ساختن ابزارهایی که آینده سازگارتر باشد ، تشدید می کنیم و اگرچه هنوز کاملاً در آنجا حضور نداریم ، قول متغیرهای CSS ، سریعتر JavaScript ، وابستگی کمتر و API های بهتر قطعاً نسبت به ما احساس خوبی دارند.
قبل از شروع به روزرسانی ، لطفاً به یاد داشته باشید که v5 اکنون در آلفا قرار دارد – تا اولین بتا ما تغییرات شکسته ادامه خواهد یافت. ما اضافه کردن یا حذف همه چیز را تمام نکردیم ، بنابراین مشکلات باز را بررسی کرده و از آنجا که سؤال یا بازخورد دارید درخواست ها را بکشید.
حالا بیایید با برخی از نکات برجسته حفاری کنیم!
نگاه و احساس جدید
ما در صفحه اصلی اسناد خود در v4.5.0 با نگاه به روز و احساس بقیه اسناد خود ساخته ایم. صفحات اسناد ما دیگر برای بهبود خوانایی و ایجاد سایت احساس نمی کنند که از نظر اپلیکیشن و از نظر محتوا کمتری داشته باشند ، تمام صفحه هستند. علاوه بر این ، ما نوار کناری خود را به روز رسانده ایم تا از بخش های قابل ارتقا (طراحی شده توسط افزونه Collapse خودمان) برای ناوبری سریعتر استفاده کنیم.
New Bootstrap docs layout
ما همچنین با یک آرم کاملاً جدید ورزش می کنیم! درباره اینکه وقتی V5 پایدار می ماند ، کافی است اما بگوییم که می خواستیم ol را در یک میدان گرد یک نسخه کوچک ارائه دهیم.
New Bootstrap logo
با الهام از CSS که در آغاز این پروژه ایجاد شده است ، آرم ما احساس یک سبک تنظیم شده از قانون را محدود می کند که توسط بندهای فرفری محدود شده است. ما آن را دوست داریم و فکر می کنیم شما نیز خواهید بود. انتظار داریم که با مرور زمان به ادامه اصلاحات چیزها و ارسال نسخه های جدید ، به مستندات V4 ، وبلاگ ما و موارد دیگر خاتمه یابد.
jQuery و JavaScript
jQuery در طی یک دهه و نیم گذشته دسترسی بی سابقه ای به رفتارهای پیچیده جاوا اسکریپت به میلیون ها نفر (میلیارد ها دلار) از مردم به ارمغان آورد. به شخصه ، من برای توانمندسازی و پشتیبانی از آن برای من ممنونم که همچنان به نوشتن کد جلویی ، یادگیری چیزهای جدید و پذیرش افزونه های جامعه ادامه دهم. شاید مهمتر از همه ، این برای همیشه جاوا اسکریپت تغییر کرده است ، و این به خودی خود یک بنای تاریخی برای موفقیت jQuery است. با تشکر از شما برای همه مشارکت کنندگان و نگهبانان jQuery که این امکان را برای افرادی مثل من فراهم کرده است.
با تشکر از پیشرفت های موجود در ابزارهای توسعه جلویی و پشتیبانی از مرورگر ، اکنون ما می توانیم jQuery را به عنوان یک وابستگی رها کنیم ، اما شما هرگز متوجه دیگری نیستید. این مهاجرت این روزها توسط @ Johann-S ، نگهدار اصلی JavaScript ما انجام شد. این یکی از بزرگترین تغییرات در چارچوب در سالهاست و به معنای آن است که پروژه های ساخته شده در Bootstrap 5 از نظر اندازه و بارگذاری صفحه به میزان قابل توجهی سبک تر می شوند.
علاوه بر رها کردن جی کوئری ، ما تعداد کمی از تغییرات و پیشرفتهای دیگر در JavaScript در v5 ما ایجاد کرده ایم که بر کیفیت کد متمرکز است و شکاف بین v4 و v5 را متوقف می کند. یکی دیگر از تغییرات بزرگ دیگر ، حذف بخش عمده افزونه دکمه ما برای رویکرد HTML و CSS فقط برای تغییر حالت بود. اکنون دکمه های ضامن از جعبه های دکمه و دکمه های رادیویی تغذیه شده و بسیار قابل اطمینان تر هستند.
لیست کامل تغییرات مرتبط با JS را در اولین پروژه آلفا v5 در GitHub مشاهده می کنید.
آیا علاقه مند به کمک JavaScript در بوت استرپ هستید؟ ما همیشه به دنبال همکاران جدید تیم هستیم تا به نوشتن افزونه های جدید ، بررسی درخواست های کشش و رفع اشکالات کمک کنیم. به ما اطلاع دهید!
ویژگی های سفارشی CSS
همانطور که گفته شد ، ما به لطف کاهش پشتیبانی از Internet Explorer ، ما از ویژگیهای سفارشی CSS در Bootstrap 5 استفاده کرده ایم. در V4 ما فقط تعداد معدودی از متغیرهای ریشه ای برای رنگ و قلم را درج کرده ایم و اکنون آنها را برای تعداد کمی از مؤلفه ها و گزینه های طرح بندی اضافه کرده ایم.
به عنوان مثال از مؤلفه جدول جدول ما استفاده کنید ، جایی که ما تعداد معینی از متغیرهای محلی را اضافه کرده ایم تا سبک های راه راه ، قابل جابجایی و فعال جدول آسانتر شوند:
.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}
ما در حال تلاش برای استفاده از ابر قدرتهای Sass و CSS از ویژگی های سفارشی برای سیستم انعطاف پذیر تر هستیم. می توانید اطلاعات بیشتر در مورد این مورد را در صفحه Docs جداول بخوانید و انتظار دارید در آینده نزدیک شاهد استفاده بیشتر در مؤلفه هایی مانند دکمه ها باشید.
سفارشی سازی اسناد بهبود یافته است
ما در چندین مکان شکار کرده ایم و مستندات خود را بهبود بخشیده ایم ، توضیحات بیشتری داده ایم ، ابهام را از بین می بریم و پشتیبانی بیشتری برای گسترش Bootstrap ارائه می دهیم. همه اینها با یک بخش کاملا جدید Customize شروع می شود.
Bootstrap 5 customize docs
اسناد سفارشی سازی v5 در صفحه Theging V4 با قطعات و محتوای بیشتر برای ساختن در بالای فایلهای Sass منبع بوت استرپ گسترش می یابد. ما در اینجا مطالب بیشتری را منتشر کرده ایم و حتی یک پروژه npm مبتدی را برای شما فراهم کرده ایم تا بتوانید سریعتر و آسان تر شروع کنید همچنین به عنوان یک برگردان الگو در GitHub در دسترس است ، بنابراین می توانید آزادانه چنگ بزنید و بروید.
Bootstrap 5 color palette
ما پالت رنگی خود را در V5 نیز گسترش داده ایم. با استفاده از سیستم رنگی گسترده و داخلی ، می توانید راحت تر ظاهر و ظاهر برنامه خود را بدون ترک کردن کدهای پایه سفارشی کنید. ما همچنین کارهایی را برای بهبود کنتراست رنگ انجام داده ایم و حتی معیارهای کنتراست رنگ را در اسناد Color خود ارائه داده ایم. امیدوارم این امر به شما در دستیابی سایتهای دارای بوت استرپ کمک کند.
فرم های به روز شده
علاوه بر بخش جدید سفارشی سازی ، مستندات و مؤلفه های فرم های خود را بازنگری کرده ایم. ما تمام سبکهای فرم خود را در یک بخش جدید فرم (از جمله مؤلفه گروه ورودی) ادغام کرده ایم تا تأکید خود را برای آنها داشته باشیم.
New Bootstrap 5 forms docs
Alongside new docs pages, we’ve redesigned and de-duped all our form controls. In v4 we introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, we’ve gone fully custom.
New Bootstrap 5 checks
اگر با علائم فرم V4 آشنا هستید ، نباید به نظر شما خیلی دور باشد. با وجود مجموعه ای از کنترل های فرم و تمرکز بر طراحی مجدد عناصر موجود در مقابل تولید عناصر جدید از طریق عناصر شبه ، ما نگاه و احساس بسیار سازگار تری داریم.
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
هر کادر کادر ، رادیو ، انتخاب ، پرونده ، دامنه و موارد دیگر شامل یک ظاهر سفارشی برای یکپارچه کردن سبک و رفتار کنترل های فرم در سیستم عامل و مرورگر است. این کنترل های شکل جدید همه در کنترل های فرم کاملا معنایی و استاندارد ساخته شده اند – بدون نشانگر اضافی بیشتر ، فقط کنترل ها و برچسب ها را تشکیل می دهند.
حتماً اسناد مربوط به اشکال جدید را بررسی کرده و به ما بگویید که چه فکر می کنید.
API آب و برق
ما دوست داریم ببینیم تعداد زیادی از افراد در حال ساختن کتابخانه ها و ابزارهای CSS جدید و جالب هستند ، روشی را که ما در یک دهه گذشته در وب ساخته ایم به علاوه ، به چالش نمی کشد. با کمترین طراوت ، طراوت آور است و به ما فرصتی می دهد تا در مورد بحث و تکرار صحبت کنیم. به همین ترتیب ، ما یک API ابزار جدید با نام تجاری جدید را در Bootstrap 5 پیاده سازی کرده ایم.
$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);
از آنجایی که خدمات نرم افزاری به یک روش ترجیحی برای ساخت تبدیل شده اند ، ما در تلاش هستیم ضمن ارائه کنترل و شخصی سازی ، تعادل مناسب را برای اجرای آنها در Bootstrap پیدا کنیم. در v4 ، ما این کار را با کلاس های $ فعال $ * انجام دادیم ، و حتی آن را در V5 نیز انجام داده ایم. اما با یک رویکرد مبتنی بر API ، ما در Sass یک زبان و نحو ایجاد کرده ایم تا در عین حال قادر به تغییر یا حذف مواردی باشیم که در اختیار شما قرار می دهیم. این همه به لطفMartijnCuppens است که پروژه RFS را نیز حفظ می کند و مسئولیت روابط عمومی اولیه و پیشرفت های بعدی را بر عهده دارد.
ما فکر می کنیم این یک تغییر دهنده بازی برای کسانی است که از طریق پرونده های منبع ما روی Bootstrap ساخته می شوند ، و اگر تاکنون پروژه ای با قابلیت Bootstrap ایجاد نکرده اید ، ذهن شما دمیده خواهد شد.
سر بالا! ما برخی از ابزارهای قبلی v4 ما را به بخش جدید Helpers منتقل کرده ایم. این مددجویان قطعه کد هستند که طولانی تر از جفت شدن ارزش خاص شما برای خدمات ما است. فقط روش ما برای سازماندهی مجدد کارها برای نامگذاری آسان تر و مستندسازی بهتر.
سیستم شبکه پیشرفته
با طراحی Bootstrap 5 ، خروج کامل از V4 نیست. ما می خواستیم که همه بتوانند بعد از شنیدن مشکلات مربوط به مسیر ارتقاء v3 به v4 راحت تر به این نسخه آینده ارتقا دهند. ما به همین دلیل بخش عمده ای از ساخت را در جای خود نگه داشته ایم (minus jQuery) ، و ما همچنین به جای اینکه آن را با چیزهای جدیدتر و جدیدتر جایگزین کنیم ، روی سیستم شبکه موجود نیز ساخته ایم.
در اینجا مجموعه ای از آنچه در شبکه ما تغییر کرده است آورده شده است:
ما یک شبکه جدید اضافه کرده ایم! سلام به xxl.
کلاس های درجه دوم با برنامه های کاربردی .g * جایگزین شده اند ، دقیقاً مانند برنامه های حاشیه ای / padding. ما همچنین گزینه هایی به فاصله رودخانه شبکه شما اضافه کرده ایم که مطابق با برنامه های فاصله ای است که قبلاً با آنها آشنا نیستید.
گزینه های طرح بندی فرم با سیستم شبکه جدید جایگزین شده اند.
کلاس های فاصله عمودی اضافه شده اند.
ستونها دیگر موقعیت ندارند: به طور پیش فرض نسبی.
در اینجا نمونه ای سریع از نحوه استفاده از کلاس های جدید بخاری شبکه ای آورده شده است:
<div class=“row g-5”>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>
برای کسب اطلاعات بیشتر به اسناد Layout مجدد و بازسازی شده نگاهی بیندازید.
طرح شبکه CSS به طور فزاینده ای برای زمان نخست آماده است ، و با این که هنوز از آن استفاده نکرده ایم ، ما همچنان به آزمایش و یادگیری آن می پردازیم. به نسخه های آینده v5 نگاه کنید تا از روش های بیشتری پذیرای آن باشید.
اسناد
ما تولید کننده سایت استاتیک مستندات خود را از جکیل به هوگو تغییر دادیم. Jekyll مدتهاست که با توجه به راحتی و راه اندازی آسان و سادگی آن با استقرار در صفحات GitHub ، مولد انتخاب ما بوده است.
متأسفانه ، ما طی سالها با جکیل به دو موضوع مهم رسیده ایم:
جکیل به نصب روبی نیاز دارد
تولید سایت بسیار کند بود
از طرف دیگر هوگو در Go نوشته شده است ، بنابراین هیچ وابستگی به زمان اجرا خارجی ندارد و بسیار سریعتر است. ما سایت شاخه فعلی استاد ما ، از جمله Sass -> CSS را با 1.6 پوند تهیه می کنیم. سرور محلی ما به جای 8-12 ثانیه در میلی ثانیه ثانیه بارگیری مجدد می شود ، بنابراین کار بر روی اسناد دوباره به یک تجربه دلپذیر تبدیل شده است.
سوئیچ هوگو بدون کار اصلی توسعه دهنده هوگو ، Bjørn Erik Pedersen (bep) امکان پذیر نبود ، که تغییرات اساسی در چندین کد پایه ایجاد کرده تا انتقال ممکن و صاف باشد!
همچنین فریادی بهxhmikosr که در تبدیل صدها پرونده و همکاری با توسعه دهندگان Hugo منجر به این اتهام شده است تا اطمینان حاصل کند که توسعه محلی ما سریع ، کارآمد و پایدار بوده است.
به زودی: RTL ، offcanvas و موارد دیگر
یک تن دیگر وجود دارد که ما وقت نداریم که در اولین آلفای خود که هنوز هم در لیست تاج های مختلف برای تأکید قرار دارد ، مقابله کنیم. ما می خواستیم به آنها عشق ورزی کنیم ، بنابراین بدانید که در طول توسعه V5 چه چیزی در رادار ما وجود دارد.
RTL در حال آمدن است! ما PR را با استفاده از RTLCSS ترشح کرده ایم و همچنان به بررسی خصوصیات منطقی می پردازیم. من شخصاً متأسفم که این مدت طولانی را صرف کرده‌ایم تا بطور رسمی با این کار تمام تلاش خود را برای تلاش در جامعه انجام داده و درخواستهای خود را به این پروژه برسانیم. امیدوارم انتظار ارزشش را داشته باشد.
یک نسخه چنگال از ماژول ما وجود دارد که منوی offcanvas را اجرا می کند. ما هنوز کارهایی را در اینجا انجام داده ایم تا بتوانیم این حق را بدون اضافه کردن سربار زیاد به دست بیاوریم ، اما ایده داشتن یک بسته بندی لوازم جانبی برای قرار دادن هرگونه محتوا با ارزش نوار کناری – ناوبری ، سبد خرید و غیره – بسیار زیاد است. به شخصه ، من می دانم که ما در این زمان عقب هستیم ، اما با این وجود باید عالی باشد.
ما تعدادی تغییر دیگر در پایگاه داده خود را بررسی می کنیم ، از جمله سیستم ماژول Sass ، افزایش استفاده از خصوصیات سفارشی CSS ، تعبیه SVG در HTML ما به جای CSS ، و موارد دیگر.
هنوز یک تن دیگر نیامده است ، از جمله بهبود مستندات بیشتر ، رفع اشکال و تغییرات کیفیت زندگی. حتماً موضوعات و PR های باز ما را بررسی کنید تا ببینید با کمک بازخورد ، آزمایش روابط عمومی انجمن یا به اشتراک گذاشتن ایده های خود ، از کجا می توانید کمک کنید.
شروع کنید
برای کشف نسخه جدید به https://v5.getbootstrap.com بروید. ما همچنین این را به روز کرده ایم به عنوان پیش نسخه npm ، بنابراین اگر احساس جسارت می کنید یا نسبت به چیزهای جدید کنجکاو نیستید ، می توانید جدیدترین روش را از این طریق بکشید.
npm i bootstrap@next
بعدش
ما هنوز کار بیشتری برای انجام در v5 داریم ، از جمله برخی از تغییرات در حال شکستن ، اما ما از این نسخه بسیار هیجان زده هستیم. بگذارید بازخورد موج بخورد و ما تمام تلاش خود را می کنیم تا در این راه همگام باشید. هدف ما این است که طی 3-4 هفته آلفا دیگر حمل کنیم و احتمالاً یک زن و شوهر دیگر نیز بعد از آن. ما همچنین یک نسخه v4.5.1 را ارسال خواهیم کرد تا یک زن و شوهر از رگرسیون را برطرف کنیم و به شکاف بین V4 و V5 ادامه دهیم.
فراتر از این ، برای بروزرسانی های بیشتر در مورد پروژه Bootstrap Icons ، پروژه RFS ما (اکنون به طور پیش فرض در V5 فعال شده است) و پروژه npm starter را دنبال کنید.

ما در حال بسته شدن 700 تصویر در Bootstrap Icon با نسخه امروز ، آلفا 4 هستیم! ما مدتی را در زیر کلاه فرایند ساختمان گذرانده ایم تا مواردی را بهبود بخشیم ، تعداد نمادهای جدید اضافه کردیم و برخی از اشکالات و ناسازگاری ها را برطرف کردیم.

این مقاله رو از دست ندید :   اخبار سئو در خرداد ماه 99: الگوریتم تجربه صفحه گوگل

ما برای همه نیازهای سبد خرید شما تنهای نمادهای تجاری جدید ارسال کرده ایم ، تعداد گزینه های تقویم اضافه شده است (نمی توانم با یک طرح تنظیم شوم) ، انواع فلش شکل جدید و موارد دیگر.

700 icons آیکون!

با وجود 140 نماد جدید در این نسخه ، تقریباً 700 نماد در آن قرار داریم. ما احتمالاً در نسخه بعدی ما پرواز خواهیم کرد ، اما در ضمن ، به وسعت نمادها نیز نگاهی بیندازید. برای حل مسائل SVGO که مانع از باز شدن آنها در برخی برنامه ها شده است ، هر نماد نیز دوباره پردازش شده است.

All Bootstrap Icons

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

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