Од август 2011, кога за прв пат беше објавен Bootstrap, тој стекна огромна популарност во светот на веб дизајнот и веб развојот. Ако се сетиме дека почна со стил кој е целосно воден од CSS листи за стил, а прерасна во моќна, мобилна, прилагодлива, Front-End работна рамка, со многу нови опции, меѓу кои хост за JavaScript додатоци, алатки и икони, рака под рака со форми и повеќе компоненти, може со сигурност да кажеме дека Bootstrap многу напредна.
Во овој текст ќе зборуваме за Bootstrap 4 со алфа верзија која е некомплетна верзија и не е сеуште прилагодена за продукција. Во оваа верзија има големи измени. На располагање ви се многу новододадени опции, и опции за прилагодување.
Иако можеби постојат некои несогласувања за тоа која е најдобрата CSS работна рамка, сепак скоро секој веб дизајнер ќе се согласи дека може да изгради скоро сé со Bootstrap, а и останатите, особено ако одвојат време да го деконфигуриираат предодреденото нанесување на стил на Bootstrap.
Зошто дизајнерите го сакаат Bootstrap
Ако сте дизајнер, најверојатно уживате во дизајните направени врз основа на Bootstrap работната рамка. Еве неколку причини зошто дизајнерите го сакаат Bootstraps:
- Бесплатен е. Bootstrap е open source. Нема потреба да ја вадите кредитната картичка.
- Моќен систем на мрежа. Bootstrap ви ја дава на располагање најдобрата прилагодлива и мобилна мрежа. Лесно се употребува и е флексибилен, а тоа ви дозволува да креирате прототипи на распореди и лесно да прилагодувате.
- Прилагодување. Bootstrap е може целосно да се прилагоди според вашите потреби. Тоа значи дека може да креирате најразлични дизајни од него, притоа напуштајќи го основниот изглед на Bootstrap образците. CSS и JavaScript може да бидат презапишани, па затоа не е никаков прблем да работите со него.
- Брз развој. Bootstrap нуди CSS и JavaScript компоненти кои може да се реупотребуваат за лесно да ја креирате функционалноста и елементите кои ви се потребни за вашите дизајни.
- Одлична документација. Bootstrap има одлична документација која ќе ви помогне да го разберете секој дел од работната рамка, независно дали сте почетник или професионалец.
Работи кои дизајнерите треба да ги знаат за Bootstrap 4
Како дизајнер, вреди да ги научите опциите за вести и ажурирања. Можеби мислите поинаку, но јас не мислам дека е губење време да се научат работите кои ви се потребни за да креирате веб сајтови врз основа на Bootstrap.
Боја
Bootstrap 4 доаѓа со четири главни бои. Овие бои доаѓаат со нивните соодветни класи и префикси кои може да се употребуваат врз различни компоненти, како на пр. копчиња, линкови, предупредувања. Погледнете ја сликата долу:
Забелешка: Во Bootstrap 3, класата “btn-secondary” е “предодредена” класа.
Системот на мрежа веќе нe е во пиксели
Во Bootstrap верзиите 1-3, мрежите се мереа со пиксели. Меѓутоа, во Bootstrap 4, мрежите се мерат во ems и rems. Така, ако работите на дизајн за распоред во Photoshop би ви помогнало ако може да видите кои се еквивалентните мерки на ems во пиксели.
Белина за подврзување
Bootstrap обично доаѓа со ширина на белина за подврзување од по 15 пиксели од секоја страна на колоната. Ова значи дека дополнувањето за лево и десно за колоната од секоја страна ќе биде по 15 пиксели, и маргината од лево и десно за редицата ќе биде 15 пиксели. Тоа ви дава идеја како ќе биде распределен празниот простот на секоја колона во вашиот дизајн.
Една добра работа за Bootstrap 4 е што ви дозволува да прилагодувате и компајлирате сопствена градба според вашите потреби. Ова вклучува боја, големина на елемент и допоплнување на белина за подврзување. Често сакате да селектирате колона и да отстраните дополнување со CSS. Може да креирате свој селектор на класа по потреба за ова набрзина да го постигнете. Погледнете го примерот од код подолу:
.no-gutter > [class*=’col-‘] {
padding-right:0;
padding-left:0;
}
Подобрена навигациска лентаНајтешката работа кај Bootstrap 3 е навигациската лента. Тешко се разбира, бидејќи потребно е да додадете многу класи за да ја креирате. Дополнително, треба да одите во вашето CSS за да ги прилагодите боите и стиловите.
Во Bootstrap 4, многу од класите се отстранети и додадени се повеќе опции во шемите со бои. Ова ви дава повеќе опции за контрола на распоредот на навигацијата на веб сајтот. Може да ја погледнете документацијата овде, ако сакате да научите повеќе.
Може да се активира Opt-in Flexbox за прилагодлив дизајн
Bootstrap 4 им овозможува на корисниците да го употребуваат Flexbox Layout режимот на CSS3. Flexbox е режим на распоред на страница кој нуди поставување на елементите за дизајн прилагодлив на резолуцијата на екранот. Обезбедува флексибилен елемент и овозможува неговата големина да се шири и собира на различни ширини на прозорци за приказ.
Иако ова е одлична работа за сите дизајнери кои се обидуваат да направат прилагодливи дизајни, сепак, е работи само на прелистувачи кои се понови од Internet Explorer 9.
Оптимизира стилови со употреба на SASS наместо на LESS
Bootstrap 3 употребуваше LESS како главен CSS претпроцесор, но се префрли на SASS преку Libsass Sass Complier напишан во C/C++ Bootstrap 4.
Сега може да прилагодувате стилови, како на пр. бои, проред, стилови на линк, типографија, табели, точки на прекин за мрежа и елементи содржатели преку _variables.scss датотека.
Заклучок
Иако Bootstrap е само еден од многуте работни рамки кои ни се на располагање, а со кои може да креираме прилагодливи и мобилни веб сајтови, тој нуди многу можности за дизајнерите. Ако сте запознаени со ажурирањата и новите компоненти, сето ова ќе може да го употребите уште полесно.
