Боотстрап 4 Нев & Цоол Феатурес Иоу Лове

Следеће велико издање Боотстрап оквира је иза угла. Алфа верзија се већ може преузети са Боотстрап-овог развојног веб сајта, а изворни код је доступан и на Гитхуб-у.

Твиттер Боотстрап је тренутно најпопуларнији фронтенд оквир. То омогућава програмерима да брзо креирајте веб сајтове који су први и одговарајући. Боотстрап омогућава паметно коришћење стандардног ХТМЛ5, ЦСС3 и Јавасцрипт сучеља. Тренутно га користи више од 6 милиона сајтова на вебу.

Иако је Боотстрап 4 још увек у фази развоја (па је немојте користити на ливе сите-у), програмери су направили фантастичан посао. У овом посту ћемо погледати нову верзију која укључује многе сјајне могућности које ће сигурно бити поједноставити и побољшати радни процес развоја фронтенд-а.

1. Сасс уместо ЛЕСС

До сада је Боотстрап користио ЛЕСС као свог главног ЦСС препоцорца, али за ново велико издање, стилска правила ће бити рефацторед да Сасс, који је много више популаран међу фронтенд програмерима, има велику базу доприноситеља, углавном лакше за кориштење и нуди више могућности. Захваљујући моћном Либсасс Сасс Цомплиеру написаном на Ц / Ц++ Боотстрап 4 ће се компајлирати много брже него пре.

2. Нови Грид Тиер за мање екране

Боотстрап има софистицирани одговарајући мрежни систем који омогућава програмерима да циљају уређаје са различитим оквирима за приказ. Боотстрап 3 тренутно има 4 класа мреже за колоне, .цол-кс-КСКС за мобилне телефоне, .цол-см-КСКС за таблете, .цол-мд-КСКС за десктоп рачунаре и .цол-лг-КСКС за веће радне површине. Боотстрап 4 ће побољшати мрежу са петом која ће олакшати програмерима да циљајте мање уређаје испод 480пк ширине приказа.

Нова класа решетке је узела име претходног најмањег, и померила тренутна имена нивоа мреже према горе за један степен. У Боотстрап 4 велики десктоп ће користити .цол-кл-КСКС цласс селецтор. Важно је знати да упркос новом имену нису додали нову класу за екстра велике екране већ за екстра мале.

3. Представља релативне ЦСС јединице

Боотстрап 4 коначно испушта подршку за Интернет Екплорер 8. То је заиста паметан корак јер им омогућава да се ослободе досадних полифила и да се претворе у релативне ЦСС јединице. Уместо пиксела, нова главна издања ће користите РЕМс и ЕМс које омогућују имплементирати одговарајућу типографију на Боотстрап сајтовима. Ово ће такође повећати читљивост и учинити сајт приступачнијим за кориснике са инвалидитетом.

Ако желите да испробате како релативне јединице раде са новим Боотстрап 4, погледајте овај демо на Цодепен-у.

4. Бранд Нев Боотстрап картице

Развојни тим је одлучио да обједини неке претходне елементе корисничког интерфејса Боотстрап-а, па су одлучили да уведу а нова компонента корисничког интерфејса под називом Цардс. Картице ће замијенити бивше бушотине, сличице и панеле, те ће корисницима пружити још једноставнији тијек рада. Не брините, картице ће чувати познате елементе, као што су наслови, заглавља и подножја бунара, сличица и панела.

Пошто ће картице бити флексибилније од тренутних компоненти корисничког интерфејса, оне ће омогућити већи простор за креативне имплементације. Постоје неки пионири који су већ провели експерименте на Цодепен-у са Боотстрап картицама. Можете их проверити или креирати сопствене картице.

5. Нови Ребоот модул

Нови модул Ребоот замењује претходни нормализе.цсс ресет филе. То га не одбацује; напротив, она гради више правила о томе. Циљ овог потеза је био да се укључе сви генерички ЦСС селектори и ресетују стилови у а једнострука, једноставна СЦСС датотека. Овдје можете погледати изворни код ако желите боље разумјети како нови модул ради.

Добро је знати да нови стилови ресетовања паметно постављају ЦСС својство величине оквира бордер-бок на елемент, који је, дакле, наслеђен од стране сваког подређеног елемента на страници. Правило новог стила чини прилагодљиве распореде лакшим за руковање. Ако желите да искусите разлику између типова садржаја и оквира у оквиру граничног оквира, погледајте овај згодан демо који пружа ЦСС-Трицкс.цом (није направљен за Боотстрап 4, он само показује како се одређује величина кутије генерално ради).

6. Опт-ин Флекбок подршка

Боотстрап 4 омогућава коришћење ЦСС3 Флекбок Лаиоут-а - пошто Интернет Екплорер 9 не подржава флекбок модул - подразумевана верзија Боотстрап 4 користи флоат и ЦСС својства да имплементира распоред флуида.

Флекбок има једноставан за употребу распоред који се може одлично користити у дизајну који се прилагођава, јер пружа флексибилан контејнер који се или проширује или скупља како би попунио расположиви простор на најбољи начин. Користите само опцију опт-ин флекбок ако то желите немој треба да пруже подршку за ИЕ9.

7. Уређена прилагођавања променљивих

Све Сасс варијабле које се користе у новом издању Боотстрап-а су укључене у једну датотеку под називом _вариаблес.сцсс, која ће значајно поједноставити процес развоја. Не морате ништа друго осим да копирате поставке из ове датотеке у другу која се зове _цустом.сцсс да бисте променили подразумеване вредности.

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

8. Нове услужне класе за размак

Боотстрап 3 већ има многе практичне услужне класе као што су оне које мијењају плутајуће или цлеарфик, али Боотстрап 4 додаје још више. Тхе нове класе размака омогућити програмерима да брзо промене паддингс и маргине на својим сајтовима.

Синтакса за нове класе је прилично јасна, на пример додавање .Класа м-а-0 повезује правило стила поставља маргине на 0 на свим странама датог елемента (маргин-алл-0). Док маргине користе м- Префикс, облоге су обликоване са п- префикс. У развојним документима можете погледати све нове класе услужних простора.

9. Тоолтипс анд Поповерс Поверед би Тетхер

У Боотстрап 4 тоолтипс-у и поповерс-у се користи библиотека суперхладног Тетхер-а, механизам за позиционирање који омогућава да се апсолутно позиционирани елемент налази поред другог елемента на истој страници. То подразумева описе и искапања аутоматски ће бити правилно постављен на сајтовима Боотстрап 4.

Не заборавите да је Тетхер ЈаваСцрипт библиотека треће стране, морате је засебно укључити у ХТМЛ пре ваше боотстрап.јс датотеке.

10. Рефацторед ЈаваСцрипт Плугинс

Развојни тим је преправио сваки ЈаваСцрипт плугин за ново издање користећи ЕцмаСцрипт 6. Уз паметно коришћење најновијих спецификација и најновијих побољшања, они намеравају да побољшају искуство фронтенд-а..

Нови Боотстрап 4 је такође прошао кроз друга побољшања ЈаваСцрипта, као што је проверу типа опције, генеричке методе откидања, и УМД подршка, који ће сви заједно радити да би најпопуларнији фронтендни оквир функционисао глатко него икада раније.

Нов Реад: 10 Лигхтвеигхт Алтернативе Боотстрап & Фоундатион