Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

През последните няколко години навиците на сърфиране на крайните потребители са се развили, за да включват различни устройства. В резултат на това отзивчивият уеб дизайн е необходимост за всеки уебсайт, който е разработен днес. Създаването на отзивчив дизайн от нулата за всеки проект може да отнеме време. Едно страхотно решение, което улеснява живота ви, е да използвате CSS рамка. Такава рамка се грижи за основните отзивчиви принципи на дизайна за вас. В това сравнение разглеждаме някои от най-добрите CSS рамки там и виждаме коя е най-добрата. Ето Bootstrap срещу Foundation срещу Bulma срещу Semantic срещу UIkit.


Тази публикация ви помага да изберете правилната CSS рамка за следващия си проект. Предполагам, че имате основни познания за front-end технологии и отзивчиви принципи в уеб дизайна. Всяка CSS рамка е тествана, за да покрие различни аспекти на Bootstrap срещу Foundation срещу Bulma срещу Semantic срещу UIkit. Обхващам произхода на всяка рамка и основните характеристики на нея. Също така ви давам бързо ръководство за стартиране за всяка рамка.

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

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

  • № за зареждане
  • Фондация №
  • Bulma #
  • Семантичен №
  • UIkit #

за първоначално зареждане (Getbootstrap.com)

Bootstrap vs

Bootstrap е отзивчива, мобилна първа CSS рамка за бързо разработване на уебсайтове. Това е най-популярната CSS рамка в този списък, с над 130 000 звезди в GitHub. Bootstrap съдържа готови за употреба компоненти, разработени с HTML, CSS и JavaScript.

Bootstrap първоначално е разработен в Twitter през 2011 г., но в крайна сметка еволюира в независим проект. Текущата стабилна версия е 4.3. Bootstrap 5, който в момента е в разработка, ще замести използването на jQuery с ванилна JS, ще падне поддръжката за остарели браузъри и ще промени текущата платформа за тестване.

За да използвате Bootstrap, трябва да направите следното, когато създавате нова уеб страница:

  • Използвайте HTML5 доктипа
  • Създайте мета маркер за изглед
  • Импортирайте CSS Bootstrap в своя таг за глава
  • Импортирайте скриптове в реда на jQuery, Popper.js и след това bootstrap.min.js, за да използвате някоя от JavaScript на функционалността на Bootstrap

Ето шаблон за начало.




В този урок ще използваме CDN хоствани версии на ресурси (CSS и JS файлове) за тези рамки. Ето бърз старт ръководство на Bootstrap.

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

Най-големият недостатък на Bootstrap е увеличаването на теглото на страницата. Въпреки че няколкостотин килобайта може да не са значителни в свят, в който средният размер на страницата е около 2MB, това може да засяга разработчици, които се стремят към най-висока ефективност. Зависимостта от jQuery предизвиква безпокойство, въпреки че е окуражаващо да се знае, че премахването на jQuery е част от пътната карта за Bootstrap 5.

�� плюсове:

  • Мобилна първа, отзивчива рамка за уеб дизайн
  • Добра обществена подкрепа и документация

�� Минуси:

  • Голям размер на зависимост (~ 300KB)
  • Зависимост от jQuery за някои компоненти да работят

Bootstrap трябва да бъде вашата възможност за преминаване към търсенето на стабилна платформа с добра поддръжка. Това е правилният избор, ако не искате да се занимавате много с компонентите по подразбиране. Bootstrap е идеален за тези, които искат бързо да итератират решения в пъргава среда.

фундамент (Foundation.zurb.com)

фондация срещу

Фондацията, пусната за първи път в рамките на един месец от Bootstrap през 2011 г., е клас на фронталните рамки за не само уебсайтове, но и приложения и имейли! Нека да видим как Bootstrap срещу Foundation се подреждат!

Точно като Bootstrap в Twitter, Foundation стартира като вътрешен инструмент на фондация Zurb, а след това в крайна сметка беше пуснат като рамка. Изходният код на Фондацията е с отворен код, с акцент върху първоначалните мобилни дизайни. Фондацията има подобна мрежа на Bootstrap с 12 колони за избор. Освен това, JavaScript също не е задължителен!

Широките стъпки за използване на Foundation на вашия уебсайт са следните:

  • Изтеглете Ресурси на фондацията
  • Използвайте HTML5 доктипа
  • Добавете CSS файла на Foundation в тага на главата
  • Включете jQuery, скриптове на what-input.js и Foundation
  • Точно преди да прекратите етикета на тялото, извикайте функцията Foundation (), за да прикачите свойствата на Foundation към различни DOM елементи

Ето шаблон за бърз старт:

$ (Документ) .foundation ();

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

Когато се опитваме да сравним Bootstrap с Foundation, се появяват няколко неща. Bootstrap предлага повече поддръжка от общността, малко по-лесно е да работите и ви дава широк спектър от теми, от които да избирате, когато се взирате. Фондацията, от друга страна, ви дава повече контрол и свобода над вашите компоненти, без да е необходимо да добавяте класове към DOM елементи – тъй като свойствата са свързани с компоненти. Също така, тъй като Фондацията е в развитие от няколко години, тя предоставя много функции за достъпност.

�� плюсове:

  • Мобилна първа, отзивчива рамка за уеб дизайн
  • Осигурява поддръжка на приложения и имейли

�� Минуси:

  • Голям размер на зависимост като Bootstrap
  • Огромен брой функции, които могат да затрупат начинаещи

Функционалността между Bootstrap срещу Foundation не се променя значително и няма да загубите много, когато изберете една от двете платформи. Като се има предвид, вероятно трябва да отидете с Foundation, ако искате повече контрол над вашия проект.

Може да се заинтересувате и от тези статии:

  • Най-добри ъглови шаблони на таблото за администратор

Bulma (Bulma.io)

bulma vs

Bulma е лесна CSS рамка с отворен код, базирана на Flexbox.

Въпреки че не е съвсем на ниво Bootstrap, Bulma е доста популярен проект на GitHub с над 35 000 звезди.

Bulma е проектирана да реагира на първа мобилна рамка с допълнителен акцент върху модулността.

За да използвате Bulma във вашия проект, трябва да следвате тези стъпки:

  • Добавете HTML5 доктипа
  • Добавете мета маркер за отзивчив прозорец
  • Включете CSS файла Bulma в своя таг за глава
  • [Незадължително] Добавете сценария на фонтаните, за да използвате икони

Ето шаблон:

Връщайки се към дебата за Bootstrap срещу Foundation срещу Bulma, Bulma има по-нежна крива на обучение. Значителна разлика на Bulma по отношение на Bootstrap и Foundation е единственият фокус върху CSS, без JavaScript елементи в рамката. Изключването на JavaScript прави и рамката лека. По отношение на достъпността, Булма е само частично достъпна, въпреки че общността редовно предоставя подкрепа.

�� плюсове:

  • Лека рамка, базирана на флексбокс
  • Модулните елементи позволяват гъвкавост

�� Минуси:

  • Без JavaScript елементи
  • Ограничена поддръжка за достъпност

Като разработчик трябва да изберете Bulma, ако искате да използвате лека рамка, която ви помага да създавате отзивчиви елементи за мрежата. Съществува значителна подкрепа за рамката, която да ви помогне, ако се забиете в процеса.

семантичен (Semantic-ui.com)

семантичен срещу

Semantic е CSS рамка с цел създаване на интуитивни потребителски интерфейси.

Тази рамка използва имена на класове, които са очевидни, за да улеснят процеса на обучение. Класовете по Semantic са вдъхновени от английския език за свързване на логическите понятия с имената на класовете.

За да използвате семантични компоненти във вашия проект, трябва да изпълните следните стъпки:

  • Включете HTML5 дотипа
  • Заредете семантичния CSS файл
  • Включете jQuery, преди да извикате JavaScript елементи
  • Включете сценария на Semantic

Ето шаблон:

За да сравните Semantic с Bootstrap с Foundation и другите, ще забележите, че въпреки интуитивните условности за именуване, Semantic не достига по сложност за усвояване. Документацията е обширна, но отнема известно време, за да свикнете. Интеграцията с JavaScript рамки като Angular и React е добра, което го прави идеален за използване в приложение, което включва използването на тези рамки.

�� плюсове:

  • Интуитивни имена на класове
  • Интеграция с JavaScript рамки

�� Минуси:

  • Може да не изпълни нуждата от големи проекти
  • Ограничена подкрепа от общността

Semantic е рамката, която има сравнително по-лесна крива на обучение и също поддържа JavaScript рамки. Ако вашите изисквания включват използването на JavaScript, определено трябва да обмислите използването на тази рамка в следващия си проект.

UIkit (Getuikit.com)

uikit vs

UIkit е модерна, лека рамка с огромен акцент върху модулността за създаване на уеб интерфейси.

Това е сравнително нова рамка с отворен тип с около 15 000 звезди на GitHub. UIkit ви помага да създавате отзивчиви дизайни, с автоматизирано непрекъснато внедряване в BrowserStack.

За да използвате компоненти на UIkit във вашия проект, трябва да изпълните следните стъпки:

  • Включете HTML5 дотипа
  • Заредете UIkit CSS файла
  • Включете скриптове на UIkit за функционалност и икони

Ето шаблон:

UIkit има значителен брой функции, ако го сравняваме с Bootstrap vs Foundation срещу Bulma. Въпреки че има JavaScript елементи, UIkit няма зависимост от jQuery, което прави полезния товар за крайния потребител по-малък. Определено стои рамо до врата с тези рамки по отношение на бързо итерационни версии на вашите уеб приложения в гъвкава среда за разработка.

�� плюсове:

  • Съсредоточете се върху модулността, което улеснява работата с тях
  • Елементите са адаптивни, което води до гъвкавост

�� Минуси:

  • Ограничена документация и поддръжка на общността

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

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit: заключителни мисли

За да обобщим това, за което говорихме в това сравнение на най-добрите CSS рамки:

  • Ако искате безпроблемно решение, което има много поддръжка, отидете на Bootstrap
  • За да получите повече свобода на компонентите си, изпробвайте Foundation
  • За да осигурите леко допълнение към вашия проект, опитайте Bulma или UIkit
  • Ако вашето уеб приложение използва тежки рамки на JavaScript, трябва да изберете Semantic

Коя CSS рамка използвате през 2020 г.? Уведомете ни в коментарите по-долу!

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление, презентация и редакция от Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map