Бутстреп (фронт-енд фрејмворк)

Из Википедије, слободне енциклопедије
Бутстреп енгл. Bootstrap
Boostrap logo.svg
Бутстреп лого
Twitter Bootstrap Under Firefox 32.png
Пример веб-сајта који користи Бутстреп фрејмворк приказан у Мозила Фајерфоксу
Првобитни
аутор(и)
Марк Ото
Џејкоб Торнтон
Развијач(и) Бутстреп тим
Прва верзија 19. август 2011. год.; пре 6 година (2011-08-19)
Најновија
верзија
3.3.7
25. јул 2016. год.; пре 16 месеци (2016-07-25)[1]
Предверзија 4.0.0-beta
11. август 2017. год.; пре 4 месеца (2017-08-11)[2]
Статус развоја активан
Писано у HTML, CSS, Less (вер. 3), Sass (вер. 4) и JavaScript
Платформа веб енџин
Тип веб фрејмворк
Лиценца МИТ лиценца (Апач лиценца вер. 2.0 до верзије Бутстреп 3.1.0)
Веб-сајт 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 је подржан у најновијим верзијама Гугл Хрома, Фајерфокса, Интернет Експлорера, Опере и Сафарија (осим на Виндоусу). Додатно је подржан и у Интернет Експлореру 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
  • Скоро све компоненте, џејКвери додаци и документација су поново написани

Види још[уреди]

Референце[уреди]

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

Спољашње везе[уреди]

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