آموزش بوت استرپ 5

امروز نسخه پنجم و آخر آیکون های Bootstrap را ارسال خواهیم کرد. با انتشار نسخه آلفا امروز ، ما به سمت لمس نهایی آیکون های موجود حرکت خواهیم کرد ، برخی از برنامه های دیگر را می بندیم و مواردی را برای یک نسخه v1 پایدار تنظیم می کنیم. ادامه دهید!

کدهای 1000+
این نسخه تقریبا 300 گلیف جدید به ما اضافه می کند و ما را به بیش از هزار آیکون می برد. ما همه نمادهای هیئت مدیره خود را جمع آوری کرده ایم تا دامنه ها و رویدادها را اضافه کنیم ، یک دسته از نمادهای تلفن جدید اضافه کردیم ، بارهای زیادی از گوشی ها و نمادهای دستگاه ، ده ها برچسب و موارد دیگر اضافه کردیم.

مانند نسخه های قبلی آلفا ، نه تنها تعداد زیادی از آیکون های جدید جدید را در اختیار نداریم ، بلکه ده ها تعمیر و پیشرفت در آیکون های موجود نیز داریم. ما روشهای خود را برای کاهش اندازه پرونده های آیکون بهبود بخشیدیم و زمان بیشتری را برای ساختن کامل وسایل با نفوذ بردار کمتر به پرونده های Figma صرف کردیم. علاوه بر این ، ما کنترل کننده کد را به روز کردیم تا ابعاد ViewBox را برای هر SVG به صورت جداگانه بخوانیم تا عرض و ارتفاع را تنظیم کنیم. در به روزرسانی های آینده ، این به ما امکان می دهد به جای پیش فرض 16x16 آیکون هایی با ابعاد مختلف ایجاد کنیم.

New Sprite SVG
علاوه بر صدها آیکون جدید ، ما یک الگوی جدید bootstrap-icon.svg اضافه کرده ایم. برای آن دسته از کتابهای جدید SVG ، این امکان را به شما می دهد تا قسمت های تک والدینی را بارگذاری کرده و آنها را بدون نیاز به همه SVG HTML ، به پروژه خود هدایت کنید.

در اینجا نگاهی گذرا به چگونگی کار پس از وارد کردن آن می پردازیم:

<svg class = "bi" width = "32" height = "32" fill = "currentColor">
  <از xlink: href = "bootstrap-icons.svg # دلچسب" /> استفاده کنید
</svg>
<svg class = "bi" width = "32" height = "32" fill = "currentColor">
  <استفاده از xlink: href = "bootstrap-icons.svg # ضامن" />
</svg>
<svg class = "bi" width = "32" height = "32" fill = "currentColor">
  <از xlink: href = "bootstrap-icons.svg # shop" /> استفاده کنید
</svg>
ما امیدواریم که پیشرفت های آینده را شامل شویم زیرا این اولین تلاش ما برای SVG Site است. بازخورد و ایده ها همیشه در موارد ما استقبال می شود!

در v1 پایدار می آید
بزرگترین ویژگی موجود در نسخه معمولی v1 فونتهای وب نمادین است. روابط عمومی در حال انجام است که نیاز به تمیز کردن مسیر SVG بیشتر و همچنین برخی از پیشرفت های ابزار دارد. به طور کلی احساس بسیار امیدوارکننده ای می کند!

اگرچه قلم های نمادین به دلایل مختلفی برای اجرای عالی هستند ، لطفاً توجه داشته باشید که طبیعتاً آنها ساده ترین گزینه برای بازدید کنندگان نیستند. SVG ها گزینه های کنترل و طراحی بیشتری را ارائه می دهند و به شما امکان می دهد با استفاده از نقشهای آریا و <title> از ابتدا به آنها دسترسی داشته باشید.

اگر راهنمایی دیگری در مورد چگونگی بهبود نمادها ، اسناد یا ابزارهای ما برای دسترسی بیشتر به بصری و دسترسی آسان تر دارید ، لطفاً به اشتراک بگذارید.

فراتر از آن ، ما به تمیز کردن و بهبود آیکون های موجود ادامه خواهیم داد و سپس در تلاش برای اضافه کردن دسته ای از آیکون های جدید خواهیم بود.

پایین
Alpha 5 در GitHub و npm (آیکون های راه انداز) منتشر شد. با به روزرسانی در v1.0.0-alpha5 یا غیرفعال کردن نمادهای Figma ، آن را از GitHub دریافت کنید.

<3 ،

mdo و کارمندان

بوت استرپ 5 آلفا!
16 ژوئن سال 2020

اولین نسخه بوت استرپ 5 به بازار رسیده است! ما چندین ماه سخت تلاش کردیم تا کارهایی را که در نسخه 4 شروع کردیم بهبود ببخشیم ، و گرچه از پیشرفت خود احساس خوبی داریم ، هنوز کارهای دیگری باید انجام شود.

ما در تسهیل انتقال از نسخه 4 به نسخه 5 متمرکز شدیم ، اما همچنین نگران دور شدن از نسخه های قدیمی یا نامناسب نبودیم. به همین دلیل ، ما بسیار خوشحالیم که بگوییم با نسخه 5 ، Bootstrap دیگر به جی کوئری وابسته نیست و ما پشتیبانی Internet Explorer را پایین آورده ایم. ما در تلاش هستیم تا تمرکز خود را برای ساختن ابزارهای مناسب تر برای آینده افزایش دهیم و اگرچه هنوز به آن نقطه نرسیده ایم ، به نظر می رسد وعده سریعتر CSS ، JavaScript ، وابستگی کمتر و API های بهتر.

 

قبل از بروزرسانی ، لطفاً بخاطر داشته باشید که نسخه پنجم اکنون در آلفا است - تغییرات فوری تا اولین بتا ظاهر می شوند. ما با اضافه کردن یا حذف همه چیز تمام نشده است ، بنابراین موضوعات باز ما را بررسی کنید و درخواستهایی را که در آن سؤال یا نظر دارید لغو کنید.

حالا بیایید به چند نکات برجسته بپردازیم!

نگاه و احساس جدید
ما مبتنی بر پیشرفتهای صفحه اصلی اسنادمان در نسخه 4.5.0 با ظاهر و احساس به روز شده سایر اسناد بودیم. صفحات اسناد ما دیگر ویژگی هایی برای بهبود خوانایی و ایجاد سایت ما به نظر نمی رسند که از نظر ظاهری کمتر از نظر برنامه و از نظر محتوا به نظر برسند. ما همچنین نوار کناری خود را به روز کردیم تا از بخشهای قابل ارتقا (پشتیبانی شده توسط پسوند سقوط ما) برای ناوبری سریعتر استفاده کنیم.

ما همچنین یک آرم جدید پوشیده ایم! در مورد پایدار شدن نسخه 5 بیشتر ، کافی است که بگوییم می خواهیم به ol 'B یک صندوق گرد و یک نسخه کوچک ارائه دهیم.

با الهام از CSS که آغاز این پروژه را ایجاد کرده است ، آرم ما احساس مجموعه ای از قوانین را نشان می دهد - سبکی که با براک های فرفری هم مرز است. ما آن را دوست داریم و فکر می کنیم شما هم آن را دوست خواهید داشت. ما مشتاقانه منتظر دیدن این نسخه در اسناد V4 ، وبلاگ خود و موارد دیگر در طول زمان هستیم تا همچنان به پیشرفت امور و ارسال نسخه های جدید بپردازیم.

جی کوئری و جاوا اسکریپت
JQuery دسترسی بی سابقه ای به رفتارهای پیچیده جاوا اسکریپت برای میلیون ها نفر (میلیاردها دلار) از مردم طی یک دهه و نیم گذشته داشته است. من شخصاً از توانمندسازی و پشتیبانی او به من برای ادامه نوشتن کد ، یادگیری چیزهای جدید و پذیرش مؤلفه های بیشتر شرکت سپاسگزارم. شاید مهمتر از همه ، این جاوا اسکریپت را برای همیشه تغییر داد ، و این به خودی خود خاطره موفقیت jQuery است. از همه سهامداران و هر عامل JQuery که این امکان را برای افرادی مثل من فراهم کرده است متشکرم.

با تشکر از پیشرفت های انجام شده در ابزارهای توسعه مرورگر و پشتیبانی مرورگر ، اکنون می توانیم جی کوئری را به عنوان یک وابستگی بارگیری کنیم ، اما شما هرگز متوجه دیگری نخواهید شد. این مهاجرت امروز توسط Johann-S ، سرپرست اصلی Javascript ما انجام شد. این یکی از بزرگترین تغییرات فریم در سالها است و این بدان معنی است که پروژه های ایجاد شده در Bootstrap 5 در آینده در اندازه پرونده و بارگذاری صفحه بسیار سبک تر خواهند شد.

علاوه بر انتشار jQuery ، ما در JavaScript نسخه 5 تغییرات و پیشرفتهای دیگری نیز ایجاد کردیم که بر کیفیت کدها و ایجاد شکاف بین نسخه 4 و نسخه 5 متمرکز شده است. دکمه های سوئیچ اکنون توسط جعبه های دکمه ای و دکمه های رادیویی اداره می شوند و قابل اطمینان تر هستند.

لیست کامل تغییرات مرتبط با JS را در اولین پروژه آلفا V5 GitHub مشاهده می کنید.

آیا می خواهید با Bootstrap JavaScript کمک کنید؟ ما همیشه به دنبال همکاران جدید تیم هستیم تا به نوشتن برنامه های افزودنی جدید ، بررسی درخواست های برداشت و رفع اشکالات کمک کنیم. به ما اطلاع دهید!

ویژگی های CSS سفارشی
همانطور که گفته شد ، به دلیل افت پشتیبانی در اینترنت اکسپلورر ، ما از ویژگی های سفارشی CSS در Bootstrap 5 استفاده کردیم. در نسخه 4 ما به سادگی دسته ای از متغیرهای ریشه ای را برای رنگ ها و قلم ها درج کرده ایم و اکنون آنها را به برخی از اجزای سازنده و گزینه های طرح بندی اضافه کرده ایم.

مثلاً مؤلفه برنامه را در نظر بگیرید. ، جایی که ما تعدادی متغیر محلی را برای تسهیل سبک برنامه ریزی شده ، انعطاف پذیر و فعال جدول اضافه کردیم:

.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 برای یک سیستم انعطاف پذیر استفاده می کنیم. می توانید اطلاعات بیشتری در مورد آن را در صفحه سند جداول بخوانید و انتظار دارید در آینده نزدیک شاهد استفاده بیشتر از مؤلفه هایی مانند دکمه ها باشید.

پیشرفت را به اسناد اختصاص دهید
ما مدارک خود را در چندین مکان با وضوح بیشتر ، تضعیف زدایی و پشتیبانی بیشتر از افزونه Bootstrap بهبود و بهبود بخشیده ایم. همه اینها با یک بخش واگذاری جدید شروع می شود.

 

اگر از شما برای رمزگذاری 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 پیدا کنیم. در نسخه 4 ، ما این کار را با استفاده از درس های فعال سازی جهانی انجام دادیم و در نسخه 5 به پیشروی آن ادامه دادیم. همه اینها به لطف MartijnCuppens ، که همچنین پروژه RFS را اجرا می کند ، و مسئولیت روابط عمومی اولیه و پیشرفت های بعدی را بر عهده دارد.

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

توجه! ما برخی از ابزارهای قبلی v4 را به بخش دستیار جدید منتقل کردیم. این دستیاران قطعه کد طولانی تری نسبت به ارزش استاندارد مالکیت تسهیلات ما هستند. به سادگی روش ما برای تنظیم مجدد موارد برای تسهیل نام ها و اسناد بهبود یافته است.

سیستم شبکه بهینه سازی شده
در طراحی ، بوت استرپ 5 نسخه کاملی از نسخه 4 نیست. ما می خواستیم که همه بتوانند بعد از مشکلات شنوایی از مسیر ارتقاء v3 به v4 ، راحت تر به این نسخه آینده ارتقا دهند. ما به همین دلیل بیشتر سیستم ساخت را در جای خود نگه داشتیم (منهای جی کوئری) و همچنین به جای اینکه آن را جایگزین کنیم با چیزی جدیدتر و کارآمد ، سیستم شبکه موجود را نیز ساختیم.

در زیر خلاصه ای از آنچه در شبکه ما تغییر کرده است است:

ما یک لایه جدید از مش اضافه کرده ایم! سلام به xl.
دسته روده ها با ابزار .g * مانند حاشیه ها / اثاثه یا لوازم داخلی جایگزین شده اند. ما گزینه هایی را به روده های شبکه در شبکه اضافه کرده ایم که با ابزاری که از قبل می شناسید مطابقت دارد.
گزینه های طرح بندی مدل جایگزین سیستم شبکه جدید شده است.
فضاهای عمودی اضافه شد.
ستونها دیگر قرار ندارند: نسبتاً به طور پیش فرض.
در اینجا یک مثال سریع از استفاده از دسته های جدید رودخانه آورده شده است:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

 

لطفاً برای کسب اطلاعات بیشتر اسناد برنامه ریزی جدید و تغییر نام را مرور کنید.

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

مدارک
ما مولد اسناد را در سایت دائمی از جکیل تا هوگو جایگزین کردیم. جکیل به دلیل سهولت در کار و سادگی تبلیغات در صفحات GitHub همواره تولید کننده مورد علاقه ما بوده است.

متأسفانه ، ما طی سالها دو مشکل اساسی با جکیل کشف کردیم:

جکیل به نصب روبی احتیاج دارد
ایجاد سایت بسیار کند بود
از طرف دیگر ، هوگو در مورد Go می نویسد ، بنابراین وابستگی خارجی به زمان اجرا ندارد ، که بسیار سریع تر است. ما در حال ساخت محل شعبه فعلی پرچمداران خود ، از جمله سند SAS -> CSS با 1.6 پوند هستیم. سرور محلی ما به جای 8-12 ثانیه در میلی ثانیه ثانیه بارگیری مجدد می شود ، بنابراین کار بر روی اسناد دوباره به یک تجربه سرگرم کننده تبدیل شده است.

یک توسعه دهنده هوگو بدون کار Hugo Developer ، Barn Eric Pedersen (bep) که ممکن است برخی از تغییرات پایه کد را انجام دهد تا انتقال صاف و ممکن انجام شود ، امکان پذیر نیست!

همچنین ، وی بهxhmikosr فریاد زد که مسئولیت تبدیل صدها پرونده و همکاری با توسعه دهندگان هوگو را به عهده گرفت تا اطمینان حاصل کند که توسعه محلی ما سریع ، کارآمد و خدماتی است.

به زودی: RTL ، offcanvas و موارد دیگر
چیزهای بسیاری وجود دارد که ما در اولین آلفای خود که هنوز در لیست آلفای آینده قرار دارد ، نمی توانیم به آنها بپردازیم. ما می خواستیم به آنها عشق ورزی کنیم ، بنابراین شما می دانید چه اتفاقی برای رادار ما در هنگام تهیه نسخه پنجم می افتد.

RTL در حال آمدن است! ما روابط عمومی را از طریق RTLCSS راه اندازی کردیم و همچنان به بررسی ویژگی های منطقی می پردازیم. من شخصاً پشیمان هستم که دانستن تمام کوششی که در تلاش جامعه صورت گرفته و درخواست های پروژه را انجام دادیم ، مدت زمان طولانی را برای رسیدگی به این موضوع به ما سپرد. امیدوارم که ارزش صبر کردن را داشته باشد.

یک نسخه منشعب از شرایط ما یک لیست خارج از حوضه را پیاده سازی می کند. ما هنوز کارهایی را در اینجا انجام می دهیم تا بتوانیم بدون اضافه کردن مقدار زیادی سربار ، آنرا به درستی انجام دهیم ، اما ایده پوشش پارچه offcanvas برای قرار دادن هر محتوا به ارزش نوار کناری - تحرک ، سبد خرید و غیره - بسیار زیاد است. من شخصاً می دانم که ما پشت این هستیم ، اما باید عالی باشد.

ما در حال آزمایش تعدادی از تغییرات دیگر در پایه کد ما از جمله سیستم ماژول Sass ، افزایش استفاده از خصوصیات CSS سفارشی ، گنجاندن SVG در HTML به جای CSS و موارد دیگر هستیم.

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

شروع
برای کشف نسخه جدید به https://v5.getbootstrap.com بروید. ما همچنین این بروزرسانی را به عنوان نسخه قبلی npm منتشر کردیم ، بنابراین اگر احساس جسارت یا کنجکاوی در مورد چیزهای جدید دارید ، می توانید آخرین به روزرسانی را از این طریق بیرون بکشید.

npm i bootstrap @ next
بعدش
ما هنوز کار بیشتری روی نسخه 5 داریم ، از جمله تغییرات فوری ، اما ما از این نسخه بسیار هیجان زده هستیم. بگذارید یادداشت ها منفجر شوند و ما تمام تلاش خود را می کنیم تا در کنار همه باشیم. هدف ما ارسال آلفای دیگر طی 3-4 هفته است و احتمالاً تعداد بیشتری نیز خواهد بود. ما همچنین برای رفع برخی از شیب ها نسخه v4.5.1 را ارسال خواهیم کرد و همچنان به شکاف بین v4 و v5 می پردازیم.

علاوه بر این ، به روزرسانی های اضافی باید برای پروژه نمادین Bootstrap ، پروژه RFS (به طور پیش فرض در V5 فعال شود) و پروژه npm starter مورد نظارت قرار گیرد.

از تیم پشتیبانی کنید
برای کمک به پشتیبانی از مدیران مشارکتی Bootstrap ، به صفحه جمعی یا پروفایل GitHub ما مراجعه کنید.