Home-theater-designers
Bootstrap 5 дойде с големи промени, включително отпадането на поддръжката на Internet Explorer (IE) и зависимостта от jQuery. Разработен от Twitter, Bootstrap е най -популярната CSS рамка в света. Рамката на потребителския интерфейс с отворен код се стреми да се позиционира за бъдещето и това го видя да направи революционни промени във v5.
Спадът на Bootstrap за IE го направи първият инструмент за уеб разработка, който направи това. Този ход идва, тъй като пазарният дял на Internet Explorer продължава да намалява, съставлявайки по -малко от 3% от всички уеб браузъри.
Прочетете, за да видите какви още подобрения са направени в Bootstrap и как те ви засягат.
1. Поддръжка на jQuery
Bootstrap вече няма да използва библиотеката jQuery. Вместо това екипът за разработка подобри библиотеката на JavaScript, за да осъществи тази промяна. Зависимостта на jQuery не е непременно нещо лошо в Bootstrap.
Всъщност въвеждането на jQuery коренно промени начина, по който се използва JavaScript. Това опрости писането на задачи в JavaScript, което иначе би отнело много редове код.
Свързани: Научете как да създадете елемент в jQuery
Въпреки всичко това, екипът е решил да го премахне. Това идва с ползата от по -малки изходни файлове и по -голямо време за зареждане на страници. Това беше много необходима промяна, която ще види Bootstrap да придобие по-благоприятен за бъдещето стил.
Размерът на изходния файл е станал по -малък с 85KB на минимизиран JavaScript и това е ключово, тъй като Google счита времето за зареждане на страници за мобилни сайтове като фактор за класиране.
Доколкото използването на jQuery вече не е необходимо в Bootstrap 5, все още можете да го използвате, ако искате. Заслужава да се отбележи, че всички приставки за JavaScript остават достъпни.
2. CSS персонализирани свойства
Чрез отпадане на поддръжката на Internet Explorer могат да се използват персонализирани CSS свойства (променливи). IE не поддържа персонализирани свойства - само една причина, поради която задържа уеб разработчиците за дълго време.
Персонализираните свойства на CSS правят CSS по -гъвкав и програмируем. CSS променливите са с префикс с -bs за предотвратяване на конфликт с CSS на трети страни.
Налични са два типа променливи: коренни променливи и променливи на компонентите.
Коренните променливи могат да бъдат достъпни навсякъде, където се зарежда Bootstrap CSS. Тези променливи се намират в _root.scss файл и са част от компилираните dist файлове.
Компонентните променливи се използват като локални променливи в конкретни компоненти. Те са полезни за избягване на случайно наследяване на стилове в компоненти като вложени таблици.
3. Подобрена мрежова система
Тъй като имаше някои проблеми при надстройването от версия 3 на 4, Bootstrap 5 запазва по -голямата част от системата този път, надграждайки съществуващата система, вместо напълно да я променя. Някои от промените са:
- Класът на улуците ( .момчета ) е заменен с помощна програма ( .g* ) подобно на полето и подложката
- Включени са и класове вертикални разстояния
- Колоните вече не са по подразбиране позиция: относителна
4. Подобрена документация
Документацията е подобрена с повече информация, особено когато става въпрос за персонализиране. Често срещан проблем беше, че с много сайтове, които използват Bootstrap, можете веднага да установите, че използва Bootstrap. Bootstrap 5 сега идва с нов облик и усещане и с по -добра персонализация.
Вече има по -голяма гъвкавост да персонализирате темите си, така че не всеки сайт или приложение да имат еднаква прилика. Тематичната страница v4 всъщност беше разширена с повече съдържание и кодови фрагменти за изграждане върху файлове на Sass (популярния CSS предпроцесор). Можете също да намерите стартов npm проект на платформата GitHub, който е достъпен като хранилище за шаблони.
Цветовата палитра също е разширена във версия 5. Разширената вградена цветова система предполага, че можете лесно да оформите оцветяването си, без да се налага да напускате кодовата си база. Направена е и повече работа за подобряване на цветовия контраст, включително добавяне на показатели за цветен контраст в цветовите документи на Bootstrap.
5. Подобрен контрол на формулярите
Bootstrap подобри контролите за формуляри, групите за въвеждане и др.
В v4 Bootstrap използва персонализирани контроли за формуляри в допълнение към настройките по подразбиране, предоставени от всеки браузър. Във v5 всички те вече са персонализирани. Всички бутони за избор, квадратчета за отметка, файл, обхват и други, за да им придадат еднакъв вид и поведение в различните браузъри.
Новите контроли за формуляри вече не съдържат ненужни цветни маркировки, а вместо това се фокусират върху стандартните и логически функции на дизайна.
6. Bootstrap 5 Добавя API за помощни програми
Следвайки нови CSS библиотеки като Tailwind CSS, Bootstrap вече добавя и библиотека с помощни програми. Екипът за стартиране казва, че са щастливи да видят как други разработчици предизвикват начина, по който сме изградили в мрежата за последното десетилетие плюс.
Помощните програми набират скорост в общността за развитие и екипът за стартиране е забелязал. Екипът по -рано беше добавил разпоредби за помощни програми във v4, използвайки глобални $ enable-* класове. В v5 те са преминали към API подход и нов език и синтаксис в Sass. Това ще ви даде възможност да създавате нови помощни програми, като същевременно можете да премахвате или променяте дадените по подразбиране.
Като начин да се осигури по -добра организация, някои помощни програми, които бяха във v4, бяха преместени в секцията Помощници.
7. Нова библиотека с икони на Bootstrap
Bootstrap вече може да се похвали със собствена библиотека с икони SVG с отворен код с над 1300 икони. Той е създаден по поръчка за компонентите на рамката, но все пак можете да работите с тях по всеки проект.
Като се има предвид, че те са SVG изображения, те могат бързо да се мащабират и могат да бъдат внедрени по много начини, а също така да бъдат оформени с CSS.
Можете да инсталирате иконите с помощта над морското равнище:
$ npm i bootstrap-iconsИнсталирайте Bootstrap 5
Можете да отидете на Bootstrap 5 официална страница за изтегляне ако искате да го инсталирате. Ако искате да сте в крак с най -новата версия за разработка, можете да използвате над морското равнище да го дръпнеш:
$ npm i bootstrap@next
Към момента на това писане рамката е в своята бета 3 версия. Това означава, че софтуерът е безопасен за използване, но все още се разработва. Чувствайте се свободни да дадете обратна връзка на екипа и да направите необходимия принос.
Дял Дял Туит електронна поща Въведение в уеб компонентите и архитектурата, базирана на компонентиНека да разгледаме често срещаните уеб компоненти и да видим защо са полезни.
Прочетете Напред Свързани теми- Програмиране
- Уеб разработка
- JavaScript
- CSS
Джером е щатен писател в MakeUseOf. Той обхваща статии за програмиране и Linux. Той също е ентусиаст на крипто и винаги следи крипто индустрията.
Още от Джером ДейвидсънАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
препоръки за филми въз основа на филми, които харесватеЩракнете тук, за да се абонирате