1 Boostrap Bootsrap je CSS framework. Функционише на принципу грид система и готових класа за поједине елементе. У сваком случају, потребно је познавање HTML-а и CSS-а да би се елементи додтно прилагодили потребама одређеног веб сајта. Пре него што почнемо, неопходно је скинути Bootsrap-ов код са званичног сајта.
20
Embed
Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Boostrap Bootsrap je CSS framework. Функционише на принципу грид система и готових класа за поједине
елементе. У сваком случају, потребно је познавање HTML-а и CSS-а да би се елементи додтно
прилагодили потребама одређеног веб сајта. Пре него што почнемо, неопходно је скинути
Bootsrap-ов код са званичног сајта.
2
На истом сајту можемо наћи и код за компоненте. Наравно, постоје и бројни готови Boostrap-oви
темплејти, које корисник једноставно може изменити, али нећемо се бавити тиме у овом
туторијалу.
3
Bootstrap CDN
Уколико желимо да избегнемо download Bootstrap-овог кода, можемо да користимо и да га
линком повежемо са CDN – ом (Content Delivery Network).
MaxCDN укључује CDN подршку за Bootstrap-ов CSS и JavaScript. Такође морамо
Ради лакшег рада, преименоваћемо Boostrap-ов фолдер, тј. Даћемо му једноставнији
назив.
5
На слици испод видимо фолдерску структуру кода који смо преузели.
6
На основу тога вршимо линковање ......
Пре него што почнемо са радом, морамо разјаснити две ствари, а то су контерјнери и грид
систем.
Контејнери
Bootstrap подразумева да се лементи смештају у тзв. контејнере, да неби дошло до
преливања садржаја. Контејнери су у ствари <div>-ови са одговарајућом класом. Постоје
две врсте контејнера.
1. Класа .container нам даје респонсивни контејнер фиксне ширине class provides a
7
2. Класа .container-fluid креира контејнер који се протеже шитавом ширином viewport-а.
Оба типа контејнера су илустрована на слици испод.
Ради лакшег разумевања, приказаћемо преко кода обе врсте контејнера.
У ту сврху, креираћемо два дива, са id-овима fluidni и fiksi, чије позадинске боје су редом,
зелена и нараџаста.
8
Посматрајмо сада понашање ових контејнера при различитим ширинама екрана.
9
10
Грид систем Bootstrap дозвољава рад са 12 колона. Можемо користити <div>-ове који се протежу преко свих 12
колона или можемо користити више <div>-ова који се протежу преко мањег броја колона, али
збир њихових колона износи 12. Ширина колона се аутоматски прилагођава ширини екрана.
Bootstrap – ов грид систем има 4 класе:
• xs (за мобилне уређаје – екрани чија је ширина мања од 768px) • sm (за таблете – екрани чија је ширина већа или једнака 768px) • md (мали лап топови – екрани ширине веће или јенаке од 992px) • lg (стандардни лаптопови или десктоп рачунари – ширина екрана већа или једнака од
1200px)
Наравно, ове класе можемо комбиновати да бисмо постигли жељени изглед веб стране на
различитим уређајима.
Принцип Bootstrap-a се заснива на томе да креирамо <div> са класом „row” (врста) и да у
њу сместимо одговарајући број <div> са класама колона (збир је 12)
Да бисмо ово илустровали, посматрајмо следећи пример:
11
12
13
Намера нам је да креирамо веб страницу Високе техничке школе. Кренимо са убацивањем
слајдера. Елемет слајдер се назива Carusel.
Наравно, код слајдера морамо прилагодти нашем пројекту.
14
Потом изаберемо један од респонсивних навигационих менија, и такође прилагођавамо
код. У нашем случају, неопходно је додавање линкова.
15
Изглед странице са слајдером и навигационим менијем.
Уколико желимо да променимо изглед било којег готовог елемента, неопходно је да
креирамо сопствену класу или додамо id том елементу, те га уредимо помоћу нашег CSS
кода. У нашем случају, променићемо боју навигационог менија. У ту сврху написаћемо
класу .navColor.
16
Изглед навигационог менија након додавања класе.
17
Поделимо сада центарлни део странице на две колоне. Колонама ћемо дати id test1 и test2
и обојити им позадину у зелену, односно нараџасту боју, да бисо тестирали њихов изглед.
Обе колоне треба да се на мобилним уређајима простиру преко свих 12 колона, док на
таблетима треба да заузму по 6 колона, а на ширим екранима лви део треба да заузме 8
колона, а десни део четири.
18
Шири екрани:
Средњи екрани:
19
Мали екрани:
Намера нам је да на левом делу странице објављујемо вести. У ту сврху ћемо искористити