1.Бутстрап.....................................................................................................................................................

6
Шта је то бутстрап..................................................................................................................................6
Од чега се састоји....................................................................................................................................6
Шта пружа-које су му могућности.........................................................................................................6
Будућност Бутстрапа...............................................................................................................................7
Које знање је потребно............................................................................................................................7
Начин рада................................................................................................................................................7
Како и где преузети пакет Бутстрапа.....................................................................................................8
Како почети са радом...........................................................................................................................9
Шта нас очекује у Бустрапу..................................................................................................................16
Класе у бутстрапу..................................................................................................................................19
Мало детаљније о класама................................................................................................................20
2.Организација простора на страницама.................................................................................................28
Контејнери..............................................................................................................................................28
Класа container....................................................................................................................................28
Класа .container-fluid..........................................................................................................................29
Редови .row.........................................................................................................................................29
Колоне.....................................................................................................................................................30
Грид систем бутстрапа.......................................................................................................................31
Класе .pull и .push..............................................................................................................................33
Класа jumbotron..................................................................................................................................34
3.Елементи веб странице...........................................................................................................................35
Менији или изборници..........................................................................................................................36
.nav.......................................................................................................................................................36
.nav .navbar-nav...................................................................................................................................36
.nav nav-pills........................................................................................................................................36
.nav nav-tabs........................................................................................................................................36
.nav-justified........................................................................................................................................36
.nav-stacked.........................................................................................................................................37
.nav-tabs...............................................................................................................................................37
.navbar..................................................................................................................................................37
.navbar-brand.......................................................................................................................................37
.navbar-btn...........................................................................................................................................37
.navbar-collapse...................................................................................................................................37
.navbar-default.....................................................................................................................................37
.navbar-fixed-bottom...........................................................................................................................37
.navbar-fixed-top..................................................................................................................................37
.navbar-form.........................................................................................................................................37
.navbar-header......................................................................................................................................37
.navbar-inverse.....................................................................................................................................37
.navbar-left...........................................................................................................................................37
.navbar-link..........................................................................................................................................37
.navbar-nav...........................................................................................................................................37
.navbar-right.........................................................................................................................................37
.navbar-static-top.................................................................................................................................37
.navbar-text..........................................................................................................................................37
 .navbar-toggle......................................................................................................................................37
.icon-bar...............................................................................................................................................37
Класа дропдовн или падни доле.......................................................................................................38
.dropdown............................................................................................................................................38
.dropdown-header................................................................................................................................38
.dropdown-menu..................................................................................................................................38
.dropdown-menu-right.........................................................................................................................38
.dropdown-menu-left...........................................................................................................................38
.dropdown-toggle.................................................................................................................................38
Класа покажи навише или растегни на горе...................................................................................38
.dropup.................................................................................................................................................39
.caret.....................................................................................................................................................39
Још о менијима...................................................................................................................................39
Панели.....................................................................................................................................................40
Класе за обојење панела у Бутстрапу.............................................................................................42
Табови.....................................................................................................................................................43
.tab-content..........................................................................................................................................43
.tab-pane...............................................................................................................................................43
Класа Модал...........................................................................................................................................44
.modal..................................................................................................................................................45
.modal-body.........................................................................................................................................45
.modal-content.....................................................................................................................................45
.modal-dialog.......................................................................................................................................45
.modal-footer........................................................................................................................................45
.modal-header......................................................................................................................................45
.modal-lg..............................................................................................................................................45
.modal-open.........................................................................................................................................45
.modal-sm............................................................................................................................................46
.modal-title...........................................................................................................................................46
4.Рад са текстом..........................................................................................................................................46
.text-capitalize......................................................................................................................................46
.text-center...........................................................................................................................................46
.text-danger..........................................................................................................................................46
.text-hide..............................................................................................................................................46
.text-info...............................................................................................................................................46
.text-justify...........................................................................................................................................46
.text-left................................................................................................................................................46
.text-lowercase.....................................................................................................................................46
.text-muted...........................................................................................................................................46
.text-nowrap.........................................................................................................................................46
Класа .lead...............................................................................................................................................48
5. Рад са сликама........................................................................................................................................48
Класа img............................................................................................................................................48
Клизеће слике.........................................................................................................................................50
Карусел класа.........................................................................................................................................50
.carousel...............................................................................................................................................51
 .carousel-caption..................................................................................................................................51
.carousel-control..................................................................................................................................51
.carousel-indicators..............................................................................................................................51
.carousel-inner......................................................................................................................................51
.center-block.........................................................................................................................................51
.icon-next.............................................................................................................................................51
.icon-prev.............................................................................................................................................51
Класа .left............................................................................................................................................51
Класа .right..........................................................................................................................................51
.item.....................................................................................................................................................51
Медија и видео садржаји......................................................................................................................52
Класа медија...........................................................................................................................................52
.media...................................................................................................................................................53
.media-body.........................................................................................................................................54
.media-heading.....................................................................................................................................54
.media-list............................................................................................................................................54
Видео садржаји..................................................................................................................................55
6.Остало......................................................................................................................................................56
Класа листи.............................................................................................................................................56
.list-group.............................................................................................................................................57
.list-group-item....................................................................................................................................57
.list-group-item-danger........................................................................................................................57
.list-group-item-heading......................................................................................................................57
.list-group-item-info.............................................................................................................................57
.list-group-item-success.......................................................................................................................57
.list-group-item-text.............................................................................................................................57
.list-group-item-warning......................................................................................................................57
.list-inline.............................................................................................................................................57
.list-unstyled.........................................................................................................................................58
Класа прогрес.........................................................................................................................................58
Прогрес бар без анимације...............................................................................................................58
Стрипед бар........................................................................................................................................58
Класа Лабела..........................................................................................................................................59
.label.....................................................................................................................................................59
.label-danger........................................................................................................................................59
.label-info.............................................................................................................................................59
.label-success.......................................................................................................................................59
.label-warning......................................................................................................................................59
.control-label........................................................................................................................................59
Класа за боље приказивање садржаја..................................................................................................61
.embed-responsive...............................................................................................................................61
.embed-responsive-16by9....................................................................................................................61
.embed-responsive-4by3C...................................................................................................................61
.embed-responsive...............................................................................................................................61
Класа has-................................................................................................................................................61
.has-danger...........................................................................................................................................62
 .has-feedback.......................................................................................................................................62
.has-success..........................................................................................................................................62
.has-warning.........................................................................................................................................62
Класа Табеле...........................................................................................................................................63
.table.....................................................................................................................................................63
.table-bordered.....................................................................................................................................63
.table-condensed..................................................................................................................................63
.table-hover..........................................................................................................................................63
.table-responsive..................................................................................................................................63
.table-striped........................................................................................................................................63
.table-bordered.....................................................................................................................................63
Класа Форме...........................................................................................................................................64
.form-control........................................................................................................................................64
.form-control-feedback........................................................................................................................64
.form-control-static..............................................................................................................................66
.form-group..........................................................................................................................................66
.form-horizontal...................................................................................................................................66
.form-inline..........................................................................................................................................66
Класа Buttons..........................................................................................................................................68
Класа Пејџер..........................................................................................................................................70
.page-header.........................................................................................................................................70
.pager....................................................................................................................................................70
Класа иконице icon................................................................................................................................71
.glyphicon............................................................................................................................................71
Класа .sr-only......................................................................................................................................71
Класа .sr-only-focusable.....................................................................................................................71
Класа .visible-*.......................................................................................................................................71
Класа вел well.........................................................................................................................................72
Класа улаза .input...................................................................................................................................72
.input-group..........................................................................................................................................72
.input-group-addon..............................................................................................................................73
.input-group..........................................................................................................................................73
.input-group-btn...................................................................................................................................73
.input-group..........................................................................................................................................73
Класе сакривања садржаја....................................................................................................................73
.hidden..................................................................................................................................................73
.hidden-*..............................................................................................................................................73
.hidden-print.........................................................................................................................................73
.hide......................................................................................................................................................73
Класа за хоризонталну поделу..............................................................................................................73
.divider.................................................................................................................................................73
.dl-horizontal........................................................................................................................................73
Класа искључења приказа елемента странице....................................................................................74
.disabled...............................................................................................................................................74
.active...................................................................................................................................................74
.affix.....................................................................................................................................................74
 .caption.................................................................................................................................................74
Чекбокс класа.........................................................................................................................................74
.checkbox.............................................................................................................................................74
.checkbox-inline...................................................................................................................................74
Класа .clearfix.........................................................................................................................................74
Класа .close.............................................................................................................................................74
Класа .danger...........................................................................................................................................74
.fade..........................................................................................................................................................74
.h1 - .h6....................................................................................................................................................74
Класе невидљиво и итем.....................................................................................................................74
.invisible...............................................................................................................................................75
Класа .mark.............................................................................................................................................75
Класе за позиционирање.......................................................................................................................75
.pull-left................................................................................................................................................75
.pull-right.............................................................................................................................................75
.right.....................................................................................................................................................75
.row......................................................................................................................................................75
.show....................................................................................................................................................75
Класа .success.........................................................................................................................................75
Класа .pre-scrollable...........................................................................................................................75
Пагинација..............................................................................................................................................75
Класа Breadcrumbs.................................................................................................................................77
Класа .info...........................................................................................................................................78
Класа .initialism..................................................................................................................................78
Класа .badge............................................................................................................................................78
Тул тип (tooltip)......................................................................................................................................79
Класа Поповер........................................................................................................................................80
.collapse...................................................................................................................................................82
.collapse in...............................................................................................................................................82
Упозорења - .alert класа.........................................................................................................................82
.alert-dismissable.................................................................................................................................82
.alert-info..............................................................................................................................................82
.alert-success........................................................................................................................................82
.alert-warning.......................................................................................................................................82
7.Јквери - jquery..........................................................................................................................................85
Шта је jQuery?....................................................................................................................................86
Како га уључити у код странице.......................................................................................................86
Јава скрипт у бутстрапу.....................................................................................................................87
JS Affix (affix.js).................................................................................................................................87
JS Alert (alert.js)..................................................................................................................................87
JS Button (button.js)............................................................................................................................87
JS Carousel (carousel.js)......................................................................................................................87
JS Collapse (collapse.js)......................................................................................................................87
JS Dropdown (dropdown.js)................................................................................................................88
JS Modal (modal.js).............................................................................................................................88
JS Popover (popover.js).......................................................................................................................88
 JS Scrollspy (scrollspy.js)....................................................................................................................88
JS Tab (tab.js).......................................................................................................................................89
JS Tooltip (tooltip.js)...........................................................................................................................89
8 Практични примери и објашњења........................................................................................................89
Организација простора на страници....................................................................................................89
Правила лепог писања.......................................................................................................................89
Пример први.......................................................................................................................................91
Исти пример1 само са оваквим приказом........................................................................................93
Пример други.....................................................................................................................................94
Састав странице.....................................................................................................................................95
Хедер...................................................................................................................................................95
Мало објашњења................................................................................................................................98
Лого.....................................................................................................................................................99
Логин на десној страни...................................................................................................................101
Израда логин форме.........................................................................................................................102
Форма за контакте............................................................................................................................104
Форма претраге................................................................................................................................116
Укључивање карусела у примерима...............................................................................................117
Галерија слика..................................................................................................................................122
Подешавање атрубута дугмадима...................................................................................................125
Фонтови и јава скриптови у бутстрапу..........................................................................................126
Јава скрипт у бутстрапу...................................................................................................................126
Пример таб панели...........................................................................................................................128
Пример примене таб панела...........................................................................................................131
Рад странице са таб панелима........................................................................................................131
Вертикални таб панели....................................................................................................................132
Израда странице таб панелима.......................................................................................................135
Додавање футера..............................................................................................................................138
Додавање елемената у футер..........................................................................................................139
Готов пример веб сајта на једној страници.......................................................................................144
Повезивање на социјалне мреже....................................................................................................154
Галерија слика......................................................................................................................................155
Како ово све ради.............................................................................................................................156
Комплетан пример примене досадашњег учења..............................................................................159
Фиксирани линкови.........................................................................................................................165
Хедер странице................................................................................................................................166
Клизач за приказ слика....................................................................................................................168
Објашењење кода клизача за приказ слика...................................................................................169
Контрола слајдова............................................................................................................................170
Показивачи или индикатори...........................................................................................................170
Повезивања слика у каруселу.........................................................................................................171
Дугме падајући мени.......................................................................................................................172
Панели...............................................................................................................................................173
Глерија слика....................................................................................................................................174
Примена модала...............................................................................................................................177
Контакт панел...................................................................................................................................179
 Гео локација валасника....................................................................................................................180
Падајући мени који се отвара на доле............................................................................................180
Последња страна..............................................................................................................................185
О настанку ове књиге..........................................................................................................................185
Рецензија...........................................................................................................................................187
Корисни линкови..............................................................................................................................187
https://www.w3schools.com/bootstrap/default.asp............................................................................187
Download Bootstrap Tutorial - TutorialsPoint...................................................................................187

1.Бутстрап
Шта је то бутстрап
Боотстрап је производ за употребу (open source). Направили су га Mark Otto (Марк
Отто) и Jacob Thornton (Џекоб Тхорнтон) који, када су почетку његовог
објављивања, обојица били запослени на Твиттер-у. Разлог је постојање потребе за
стандардизацијом и једноставнијим и лакшим начином израде веб сајтова.
Ако погледамо око себе приметићемо да нам се свуда нуде неки окови, калупи,
поробљавања. Први пут се појавило нешто што нуди потпуну слободу дајући нам
могућност да наше идеје се претворе у визије. Па, шта је у овом нешто ново? Да ли
је то баш то или..? Покушаћу да вам то преставим у овој књизи о овом пакету који
се може назвати и програмски пакет. Бут стап преставља једна збирка описа онога
што нам може помоћи колико ми то желимо приликом израде тих престављања на
свеукупној мрежи рачунара у овом свету. То се у овом делу послова који се израђује
рачунаром назива класа. Та класа у потпуности одговара стиловима писања у
програму за писање текстова МС ворд. Њоме постављамо жељено онамо где нам је
потребно, дајемо му боју, величину и остало што је потребно да би својим изгледом
привукло нечију пажњу. Практично обликујемо све потребне делове онога што се
назива веб страницом од које је сачињен и веб сајт.
Ти описи су у једном лепо и природном реду постављени у Бутстрапу, тако да нас
уче правилном писању и лакшем сналажењу уколико негде направимо неку
правописну грешку.
Али у сваком случају постоје многи проблеми као и свуда, те зато треба, ако се они
догоде, враћати се уназад у тренутак када је све радило како треба. Разлог овом је
могућа не копаптабилност по вертикали верзија или ето правописне грешеке. Те је
моје мишљење да ако радите са неком варијантом бутстрапа увек погледајте у
документацији која је са њоме у развојној верзији шта је све потребно да би
радило све без проблема. У тим развојним верзијама пакета бутстрапа имате и
примере и ако се догоди неки проблем погледајте како је то написано у тој верзији
коју имате и употребљавате.

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

Шта пружа-које су му могућности

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

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

Бутстрап пружа :

- на било ком екранском простору 12 колона

- уграђене класе

- припремљене све потребне компоненете - иконице зване глификони, дугмад,

навигационе елементе и тд.

- Урађене делове HTML и CSS кода

- Додатне jQuery додатке

Те је за рад у бутрсапу потребно основно знање HTML и CSS којим ћете моћи да
израђујете своја дела, која се могу подједнако видети у свим претраживачима
(Chrome, Firefox, Internet Explorer, Safari i Opera).

Будућност Бутстрапа

Обзиром да пружа превелику слободу приликом креације и сталну подршку

будућност му је у великом успону.

Које знање је потребно

Да би сте почели са радом у Бутстрапу потребно је основно познавање ХТМЛ, ЦСС
и нешто Јава Скрипта, као и рада на рачунару. У облику Интернет библиоктеке
постоји такође велика колекција бесплатног кода уз чију помоћ се веома лако и брзо
учи.

Начин рада
Рад је врло једноставан. Практично се своди на могућности да употребите оно што
он има, али можете и да и то промените где вам је то потребно.
Ево и примера да би се лакше видело о чему је реч:

<button class="btn btn-default" type="submit">Button</button>

Овај ред кода написаног објашњава да неко дугме које се може назвати како год је
то потребно има класу btn која даје основне податке о дугмету док ова друга btn-
default описује ближе настајуће дугме, на пример дајућу му боју. Иза тога може
бити још нека за поједине детаље, али онда је потребно овако назначити btn-неко
наше име да би се лакше сналазили у писању класа и знало која где припада. Ово је
из разлога што те класе можемо применити колико год пута желимо и где то је
потребно, за разлику од id-а ког можемо само једном да употребимо у току
целопкупне израде сајта за један елемент на веб сајту који га једино он може
садржати.
У случајевима примене класе морају постојати у неком фаилу који се завршава
са .ЦСС, док ИД уопште немора да буде тамо описан, али исто тако и можете преко
њега дати неки опис у ЦСС фаилу. Он је битан да би сте могли у датом моменту
позвати тај елемент на страници ако над њиме се треба урадити нека радња.
Али, зато у скриптовима се и другим местима позивом тог ИД-оем позива онај
елемeнт који га има у свом саставу. Да вас не бих збунио ево примера свега тога:

<div class=” collapse ” id=”moje_dugme”>

Неки садржај слике , видео запис или шта год.

</div>

<button class=" btn btn-default" type="submit" id=”dugme” onclick=”pokazi()”>

Pokazi sadrzaj

</button>

<script>
function pokazi(){

$(‘#dugme).click(function(){
$(‘#moje_dugme’).show();
}

</script>

Овај код има садржај који је скривен јер то говори класа class=” collapse ”, да би се
садржај ипак видео дугме чији назив се показује на екрану као Pokazi sadrzaj има
свој ид id=”dugme”, али дугме путем јава скрипта позива фунцију догађајем
onclick=”pokazi()”. Та функција која се налази у делу између <script> и </script>
позивана од догађаја дугмета позива путем ид див који има ид id=”moje_dugme” и
одређује да се он јава скрипт може се назвати командом .show(); да се тај до тада
скривени садржај покаже. Али тај ид дива можемо позвати од више места , док
само тај див може да има овако написани ид јер је то нешто само његово лично.