Embed Size (px)
Citation preview
Креирање респонсивног веб сајта применом Bootsrap Studio Покренимо програм. Одаберемо опцију Create new design.
Потом сајту дајемо име Vts_sajt.
На слици испод видимо радно окружење.
Садржај <body> тага креираног у Bootstrap-у се састоји од више врста <div class=”row”>, у које
смештамо колоне. Укупан збир колона у једној вртси је 12. Изаберимо из Components менија
опцију row. Превуцимо је на радну површину.
Урадимо исто још два пута, па ћемо имати три врсте.
Потом из Components менија изаберемо опцију Column. Убацимо колону у прву врсту.
Одредимо јој ширину за стандардан десктоп рачунар MD. (LG – wide screen, MD - PC, SM - tablet, XS
- mobile).Нека то буде 4.
Попунићемо и остале врсте колонама ширине 4.
На мобилном телефону, све колоне ће бити приказане једна испод друге.
Исто је и на таблету.
На широким екранима имамо такође по три колоне у свакој врсти.
Уколико ово желимо да променимо, морамо подесити ширине и за остале уређаје: Види мени
десно (LG – 3, MD – 6). Ово подешавање важи само за другу врсту.
Као што видимо, на уређајима са широким екранима, у другој врсти имамо четири колоне, док на
класичном кућном рачунару имамо по две колоне у врсти.
Додајмо сада још три колоне испод последње врсте. Уколико смо заборавили да их сместимо у
врсту,можемо то учинити и накнадно. Тако што ћемо убацити врсту, па онда на менију у доњем
левом углу, превући постојеће колоне на одговарајуће место тако да по хијерархији буду испод
врсте коју смо накнадно додали.
На слици испод видимо препознатљиву HTMLструктуру Bootsrap-a.
У наставку ћемо приказати израду веб сајта. Једноставности ради, изоставижемо врсте, па ћемо их
на крају додати. Кренимо најпре од навигације.
У поље на левом менију укуцамо реч Nav. Појављују се компоненте навигационог менија, слика
испод. Превучемо навигациони мени на радну површину.
Селектујемо елемент навигационог менија и кликнемо десним тастером. Одаберемо опцију Edit.
Сада можемо да изменимо назив линка у навигационом менију.
Исто урадимо и са осталим линковима.
Покретањем дугмади before или after додајемо нову дугмад у навигациони мени испред или иза
тренутно селектованог дугмета.
Наравно, нову ставку у менију ћемо такође преименовати.
У десном делу менија покренемо картицу nav. Тиме смо селектовали део навигационог менија
без почетне ставке. Покренимо падајући мени Aligment и одаберемо ставку right.
Резултат је видљив на слици испод. Уколико желимо да прегледамо сајт у бровсеру, покренућемо
ставку Preview.
Преглед сајта у бровсеру.
У Components менију потражимо компонету Carusel. Тиме смо добили слајдер.
У десном менију покренемо дугме , па у source url пољу опцију from library. Потом изаберемо
слику коју желимо да убацимо на слајдер.
Убацујемо наслов за слику.
Селектујемо текст наслова слајда и кликнемо десним тастером миша. Поренемо ставку Edit. Сада
можемо мењати садржај текста.
На сличан начим ,ожемо обрисати поднаслов.
Покрећемо ставку next да бисмо убацили још један слајд на слајдер.
На исти начин као и претходно, убацујемо слику и у тај слајд.
Из Components менија бирамо колону. Убацујемо је испод слајдера
Покретањем иконице на слици испод умножавамо колоне (опција duplicate).
Покретањем менија Column size, одређујемо ширину колоне. Нека буде 3. Тако ћемо урадити и за
остале колоне.
Потом из Componets менија изаберемо опцију Heading.
У десном делу менија можемо одабрати и тип наслова. Потом на већ уобичајен начин мењамо
текст наслова.
Центрирамо наслов.......
Прегледом у бровсеру установљавамо да је превише густ распоред.
Зато мењамо број колна које заузимају дивајдери предвиђени за сваки одсек.
Потом из Componets менија бирамо опцију Image, тј. убацујемо слике.
