Bootstrap (фронт-енд фрејмворк)

Бутстреп енгл. *Bootstrap*
	Бутстреп лого
	Пример веб-сајта који користи Бутстреп фрејмворк приказан у Мозила Фајерфоксу
Оригинални аутор(и)	Марк Ото; Џејкоб Торнтон
Програмер(и)	Бутстреп тим
Прво издање	19. август 2011.; пре 13 година
Стабилно издање	3.3.7 / 25. јул 2016.; пре 8 година
Прелиминарно издање	4.0.0-beta
Репозиторијум	github.com/twbs/bootstrap;
Написан у	HTML, CSS, Less (вер. 3), Sass (вер. 4) и JavaScript
Платформа	веб енџин
Тип	веб фрејмворк
Лиценца	МИТ лиценца (Апач лиценца вер. 2.0 до верзије Бутстреп 3.1.0)
Веб-сајт	https://getbootstrap.com, http://getbootstrap.com

Bootstrap (транскр. Бутстреп) представља бесплатни веб фрејмворк отвореног кода, за креирање веб сајтова и веб апликација. Базиран је на HTML и CSS шаблонима за типографију, креирању формулара, дугмади, навигационим и осталим компонентама интерфејса, као и опционим ЈаваСкрипт додацима. Циљ Бутстреп фрејмворка (енгл. framework) је олакшавање програмирања за веб.

Такође, Бутстреп је фрејмворк за веб апликације, тј. софтверски фрејмворк који је дизајниран тако да подржи развој динамичких веб сајтова и веб апликација.

Од маја 2015. овај пројекат је највише оцењиван пројекат на ГитХаб-у са преко 107.000 оцена и 48.000 форкова (енгл. fork).^[3]

Порекло

Бутстреп, првобитно назван Твитер Блупринт (енгл. Twitter Blueprint), су развили Марк Ото и Џејкоб Торнтон радећи за компанију Твитер, с намером да повећају конзистентност интерно коришћених алата. Пре Бутстрепа, коришћене су разне библиотеке за развој интерфејса, што је довело до недоследности и тешког одржавања. Марк Ото наводи:

Мала група програмера, заједно са мном, се удружила како би дизајнирали и изградили нов интерни алат и у томе смо видели прилику за нешто више. Током овог процеса, приметили смо да градимо нешто што је много значајније од обичног интерног алата. Након неколико месеци, завршили смо прву верзију Бутстрепа која је представљала један вид документовања и дељења заједничких дизајнерских шаблона и ресурса унутар компаније.^[4]

Након неколико месеци развоја, многи Твитер програмери су се придружили овом пројекту и допринели развоју кроз "Хак Вик" (енгл. Hack Week), недељу хакатона за развојни тим Твитера. Преименован је из Твитер Блупринта у Бутстреп и објављен је као пројекат отвореног кода, 19. августа, 2011.^[5] Након објављивања ове верзије, Марк Ото и Џејкоб Торнтон наставили су са одржавањем и развојем Бутстрепа. Поред њих, развоју такође доприноси и велики број програмера.^[6]

Дана 31. јануара 2012. године објављена је друга верзија Бутстрепа, која доноси прилагодљив дизајн са распоредом елемената у 12 колона, уграђену подршку за глификоне (енгл. Glyphicons), неколико нових компоненти као и промене у постојећим компонентама.^[7]

Бутстреп 3 је објављен 19. августа 2013. године, када је уведен флет дизајн (енгл. flat design) и принцип мобилни уређаји пре свега (енгл. mobile-first).^[8]

Дана 29. октобра 2014. године, Марк Ото је објавио развој Бустреп верзије 4.^[9] Прва алфа верзија Бутстрепа 4 објављена је 19. августа 2015. године.^[10]

Карактеристике

Бутстреп 3 је подржан у најновијим верзијама Гугл Хрома, Фајерфокса, Интернет Експлорера, Опере и Сафарија (осим на Microsoft Windowsу). Додатно је подржан и у Интернет Експлореру 8 и најновијем Фајерфокс издању са додатном подршком (енгл. Firefox Extended Support Release - ESR).^[11]

Од верзије 2.0 Бутстреп подржава прилагодљив веб дизајн (енгл. resposnive web design). Ово значи да се изглед веб стране динамички прилагођава, узимајући у обзир тип уређаја који се користи (десктоп рачунар, таблет, мобилни телефон).

Почевши од верзије 3.0, Бутстреп је усвојио принцип дизајна "мобилни уређаји пре свега", наглашавајући прилагодљив веб дизајн као подразумевану опцију.

Алфа верзија Бутстрепа 4 додала је подршку за Sass и CSS flexbox.

Сав кôд везан за Бутстреп доступан је и бесплатан на ГитХабу. Програмери се подстичу да учествују у овом пројекту и да сами допринесу његовом развоју.

Структура и функционалност

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

Од верзије 2.0, Бутстреп документација садржи посебан чаробњак за подешавање. Програмери могу да изаберу компоненте које желе да користе и, ако је потребно, подешавају вредности одређених опција према својим потребама.

Од верзије Бутстреп 4, користи се Sass стилски језик уместо Less-а.

Свака Бутстреп компонента се састоји од HTML структуре, CSS декларација и у неким случајевима ЈаваСкрипт кода.

Приказ у облику "решетке" (енгл. grid system) и прилагодљив дизајн су стандардне ширине од 1.170 пиксела. Алтернативно, приказ садржаја може да зависи од ширине прозора у коме се приказује. У оба случаја Бутстреп има четири начина за приказивање садржаја на различитим резолуцијама и типовима уређаја: мобилни телефони (усправно и положено), таблет рачунари и PC рачунари са мањом и већом резолуцијом. Сваки од начина приказа прилагођава ширину колона.

Стилови

Бутстреп обезбеђује скуп стилова који пружају основне дефиниције за све кључне HTML компоненте. Тиме се добија униформан, модеран приказ текста, табела и формулара.

Компоненте за поновну употребу

Поред основних HTML елемената, Бутстреп садржи и неке често коришћене елементе за формирање интерфејса. Они укључују дугмад са посебним функцијама (на пример груписање дугмади или дугмад са drop-down опцијом, навигационе листе, хоризонтални и вертикални табови, итд.), ознаке, напредне типографске могућности, поруке са упозорењима, прогресивне траке, и др. Компоненте су имплементиране као CSS класе, које морају бити везане за одређене елементе на веб страни.

ЈаваСкрипт компоненте

Бутстреп у основи садржи неколико ЈаваСкрипт компоненти у облику џејКвери додатака. Они пружају додатне елементе за кориснички интерфејс као што су дијалог боксови, описи алатки (енгл. tooltips) и карусели (енгл. carousel). Они такође проширују функционалност неколико постојећих елемената, укључујући, на пример, функцију за аутоматско попуњавање поља за унос. У верзији 2.0, подржани су следећи ЈаваСкрипт додаци: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel и Typeahead.

Бутстреп 4

Дана 29. октобра 2014. године, Марк Ото је објавио развој Бустреп верзије 4.^[9] 6. септембра 2016. године, Марк је прекинуо рад на Бутстрепу 3 како би имао времена за развој Бутстрепа 4. Преко 4.000 комита је постављено за код Бутстрепа 4 до сад.

Бутстреп 4 је скоро у потпуности преписан из Бутстрепа 3. Значајне промене су:

прелазак са Sass-а на Less
Престанак подршке за Интернет Експлорер 8 и 9 као и за iOS 6
Додата подршка за flexbox
Прелазак са пиксела на rem
Повећана је глобална величина фонта са 14 на 16 пиксела
Избачене су компоненте panel, thumbnail и well које је заменила card компонента
Престанак подршке за глификон фонт са иконицама
Избачена је компонента pager
Скоро све компоненте, џејКвери додаци и документација су поново написани

Види још

Прилагодљив веб дизајн

Референце

^ Rebert, Chris (25. 7. 2016). „Bootstrap 3.3.7 released”. Архивирано из оригинала 23. 11. 2016. г. Приступљено 23. 2. 2017.
^ Ото, Марк (10. 8. 2017). „Бутстреп 4 Бета”.
^ „Search · stars:>1”. GitHub. Приступљено 23. 2. 2017.
^ Otto, Mark (17. 1. 2012). „Bootstrap in A List Apart No. 342”. Mark Otto's blog. Архивирано из оригинала 28. 10. 2016. г. Приступљено 23. 2. 2017.
^ Otto, Mark (19. 8. 2011). „Bootstrap from Twitter”. Developer Blog. Twitter. Архивирано из оригинала 23. 2. 2017. г. Приступљено 23. 2. 2017.
^ „About”. Bootstrap. Приступљено 23. 2. 2017.
^ Otto, Mark (31. 1. 2012). „Say hello to Bootstrap 2.0”. Developer Blog. Twitter. Архивирано из оригинала 23. 2. 2017. г. Приступљено 23. 2. 2017.
^ Otto, Mark (19. 8. 2013). „Bootstrap 3 released”. Архивирано из оригинала 23. 10. 2016. г. Приступљено 23. 2. 2017.
^ ^а ^б Otto, Mark (29. 10. 2014). „Bootstrap 3.3.0 released”. Архивирано из оригинала 24. 7. 2016. г. Приступљено 23. 2. 2017.
^ Otto, Mark (19. 8. 2015). „Bootstrap 4 alpha”. Архивирано из оригинала 23. 01. 2017. г. Приступљено 23. 2. 2017.
^ „Supported browsers”. Bootstrap. Приступљено 23. 2. 2017.

Спољашње везе

Бутстреп - Званични веб-сајт, садржи документацију и материјал за преузимање
Бутстреп блог - Званични блог који води један од оснивача пројекта, Марк Ото

[v3.3.7-release-1] Rebert, Chris (25. 7. 2016). „Bootstrap 3.3.7 released”. Архивирано из оригинала 23. 11. 2016. г. Приступљено 23. 2. 2017.

[v4.0.0-beta-release-2] Ото, Марк (10. 8. 2017). „Бутстреп 4 Бета”.

[most-starred-3] „Search · stars:>1”. GitHub. Приступљено 23. 2. 2017.

[bootstrap_a_list_apart-4] Otto, Mark (17. 1. 2012). „Bootstrap in A List Apart No. 342”. Mark Otto's blog. Архивирано из оригинала 28. 10. 2016. г. Приступљено 23. 2. 2017.

[v1-release-5] Otto, Mark (19. 8. 2011). „Bootstrap from Twitter”. Developer Blog. Twitter. Архивирано из оригинала 23. 2. 2017. г. Приступљено 23. 2. 2017.

[about-6] „About”. Bootstrap. Приступљено 23. 2. 2017.

[v2-release-7] Otto, Mark (31. 1. 2012). „Say hello to Bootstrap 2.0”. Developer Blog. Twitter. Архивирано из оригинала 23. 2. 2017. г. Приступљено 23. 2. 2017.

[v3-release-8] Otto, Mark (19. 8. 2013). „Bootstrap 3 released”. Архивирано из оригинала 23. 10. 2016. г. Приступљено 23. 2. 2017.

[v3.3.0-release-9] а ^б Otto, Mark (29. 10. 2014). „Bootstrap 3.3.0 released”. Архивирано из оригинала 24. 7. 2016. г. Приступљено 23. 2. 2017.

[v4.0.0-alpha-release-10] Otto, Mark (19. 8. 2015). „Bootstrap 4 alpha”. Архивирано из оригинала 23. 01. 2017. г. Приступљено 23. 2. 2017.

[supported-browsers-11] „Supported browsers”. Bootstrap. Приступљено 23. 2. 2017.

[1]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]