Рад са веб страницама захтева много више од познавања језика које морамо користити, постоји низ прекретница које морамо задовољити да бисмо развили производ са изузетним резултатом. Једна од ових прекретница је дизајн и распоред елемената који ће бити приказани на екрану.
Замислимо да морамо дизајнирати веб страницу, ако почнемо од нуле морамо узети у обзир како би требало да изгледају мени, табеле, дугмад, једноставне ствари попут икона које ћемо поставити на неке дугмад за рад итд.
Као што видимо, то је напоран посао, поготово ако желимо да изгледа оптимално и да буде привлачан, морамо такође бити детаљни како бисмо веб локацији дали лични печат, шта ако нисмо дизајнери? Ово је велико питање, постоје програмери који не затварају очи када је у питању добар укус и дизајн, а ове врсте профила су онемогућене да би се појавиле квалитетне веб странице. Или шта ако имамо добар укус, али имамо мало времена за дизајн?
Да бисмо решили ова два велика захтева, имамо Боотстрап што није ништа друго до а ЦСС фрамеворк то нам омогућава да одмах добијемо основни аспект наше странице без потребе да патимо око дизајна, али осим тога помаже нам и са основним ефектима и врло посебним начином структурирања садржаја који ћемо представити.
Боотстрап предностиТо већ знамо Боотстрап то је ЦСС фрамеворк и то нам помаже да успоставимо основне аспекте наше веб странице, али поред тога што има одређене предности у погледу употребе, у наставку ћемо видети неке позитивне ствари које нам она доноси Боотстрап:
1. Поновна употребаВитх Боотстрап Подразумевано имамо многе компоненте направљене тако да их можемо користити без измена у различитим деловима наше веб странице, чиме се скраћује време и количина кода који користимо. Ово такође погодује модуларном развоју наших апликација.
2. ДоследностЗахваљујући чињеници да имамо многе компоненте направљене на генерички начин, код је доследан, односно обрађује врло сличне структуре, па ћемо приликом читања или одржавања апликације већ знати како функционише много једноставније.
3. Флексибилан дизајнМобилни дизајн је веома важан и Боотстрап узимајући то у обзир од почетка, имамо флексибилност коју наша веб страница прилагођава различитим резолуцијама и распоредима екрана аутоматски, штедећи нам много посла од дизајна мобилних приказа од нуле.
4. ЗаједницаЈош један аспект који треба узети у обзир је документација, када користимо оквир треће стране, врло је важно да имамо где да се обратимо када имамо сумње и у том смислу Боотстрап То нема поређења, јер без икаквог напора можемо добити готово сваки одговор на наше сумње.
Недостаци БоотстрапаИако је скоро све добро, морамо разговарати и о недостацима или не тако добрим аспектима са којима се суочавамо када ово користимо ЦСС фрамеворкПогледајмо неке од његових слабости у наставку.
1. Мали оригиналАко не одвојимо мало времена за израду нашег дизајна, можемо остати исто толико оригинални ако га користимо Боотстрап без више, иако је овај оквир за то дизајниран, због великог усвајања које је имао, морамо још мало да радимо како не бисмо личили на копију копије.
2. Крива учењаКао и све, морамо проћи криву учења ако желимо извући максимум из тога, проблем је у томе што ако желимо прећи с основног аспекта на напредни, шок је помало јак.
3. Лоша компатибилност између верзијаКада дође до промене верзије, претходна верзија губи много на валидности и ако желимо да је ажурирамо то ће нас коштати, посебно ако смо направили важне промене како би наша веб локација изгледала другачије.
ИнсталацијаКад једном сазнамо шта је то Боотстрап, те предности и недостатке кориштења у нашим пројектима, морамо доћи до практичног дијела водича, сада ћемо научити одакле можемо добити овај оквир и како га можемо укључити у свој пројект.
Геттинг БоотстрапПрво што морамо да урадимо је да набавимо потребне датотеке које ћемо укључити Боотстрап у нашем пројекту, зато морамо да посетимо њихову веб страницу гетбоотстрап.цом и преузмемо потребне датотеке, или алтернативно да употребимо ЦДН да бисмо избегли хостовање датотека на нашем серверу и смањили употребу наше пропусности.
Без обзира на опцију, морамо бити на страници сличној следећој ако кликнемо дугме за почетно преузимање приликом посете страници са оквиром:
ЕНЛАРГЕ
Да бисмо олакшали рад, претпоставимо да смо преузели пројекат, он се налази у компримованој датотеци коју морамо издвојити на локацији коју можемо користити и која би требала бити нешто слично следећем:
Као што видимо, у оквиру нашег пројекта морају постојати три фасцикле, једна за ЦСС, други за изворе који се користе и на крају један за ЈС неопходно. Са овим већ имамо на располагању Боотстрап, што није ништа друго до копирање пројекта у нашу фасциклу са ресурсима.
Започните са БоотстрапомБудући да имамо све ресурсе у свом поседу, морамо их укључити у свој дизајн, за то можемо да направимо датотеку ХТМЛ и тамо направите потребне инклузије, то можемо видети детаљније у следећем коду:
Инсталирање БоотстрапаКао што видимо, једино што смо урадили је укључивање три датотеке, конкретно две .цсс и а .јс, ово је оно што нам је потребно за почетак кориштења цијеле структуре, ако сада отворимо датотеку прегледником, видјет ћемо како се фонт слова разликује од оног који бисмо обично видјели с ознаком Х1:
Мрежа БоотстрапДа бисмо постигли организацију наших дизајна, Боотстрап користите решетку или грид, ово се састоји од 12 колона, тако да све што видимо на екрану мора бити организовано на овај начин, тиме се постиже да страница може бити структурирана на такав начин да можемо користити алате који нам се нуде на врло транспарентан начин.
Наравно да је то процес прилагођавања, али важно је да можемо направити колоне које групишу неколико, као и када радимо са табелама ХТМЛ да можемо направити колоне са неколико спојева са својством спан. Да бисмо направили веб локацију која користи ову структуру, морамо имати само следеће:
Див са класом контејнер, унутар овог див са класом ред, и на крају унутар једног или више див са класом купус, погледајмо у следећем коду пример странице са 3 колоне, за то свака колона мора груписати 4 да би додала укупно 12 што је оно што смо објаснили подразумевана вредност Боотстрап.
Колоне у БоотстрапуОво резултира страницом на којој су три унутрашња дива у једном реду подељена у три једнаке колоне, као што можемо видети на следећој слици:Пример како се користе колоне у боотстрапу
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Вестибулум еу сапиен сит амет маурис аликует елементум. Цео број аликует метус егет орци егестас вариус. Фусце сусципит ид ек иацулис вулпутате. Нуллам рхонцус еу нибх вел дигниссим. Ут еуисмод пурус витае елит феугиат импердиет. Вивамус сед пхаретра масса. Нам јуст ек, рекуест фор еффицитур вел, плацерат сит амет пурус. Црас ид семпер фелис. Будите ац хендрерит пурус. Вестибулум цонгуе дуи вел макимус цонваллис. Цео број еу елеифенд маурис.Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Вестибулум еу сапиен сит амет маурис аликует елементум. Цео број аликует метус егет орци егестас вариус. Фусце сусципит ид ек иацулис вулпутате. Нуллам рхонцус еу нибх вел дигниссим. Ут еуисмод пурус витае елит феугиат импердиет. Вивамус сед пхаретра масса. Нам јуст ек, рекуест фор еффицитур вел, плацерат сит амет пурус. Црас ид семпер фелис. Будите ац хендрерит пурус. Вестибулум цонгуе дуи вел макимус цонваллис. Цео број еу елеифенд маурис.Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Морби хендрерит аугуе ет лаореет аликуам. Аликуам олакшава мој ин лорем пхаретра, ут волутпат магна лаореет. Фушће сед ми ут турпис бибендум дицтум. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Вестибулум еу сапиен сит амет маурис аликует елементум. Цео број аликует метус егет орци егестас вариус. Фусце сусципит ид ек иацулис вулпутате. Нуллам рхонцус еу нибх вел дигниссим. Ут еуисмод пурус витае елит феугиат импердиет. Вивамус сед пхаретра масса. Нам јуст ек, рекуест фор еффицитур вел, плацерат сит амет пурус. Црас ид семпер фелис. Будите ац хендрерит пурус. Вестибулум цонгуе дуи вел макимус цонваллис. Цео број еу елеифенд маурис.
ЕНЛАРГЕ
Ова структура, упркос томе што изгледа помало квадратно, веома је флексибилна, јер морамо само направити неку врсту игре са контејнерима и њиховим колонама, како бисмо постигли жељене резултате. Овим смо завршили овај водич, ефикасно смо направили прве кораке Боотстрап и сада можемо почети да користимо његове предности директније на нашим пројектима или веб апликацијама.
