Bootstrap 4 Нови и готини функции ще ви харесат

Следващата голяма версия на рамката Bootstrap е зад ъгъла. Алфа версията вече може да бъде изтеглена от уеб сайта за разработка на Bootstrap, а изходният код е достъпен и в Github.

Twitter Bootstrap в момента е най-популярната фронтенд рамка там. Това позволява на разработчиците да бързо изградете мобилни и отзивчиви уебсайтове. Bootstrap прави възможно използването на стандартното трио за HTML5, CSS3 и Javascript. Понастоящем се използва от повече от 6 милиона сайтове в мрежата.

Въпреки че Bootstrap 4 все още е в фаза на разработка (така че не го използвайте на живо на сайта още), разработчиците са направили страхотна работа. В този пост ще разгледаме новата версия, която включва много страхотни функции, които със сигурност ще направят рационализиране и подобряване на работния процес на разработката на интерфейса.

1. Sass Вместо LESS

Досега Bootstrap е използвал LESS като свой главен CSS преподавател, но за новото голямо издание, правилата за стила ще бъдат преработени за Sass, което е много по-популярно сред разработчиците на frontend, има огромна база от сътрудници, обикновено по-лесна за използване и предлага повече възможности. Благодарение на мощния Libsass Sass Complier, написан на C / C++ Bootstrap 4 ще се компилира много по-бързо отколкото преди.

2. Нова решетка за по-малки екрани

Bootstrap има усъвършенствана отзивчива мрежа, която позволява на разработчиците да насочват устройства с различни екрани. Bootstrap 3 в момента има 4 класа на решетката за колони, .COL-XS-XX за мобилни телефони, .COL-SM-XX за таблетки, .COL-MD-XX за настолни компютри и .COL-LG-XX за по-големи настолни компютри. Bootstrap 4 ще подобри мрежата с пета, която ще улесни разработчиците насочете към по-малки устройства под 480px ширина на екрана за изглед.

Новият клас на мрежата е взел името на предишния най-малък и натисна текущите имена на нивата на решетката нагоре с една стъпка. В Bootstrap 4 големите настолни компютри ще използват .COL-XL-XX клас. Важно е да се знае, че въпреки новото име не са добавили нов клас за допълнителни големи екрани, но за допълнителни малки.

3. Въвежда относителни CSS единици

Bootstrap 4 най-накрая премахва поддръжката на Internet Explorer 8. Това е наистина интелигентна стъпка, тъй като им позволява да се отърват от досадни polyfill и да се превърнат в относителни CSS единици. Вместо пиксели, новата основна версия ще бъде използвайте REMs и EMs които дават възможност прилагане на отзивчива типография в сайтове на Bootstrap. Това също ще увеличи четливостта и ще направи сайтовете по-достъпни за потребители с увреждания.

Ако искате да изпробвате как работят относителните единици с новия Bootstrap 4, вижте тази демонстрация на Codepen.

4. Чисто нови карти за стартиране

Екипът на разработчиците реши да обедини някои предишни елементи на потребителския интерфейс на Bootstrap, така че те решиха да въведат a нов UI компонент, наречен карти. Картите ще заменят бившите кладенци, миниатюри и панели и ще предоставят на потребителите по-рационален работен процес. Не се притеснявайте, картите ще съдържат познати елементи, като заглавия, колонтитули и колонтитули на кладенци, миниатюри и панели.

Тъй като картите ще бъдат по-гъвкави от настоящите UI компоненти, те ще позволят по-голямо пространство за творчески реализации. Има някои пионери, които вече са провеждали експерименти с Codepen с карти Bootstrap. Можете да ги проверите или да създадете свои собствени карти.

5. Нов модул за рестартиране

Новият модул за рестартиране замества предишния normalize.css нулиране на файла. Той не го отхвърля; напротив, той изгражда повече правила по него. Целта на този ход беше да се включат всички общи CSS селектори и да се рестартират стиловете в a един, лесен за използване файл SCSS. Можете да разгледате изходния код тук, ако искате да разберете по-добре как работи новият модул.

Добре е да знаете, че новите стилове за рестартиране интелигентно задават свойството CSS за оразмеряване на кутията гранично-кутия на елемент, който следователно се наследява от всеки елемент на страницата. Новото правило за стил прави по-лесно управляемите отзиви. Ако искате да усетите разликата между типовете за оформление на съдържанието и границата, разгледайте тази удобна демонстрация, предоставена от CSS-Tricks.com (тя не е създадена за Bootstrap 4, а само показва как е оразмерена кутията обикновено работи).

6. Опция за поддръжка на Flexbox

Bootstrap 4 дава възможност да се възползвате от Flexbox Layout на CSS3, обаче - тъй като Internet Explorer 9 не поддържа модула на flexbox - стандартната версия на Bootstrap 4 използва флоат и дисплей CSS свойства за реализиране на флуидно оформление.

Flexbox има лесен за използване оформление, което може да бъде използвано отлично в реагиращ дизайн, тъй като осигурява гъвкав контейнер, който се разширява или намалява, за да запълни наличното пространство по най-добрия начин. Използвайте само опцията opt-in flexbox, ако вие не трябва да предоставят подкрепа за IE9.

7. Рационализирана персонализация на променливите

Всички променливи Sass, използвани в новата версия на Bootstrap, са включени в един файл, наречен _variables.scss, който значително ще оптимизира процеса на разработване. Не е нужно да правите нищо друго освен да копирате настройките от този файл в друг, наречен _custom.scss , за да промените стойностите по подразбиране.

Можеш персонализирайте много неща цветове, интервали, стилове на връзка, типография, таблици, точки на прекъсване и контейнери, номер на колона и ширина на канавката и много други.

8. Нови класове за полезни интервали

Bootstrap 3 вече има много практически полезни класове, като например тези, които променят плаващ или clearfix, но Bootstrap 4 добавя още повече. Най- нови класове разстояние позволяват на разработчиците да променят бързо промените и маржовете на своите сайтове.

Синтаксисът за новите класове е доста ясен, например добавяне на .m-a-0 клас свързва правило за стил задава полета на 0 от всички страни на дадения елемент (margin-all-0). Докато маржовете използват m- префикс, подложки са оформени с р- префикс. В документите за разработка можете да разгледате всички нови класове помощни интервали.

9. Подсказки и Popovers Осъществено от Tether

В подсказките на Bootstrap 4 и popovers се използва библиотеката на supercool Tether, двигател за позициониране, който прави възможно запазването на абсолютно позициониран елемент точно до друг елемент на същата страница. Това означава подсказки и popovers ще бъде автоматично поставен правилно на уебсайтовете на Bootstrap 4.

Не забравяйте, че тъй като Tether е JavaScript библиотека на трета страна, трябва отделно да го включите в HTML преди файла bootstrap.js.

10. Рефаксирани приставки за JavaScript

Екипът на разработчиците рефакторира всеки плъгин на JavaScript за новата версия, използвайки EcmaScript 6. С интелигентното използване на най-новите спецификации и най-новите подобрения, те възнамеряват да подобрят предния интерфейс..

Новият Bootstrap 4 също е преминал през други подобрения на JavaScript, като например проверка на типа на опцията, генерични методи, и Поддръжка на UMD, всички ще работят заедно, за да направят най-популярната рамка на фронтенда по-гладка от всякога.

Сега прочетете: 10 леки алтернативи на Bootstrap & Foundation