Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap...
Transcript of Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap...
![Page 1: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/1.jpg)
1
Boostrap Bootsrap je CSS framework. Функционише на принципу грид система и готових класа за поједине
елементе. У сваком случају, потребно је познавање HTML-а и CSS-а да би се елементи додтно
прилагодили потребама одређеног веб сајта. Пре него што почнемо, неопходно је скинути
Bootsrap-ов код са званичног сајта.
![Page 2: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/2.jpg)
2
На истом сајту можемо наћи и код за компоненте. Наравно, постоје и бројни готови Boostrap-oви
темплејти, које корисник једноставно може изменити, али нећемо се бавити тиме у овом
туторијалу.
![Page 3: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/3.jpg)
3
Bootstrap CDN
Уколико желимо да избегнемо download Bootstrap-овог кода, можемо да користимо и да га
линком повежемо са CDN – ом (Content Delivery Network).
MaxCDN укључује CDN подршку за Bootstrap-ов CSS и JavaScript. Такође морамо
укључити и подршку за jQuery:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Предност коришћења Bootstrap CDN-а:
Многи корисници су већ download-овали Bootstrap преко MaxCDN приликом посете неком другом
веб сајту. С обзиром да ће се одговарајући код повући из кеша, учитавање сајта је знатно убрзано.
Следи пример када не користимо MaxCDN, већ користимо код који смо скинули са Bootstrap-овог
сајта. Елементи који су доступни у Bootstrap-у су углавном писани у HTML5-у, па је стога неопходно
користити одговарајући DOCTYPE.
![Page 4: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/4.jpg)
4
Да бисмо се осигурали да сајт буде респонсиван, подешавамо viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Ради лакшег рада, преименоваћемо Boostrap-ов фолдер, тј. Даћемо му једноставнији
назив.
![Page 5: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/5.jpg)
5
На слици испод видимо фолдерску структуру кода који смо преузели.
![Page 6: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/6.jpg)
6
На основу тога вршимо линковање ......
Пре него што почнемо са радом, морамо разјаснити две ствари, а то су контерјнери и грид
систем.
Контејнери
Bootstrap подразумева да се лементи смештају у тзв. контејнере, да неби дошло до
преливања садржаја. Контејнери су у ствари <div>-ови са одговарајућом класом. Постоје
две врсте контејнера.
1. Класа .container нам даје респонсивни контејнер фиксне ширине class provides a
![Page 7: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/7.jpg)
7
2. Класа .container-fluid креира контејнер који се протеже шитавом ширином viewport-а.
Оба типа контејнера су илустрована на слици испод.
Ради лакшег разумевања, приказаћемо преко кода обе врсте контејнера.
У ту сврху, креираћемо два дива, са id-овима fluidni и fiksi, чије позадинске боје су редом,
зелена и нараџаста.
![Page 8: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/8.jpg)
8
Посматрајмо сада понашање ових контејнера при различитим ширинама екрана.
![Page 9: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/9.jpg)
9
![Page 10: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/10.jpg)
10
Грид систем Bootstrap дозвољава рад са 12 колона. Можемо користити <div>-ове који се протежу преко свих 12
колона или можемо користити више <div>-ова који се протежу преко мањег броја колона, али
збир њихових колона износи 12. Ширина колона се аутоматски прилагођава ширини екрана.
Bootstrap – ов грид систем има 4 класе:
• xs (за мобилне уређаје – екрани чија је ширина мања од 768px) • sm (за таблете – екрани чија је ширина већа или једнака 768px) • md (мали лап топови – екрани ширине веће или јенаке од 992px) • lg (стандардни лаптопови или десктоп рачунари – ширина екрана већа или једнака од
1200px)
Наравно, ове класе можемо комбиновати да бисмо постигли жељени изглед веб стране на
различитим уређајима.
Принцип Bootstrap-a се заснива на томе да креирамо <div> са класом „row” (врста) и да у
њу сместимо одговарајући број <div> са класама колона (збир је 12)
Да бисмо ово илустровали, посматрајмо следећи пример:
![Page 11: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/11.jpg)
11
![Page 12: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/12.jpg)
12
![Page 13: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/13.jpg)
13
Намера нам је да креирамо веб страницу Високе техничке школе. Кренимо са убацивањем
слајдера. Елемет слајдер се назива Carusel.
Наравно, код слајдера морамо прилагодти нашем пројекту.
![Page 14: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/14.jpg)
14
Потом изаберемо један од респонсивних навигационих менија, и такође прилагођавамо
код. У нашем случају, неопходно је додавање линкова.
![Page 15: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/15.jpg)
15
Изглед странице са слајдером и навигационим менијем.
Уколико желимо да променимо изглед било којег готовог елемента, неопходно је да
креирамо сопствену класу или додамо id том елементу, те га уредимо помоћу нашег CSS
кода. У нашем случају, променићемо боју навигационог менија. У ту сврху написаћемо
класу .navColor.
![Page 16: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/16.jpg)
16
Изглед навигационог менија након додавања класе.
![Page 17: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/17.jpg)
17
Поделимо сада центарлни део странице на две колоне. Колонама ћемо дати id test1 и test2
и обојити им позадину у зелену, односно нараџасту боју, да бисо тестирали њихов изглед.
Обе колоне треба да се на мобилним уређајима простиру преко свих 12 колона, док на
таблетима треба да заузму по 6 колона, а на ширим екранима лви део треба да заузме 8
колона, а десни део четири.
![Page 18: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/18.jpg)
18
Шири екрани:
Средњи екрани:
![Page 19: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/19.jpg)
19
Мали екрани:
Намера нам је да на левом делу странице објављујемо вести. У ту сврху ћемо искористити
елемент који се зове Jumbotron.
![Page 20: Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система](https://reader035.fdocuments.in/reader035/viewer/2022063022/5fe7764abbf568226e00efe7/html5/thumbnails/20.jpg)
20