Boostrap - vtsns.edu.rsvtsns.edu.rs/wp-content/uploads/2017/12/Boostrap.1deo.pdf · Boostrap Bootsrap je CSS framework. Функционише на принципу грид система

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. Такође морамо

укључити и подршку за 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.

4

Да бисмо се осигурали да сајт буде респонсиван, подешавамо viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ради лакшег рада, преименоваћемо 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

Мали екрани:

Намера нам је да на левом делу странице објављујемо вести. У ту сврху ћемо искористити

елемент који се зове Jumbotron.

20